fix: set innerText instead of innerHTML (#264)

mdn · May 8, 2024 · 36eba9f · 36eba9f
1 parent 25ee749
commit 36eba9f
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 13 deletions.
diff --git a/channel-messaging-basic/index.html b/channel-messaging-basic/index.html
@@ -5,15 +5,20 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width" />
     <title>Channel messaging demo</title>
+    <style>
+      iframe {
+        border-radius: 1em;
+      }
+    </style>
   </head>
   <body>
     <h1>Channel messaging demo</h1>
-    <p class="output">My body</p>
+    <p class="output">Index.html para (I will be overwritten)</p>
     <iframe src="page2.html" width="480" height="320"></iframe>
     <script>
-     const channel = new MessageChannel();
-     const output = document.querySelector('.output');
-     const iframe = document.querySelector('iframe');
+      const channel = new MessageChannel();
+      const output = document.querySelector(".output");
+      const iframe = document.querySelector("iframe");
 
       // Wait for the iframe to load
       iframe.addEventListener("load", onLoad);
@@ -22,14 +27,16 @@ <h1>Channel messaging demo</h1>
         // Listen for messages on port1
         channel.port1.onmessage = onMessage;
         // Transfer port2 to the iframe
-        iframe.contentWindow.postMessage("Hello from the main page!", "*", [
-          channel.port2,
-        ]);
+        iframe.contentWindow.postMessage(
+          "A message from the index.html page!",
+          "*",
+          [channel.port2]
+        );
       }
 
       // Handle messages received on port1
       function onMessage(e) {
-        output.innerHTML = e.data;
+        output.innerText = e.data;
       }
     </script>
   </body>

diff --git a/channel-messaging-basic/page2.html b/channel-messaging-basic/page2.html
@@ -4,19 +4,25 @@
     <meta charset="utf-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width" />
-    <title>My page title</title>
+    <title>Page 2</title>
+    <style>
+      body {
+        background-color: aliceblue;
+        font-family: monospace;
+      }
+    </style>
   </head>
   <body>
-    <p class="output">iFrame body</p>
+    <p class="output">page2.html (iframe body)</p>
     <script>
       const output = document.querySelector(".output");
 
       window.addEventListener("message", onMessage);
 
       function onMessage(e) {
-        output.innerHTML = e.data;
-        // Use the transfered port to post a message back to the main frame
-        e.ports[0].postMessage("Message back from the IFrame");
+        output.innerText = e.data;
+        // Use the transferred port to post a message to the main frame
+        e.ports[0].postMessage("A message from the iframe in page2.html");
       }
     </script>
   </body>