Skip to content Skip to sidebar Skip to footer
Home / Html / Html5 History / Iframe / Javascript

Handling History Navigation Inside Iframe

Post a Comment
I am building a navigation page that shows some contents inside an iframe. The requirement is that the navigation link that corresponds to the currently loaded page is highlighted.

Solution 1:

This really isn't a satisfactory solution, but you can examine the size of the history stack in the frame's on load event.

<html>
<body>

<iframe src="http://w3c.org" class="xssFrame"></iframe>
<p class="output"></p>

<script>
var size = window.history.length;
var tempSize = null
//document.querySelector(".xssFrame").unload = function(){} //might need to set this handler to force load event on back click
document.querySelector(".xssFrame").onload = function () {
    var delta = size - window.history.length;
    document.querySelector(".output").innerHTML = "parent history: " + size + " combined history: " + window.history.length + " go " + (delta-1).toString()
    if(tempSize ===  window.history.length) {
      document.querySelector(".output").innerHTML = "go now" + (delta).toString()
      window.history.go(delta)
    } else {
      tempSize = window.history.length
    }


}
</script>
</body>
</html>

Post a Comment for "Handling History Navigation Inside Iframe"