Geek Answers Handbook

Prevent story distribution in the parent window

I have two simple html pages: parent and child. The parent stores the child inside the iframe .
Parent.html:

 <html> <head></head> <body> <input type="text" id="text" /> <input type="button" value="change hash" onclick="javascript:changeHash()" /> <iframe src="Child.html"></iframe> <script type="text/javascript"> function changeHash () { window.location.hash = document.getElementById('text').value; } </script> </body> </html>

And Child.html:

 <html> <head></head> <body> <input type="button" value="go back" onclick="javascript:goBack()" /> <script type="text/javascript"> function goBack () { this.history.back(); } </script> </body> </html>

I use the change hash button to add some hashes to the story. And when I click the return button inside the iframe , the hash of the parent page changes. And it looks like this is spec behavior.

So the question is, is it possible to prevent the distribution of the returned from iframe to the parent page? So I would like the iframe not to change the parent history / hash.

Note: the same behavior for the go function (in fact, go(-1) same as back() ).

+7
javascript browser-history iframe hashchange
source share
1 answer

I find it impossible to do this without using a framework, but I have a solution that can (partially) solve this problem.

First, I was thinking about changing the history object and overriding it, but this is not possible, since this property inside the window is not writable . but we can override functions inside history .

This led me to redefine the back() function, and instead of letting the history object do its job, we should find the previous URL and change the location of the document (child).

In Child.html override the back() function as follows:

 history.back = function () { document.location = document.referrer; }

The problem we have in this function is that after loading the parent document and loading iframe (child), document.referrer child object returns the URL of the parent

So, before changing document.location , let the test if document.referrer is different from the original URL (witout anchor)

 history.back = function () { var url = window.parent.document.location.href.split("#")[0]; if(document.referrer!=url) document.location = document.referrer; }

Finally, this solution, which I found and unfortunately has a problem, is that you cannot override the forward() function, which allows you to go to the next URL, it is impossible to find the next URL and document.referrer returns The URL of the page you came from can be the previous page or the next page. but still you can navigate inside the iframe without changing the parent location.

+3
source share

More articles:


All Articles