Just playing with window.postMessage for cross-domain messaging.
To run:
bundle
bundle exec rackup -p 1234
bundle exec rackup -p 4567 # to give you a different domain. or use a localhost alias.
Then visit http://localhost:1234/local-page.html?otherPort=4567
Alternatively, you can host these HTML files on your own server (without a Ruby web server).
| # Simply using Rack::Directory to easily boot up a web server | |
| # to serve all of the static files in the current directory. | |
| run Rack::Directory.new File.dirname(__FILE__) |
| source :rubygems | |
| gem "rack" |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Local page</title> | |
| <script src="shared.js"></script> | |
| </head> | |
| <body onload="onload()"> | |
| <header> | |
| <h1>Local Page <span class="url"></span></h1> | |
| </header> | |
| <pre id="log"></pre> | |
| <form onsubmit="sendMessage(); return false;"> | |
| <input id="message" placeholder="message to send"></input> | |
| </form> | |
| <script> | |
| function onload() { | |
| shared.onload(); | |
| if (! remotePort()) { | |
| alert("You must pass ?otherPort=[PORT NUMBER]"); | |
| return; | |
| } | |
| var iframe = document.createElement("iframe"); | |
| iframe.id = "remote-iframe"; | |
| iframe.style.width = "100%"; | |
| iframe.style.height = "350px"; | |
| iframe.setAttribute("src", "http://localhost:" + remotePort() + "/remote-page.html"); | |
| document.body.appendChild(iframe); | |
| } | |
| function remotePort() { | |
| var otherPortMatch = window.location.search.match(/otherPort=(\d+)/); | |
| if (otherPortMatch) | |
| return otherPortMatch[1]; | |
| } | |
| window.addEventListener("message", function(event) { | |
| shared.log({ | |
| log: "Local Page: onmessage.", | |
| origin: event.origin, | |
| messageReceived: event.data | |
| }); | |
| }, false); | |
| function sendMessage() { | |
| var message = document.getElementById("message").value; | |
| var target = document.getElementById("remote-iframe").contentWindow; | |
| target.postMessage(message, "http://localhost:" + remotePort()); | |
| document.getElementById("message").value = ""; | |
| } | |
| </script> | |
| </body> | |
| </html> |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>REMOTE PAGE</title> | |
| <script src="shared.js"></script> | |
| </head> | |
| <body onload="onload()"> | |
| <header> | |
| <h1>REMOTE PAGE <span class="url"></span></h1> | |
| </header> | |
| <pre id="log"></pre> | |
| <form onsubmit="sendMessage(); return false;"> | |
| <input id="message" placeholder="message to send"></input> | |
| </form> | |
| <script> | |
| function onload() { | |
| shared.onload(); | |
| } | |
| window.messageOrigin = null; | |
| window.messageSource = null; | |
| window.addEventListener("message", function(event) { | |
| shared.log({ | |
| log: "RemotePage: onmessage.", | |
| origin: event.origin, | |
| messageReceived: event.data | |
| }); | |
| window.messageOrigin = event.origin; | |
| window.messageSource = event.source; | |
| }, false); | |
| function sendMessage() { | |
| if (! messageOrigin || ! messageSource) { | |
| alert("You must send a message from the local -> remote page before the remote page can send -> local"); | |
| return; | |
| } | |
| var message = document.getElementById("message").value; | |
| messageSource.postMessage(message, messageOrigin); | |
| document.getElementById("message").value = ""; | |
| } | |
| </script> | |
| </body> | |
| </html> |