All geek questions in one place

How to get data published using postMessage HTML5?

I have two HTML files. In one HTML file, I am posting using postMessage in HTML5. How can I get the sent message in other HTML files upon loading?

one.html

 <html> <head> <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <script language="javascript"> $(document).ready(function() { //post message var iframeWin = document.getElementById("iframe_id").contentWindow; iframeWin.postMessage("helloooo"); }); </script> <title>IFrame Example</title> </head> <body> <input id="myInput" type="hidden" value="IDDUSER"> <iframe name="iframe" id="iframe_id" src="Two.html" height="150"></iframe> </body> </html>

Two.html

 <html> <head> <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <script language="javascript"> $(document).ready(function() { //Get posted message here }); </script> <title>IFrame Child Example</title> </head> <body> <p id="received-message">I've heard nothing yet</p> <h1>Iframe</h1> </body> </html>
+4
source share
3 answers

You must listen for the message event of the window object in the child iframe. In addition, postMessage accepts 2 parameters, a message and a domain.

one.html

 <html> <head> <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <script language="javascript"> $(document).ready(function() { $('#clickMe').click(function() { //post message var iframeWin = document.getElementById("iframe_id").contentWindow; iframeWin.postMessage("helloooo","*"); }); }); </script> <title>IFrame Example</title> </head> <body> <input id="myInput" type="hidden" value="IDDUSER"> <button id="clickMe">Click Me</button> <iframe name="iframe" id="iframe_id" src="Two.html" height="150"></iframe> </body> </html>

Two.html

 <html> <head> <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <script language="javascript"> $(document).ready(function() { $(window).on('message', function(evt) { $('#received-message').html(evt.originalEvent.data); }); }); </script> <title>IFrame Child Example</title> </head> <body> <p id="received-message">I've heard nothing yet</p> <h1>Iframe</h1> </body> </html>
+2
source

HTML5 postMessage() The API method has the syntax as shown below:

 userWindow.postmessage(myMessage, targetOrigin);

this will send myMessage to the window specified by userWindow , which has targetOrigin as a URI. If the userWindow link matches, but targetOrigin does not match the URI, then the message will not be sent.

In the target window, i.e. userWindow , you can listen to the message event.

 window.addEventListener('message', handlerFunction, captureBubble);

For example, if you have a link to a window in the myWindow variable, then on the source ...

Call

 myWindow.postMessage('this is a message', 'http://www.otherdomain.com/');

Callback handling

 window.addEventListener("message", receiveMessage, false); function receiveMessage(event){ if (event.origin !== 'http://www.otherdomain.com/') return; // this check is neccessary // because the `message` handler accepts messages from any URI console.log('received response: ',event.data); }

and on target ...

Message handler

 window.addEventListener("message", receiveMessage, false); function receiveMessage(event){ if (event.origin !== 'http://www.callingdomain.com/') return; console.log('received message: ',event.data); event.source.postMessage('this is response.',event.origin); }

postMessage API Link - MDN

Good tutorial

+2
source

You can use localStorage HTML5 like

 localStorage.setItem("msgvariable", message);

and get it on another html page like

 var retrivedMsg = localStorage.getItem("msgvariable");

Check out the implementation HERE

-one
source

Source: https://habr.com/ru/post/1495286/

More articles:


All Articles