Iframe changing address

Example of changing parent address from an iframe

by matteo bertamini

HTML

<p>
  <h2>Location of the page:</h2>
  <span id="location"></span>
</p>

<iframe id="frame" sandbox="allow-scripts">
</iframe>

<script>
	document.getElementById('location').textContent = window.location;
	document.getElementById('frame').src="//jsfiddle.net/itbertuz/1xbxsb1L/10/show";
	var receiveMessage = function(e) {
	  var stateObj = {page : e.data};
  	history.pushState({}, "", e.data);
    document.getElementById('location').textContent = window.location;
	};
  window.addEventListener("message", receiveMessage, false);
</script>

CSS

body {
  font-family: helvetica;
}

h2 {
  font-size: 1rem;
  margin-bottom: 0.5rem;
}

#location {
  color: darkred;
}

iframe {
  border-radius: 5px;
  border: 2px solid grey;
}