pd/index.html

   1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
   2 <html>
   3     <head>
   4         <meta name="viewport" content="initial-scale=1" />
   5         <title>Test</title>
   6         <script>
   7             function accessParentElement() {
   8                 window.opener.document.body.style.backgroundColor = "#BBFFFF";
   9             }
  10             function accessWebMessaging() {
  11                 window.opener.postMessage ("web messaging!<br>", "*");
  12             }
  13
  14             // create custom event
  15             var event = new CustomEvent("pdevent", {
  16                 detail: {
  17                 message: "custom event!<br>",
  18                 time: new Date(),
  19                 },
  20                 bubbles: true,
  21                 cancelable: true
  22             });
  23             function accessCustomEvent() {
  24                 window.opener.dispatchEvent(event);
  25             }
  26         </script>
  27     </head>
  28     <body bgcolor="#FF9966" text="#FFFFFF">
  29         This is a PD.<br>A PD can control the Box.<br>
  30         <input type="button" value="ColorChange" onclick="accessParentElement()" />
  31         <input type="button" value="WebMessage" onclick="accessWebMessaging()" />
  32         <input type="button" value="CustomEvent" onclick="accessCustomEvent()" />
  33         <div id="fromBox"></div>
  34     </body>
  35 </html>