JS cross-origin access operation iframe

Many people have always had an idea. It would be nice to operate iframe as they wish. In this way, static pages have the ability to include and require dynamic pages in php, jsp, and asp to achieve unified multi-page layout. With the help of Javascript, We can dynamically load... SyntaxHighlighter like in the background.

Many people have always had an idea. It would be nice to operate iframe as they wish. In this way, static pages have the ability to include and require dynamic pages in php, jsp, and asp to achieve unified multi-page layout.

With the help of Javascript, We can dynamically load the html page content directed to by the src object attribute of the iframe object like the background. This operation requires two pages, one is the page where iframe is located (the Page name is iPage.html), and the other is the iframe property src pointing to the page (the Page name is srcPage.html ).

IPage.html,In dom:

SrcPage.html,In dom:

Sister's day

Breakfast in the morning, lunch appointment, Karaoke in the afternoon

Next we will discuss how JS operates the above two pages in ie, discuss firefox's practices, and finally provide methods for operating iframe objects compatible with ie and firefox.

I. Content in iframe for Internet Explorer access operations
 

As we all know, iframe is a non-standard html Tag. It is a multi-layout tag launched by IE browser, and Mozilla also supports this tag. (Gossip, hey)

1. ie obtains it through document. frames ["IframeName"]. For example, we output h1 content in srcpage.html in ipage.html. JS is as follows:

Alert (document. frames ["iName" 2.16.doc ument. getElementsByTagName ('h1 ') [0]. firstChild. data );
You will find that adding code to the page does not seem to output the desired stuff. Why? I am not clear about this. I just habitually add window. onload and output (Note: JS Code is written into this event). Anyone who knows can tell me. Why? After the changes, the Code ie has output, and document. frames in firefox does not have a defined error message:

Window. onload = (function (){
Alert (document. frames ["iName" 2.16.doc ument. getElementsByTagName ('h1 ') [0]. firstChild. data );
});
2. Another method of ie is contentWindow to get it. Code:

Window. onload = (function (){
Var iObj = document. getElementById ('iid'). contentWindow;
Alert(iObj.doc ument. getElementsByTagName ('h1 ') [0]. firstChild. data );
});
This method has passed ie6, ie7, firefox2.0, and firefox3.0 tests. Good thing! Hey. (Check on the Internet and find the Mozilla Firefox iframe. contentWindow. focus buffer overflow vulnerability, which may cause script injection attacks.

Later, I heard that such a thing can be prevented in the background, so I am relieved. However, we still hope that the new version of firefox can solve this risk .)

3.modify the content of the h1 title in srcpage.html. Code:

IObj.doc ument. getElementsByTagName ('h1 ') [0]. innerHTML =' I want to be part of her Day ';
Access the nodes through contentWindow is the same as before.

Ii. Access the content in iframe in firefox
Mozilla supports using IFrameElmRef. contentDocument to access the W3C standard of iframe document objects. You can use the following standard to write less document:

Var iObj = document. getElementById ('iid'). contentDocument;
Alert (iObj. getElementsByTagName ('h1 ') [0]. innerHTML =' I want to be part of her Day ');
Alert (iObj. getElementsByTagName ('P') [0]. firstChild. data );
The method compatible with the two browsers is now available, that is, the contentWindow method.

Hey! Can I operate iframe at will? If you still feel uncomfortable, you can even rewrite the content in iframe.

3. Rewrite the content in iframe
You can rewrite the content in iframe through designMode (set the document to editable design mode) and contentEditable (set the content to editable. Code:

Var iObj = document. getElementById ('iid'). contentWindow;
IObj.doc ument. designMode = 'on ';
IObj.doc ument. contentEditable = true;
IObj.doc ument. open ();
IObj.doc ument. writeln ('');
IObj.doc ument. writeln ('');
IObj.doc ument. writeln ('');
IObj.doc ument. close ();
For information on these two objects, see: http://msdn.microsoft.com/en-us/library/ms533720 (VS.85). aspx

Firebug tests the above Code Performance

 

Comment out iObj.doc ument. designMode = 'on ';

IObj.doc ument. contentEditable = true;

 

The effect has not changed, and the time efficiency is nearly three times before the annotation. Hey. The two objects refer to the writing of some people on the network and rewrite the content in iframe. In fact, there is no need to use designMode and contentEditable unless there are other requirements.

Iv. iframe adaptive height
With the above principle, it is quite simple to implement this, that is, to set the height value of iframe to the height value of the document in it. Code:

Window. onload = (function (){
Var iObj = document. getElementById ('iid ');
IObj. height = iobj.content?document.doc umentElement. scrollHeight;
});
Now you have a new understanding of JS iframe operations. Maybe there will be some new web technical terms that day!