About Javascript and iframe _ javascript skills

Iframe is used by many websites. Although it is convenient for development and maintenance (several pages may call the same iframe at the same time), there is still a security problem embedded into the iframe page, both the parent page and child page can easily perform read and write operations in the same domain or cross-subdomain. In the case of completely different domains, you can also change the hash mode for communication. Next I will test the compatibility between data transmission and changes in nine different (Version) browsers.
Content in iframe for read/write operations in the same domain or cross-subdomain
Parent page:

The Code is as follows:

Script
Window. onload = function (){
/*
* The following two methods can be used to obtain node content.
* Because IE6 and IE7 do not support the contentDocument attribute, a common
* Window. frames ["iframe Name"] or window. frames [index]
*/
Var d = window. frames ["test-iframe" cmd.doc ument;
D. getElementsByTagName ('h1 ') [0]. innerHTML = 'pp ';
Alert (d. getElementsByTagName ('h1 ') [0]. firstChild. data );
}
Script

Note:You must use the window. onload method to access the node in iframe. Otherwise, the browser will prompt an error-Access denied. In IE8, Firefox3.6, and Opera11, the node in iframe can also be accessed in DOMReady.
Sub-page read/write operation parent page:

The Code is as follows:

Script
Parent.doc ument. getElementsByTagName ('h1 ') [0]. innerHTML = 'pp ';
Alert(parent.doc ument. getElementsByTagName ('h1 ') [0]. firstChild. data );
Script

Summary:
• 1 Tests passed IE6, IE7, IE8, Firefox2.0, Firefox3.0, Firefox3.6, Chrome8, Opera11, Safari5.
• 2 obtain the document. getElementById ('Id name'). contentDocument is equal to window. frames ["iframe name" ].doc ument.
• 3 when cross-subdomain, add document. domain = 'xxx. com' to the parent page and subpage JS respectively ';
Cross-origin iframe content
When the domain where two webpages are located is different, to call each other, you can only communicate with each other by changing the hash attribute value of the location object in JS.
Parent page:

The Code is as follows:

Script
Function sendRequest (){
Document. getElementById ('test-iframe'). src + = '# ';
}
Var interval = window. setInterval (function (){
If (location. hash ){
Alert (location. hash );
Window. clearInterval (interval );
}
},1000 );
Script

Subpage:

The Code is as follows:

RRRRRR
Script
Var url = 'HTTP: // www.xxx.com/father.html ';
OldHash = self. location. hash,
NewHash,
Interval = window. setInterval (function (){
NewHash = self. location. hash;
If (oldHash! = Self. location. hash ){
Document. getElementsByTagName ('h1 ') [0]. innerHTML = 'pp ';
// Alert (parent. location. href); // if this annotation is removed, the browser prompts that the user has no permission.
Parent. location. href = url + '# B ';
Window. clearInterval (interval );
}
},500 );
Script

Summary:
• 1 IE6, IE7, IE8, Firefox2.0, Firefox3.0, Firefox3.6, Chrome8, Opera11, Safari5, and record all hash changes except IE6 and IE7 in the browser's 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, so that theoretically the browser would not record the history, but it would not work.
• 2 subpages do not have permission to read the url of the parent page, but can write the url of the parent page. Therefore, you must know the url of the parent page in advance during cross-origin operations.
Because the front-end has many limitations in solving cross-origin problems, it is best to use a server-side solution.