beccasaurus/Gemfile

## README.md

      
    Raw
  

              README.md
            
          
    window.postMessage

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).

  
## config.ru
# 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__)

## Gemfile
source :rubygems
gem "rack"

## local-page.html
<!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>

## remote-page.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>

## shared.js
window.shared = {
  log: function() {
    var message = JSON.stringify(arguments);
    var logElement = document.getElementById("log");
    logElement.innerText = logElement.innerText + message + "\n";
  },
  onload: function() {
    document.body.style.backgroundColor = "#" + window.location.port.substring(0, 3);
    document.querySelector("header .url").innerText = window.location;
  }
};
	# 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__)
	<!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>
	window.shared = {
	log: function() {
	var message = JSON.stringify(arguments);
	var logElement = document.getElementById("log");
	logElement.innerText = logElement.innerText + message + "\n";
	},
	onload: function() {
	document.body.style.backgroundColor = "#" + window.location.port.substring(0, 3);
	document.querySelector("header .url").innerText = window.location;
	}
	};