Things about Javascript and iframe_javascript skills-JS Tutorial-php.cn

Things about Javascript and iframe_javascript skills

WBOY

Release： 2016-05-16 17:30:12

Original

1046 people have browsed it

For pages embedded in iframes, both the parent page and the child page can easily perform read and write operations in the same domain or across subdomains; in the case of completely different domains, they can also communicate by changing the hash. Below I tested this for compatibility with data transfer and changes in nine different browsers (versions).
Read and write content in the iframe in the same domain or across subdomains
Parent page read and write subpages:

Copy code The code is as follows:

<script><br>window.onload = function () {<br> /*<br> * The following two methods are used to obtain nodes Any content format is acceptable. <br> * Since IE6 and IE7 do not support the contentDocument attribute, the common <br> is used here * window.frames["iframe Name"] or window.frames[index]<br> */<br> var d = window.frames["test-iframe"].document;<br> d.getElementsByTagName('h1')[0].innerHTML = 'pp';<br> alert(d.getElementsByTagName('h1')[0 ].firstChild.data);<br>}<br></script>

Note: be sure to pass the window.onload method Access the node in the iframe, otherwise the browser will prompt an error - access denied. In IE8, Firefox3.6, Opera11, nodes in iframe can also be accessed during DOMReady.
Child page read and write operation parent page:

Copy code The code is as follows:

<script><br> parent.document.getElementsByTagName('h1')[0].innerHTML = 'pp';<br> alert(parent.document.getElementsByTagName('h1')[0] .firstChild.data);<br></script>

Summary:
•1 Test passed IE6, IE7, IE8, Firefox2.0, Firefox3.0, Firefox3.6, Chrome8, Opera11, Safari5.
•2 Check the data and find that document.getElementById('id name').contentDocument is equal to window.frames["iframe Name"]. document.
•3 When crossing subdomains, you need to add document.domain = 'xxx.com';
Cross-domain operation of iframe content
When two web pages are in different domains, in order to realize mutual call of data, mutual communication can only be achieved by changing the value of the hash attribute of the location object through JS.
Parent page:

Copy code The code is as follows:

Sub-page:

Copy code The code is as follows:

RRRRRR
<script><br>var url = 'http://www.xxx.com/father.html';<br> oldHash = self.location.hash,<br> newHash,<br> interval = window.setInterval(function(){<br> newHash = self.location.hash;<br> if(oldHash != self.location.hash) {<br> document.getElementsByTagName('h1')[0].innerHTML = 'pp';<br> //alert (parent.location.href); //Remove this comment, the browser will prompt that there is no permission<br> parent.location.href = url '#b';<br> window.clearInterval(interval);<br> }<br> },500);<br></script>

Summary:
•1 Tested on IE6, IE7, IE8, Firefox2.0, Firefox3.0, Firefox3.6, Chrome8, Opera11, Safari5, except IE6 , except IE7, as long as the hash is changed, it will be recorded in the browser history.
•2 I tried to use the parent.location.replace method on the child page to prevent the parent page from sending a request to the server and jumping, so that theoretically the browser would not record the history, but it did not work.
•2 The child page does not have the right to read the url of the parent page, but it can write to the url of the parent page, so when doing cross-domain operations, you must know the url of the parent page in advance
Since the front end solves cross-domain problems The limitations are relatively large, so it is best to use a server-side solution