Use javascript to access and operate the dom in the iframe

Author：Eve Cole Update Time：2009-06-11 16:22:06

Many people have always had the idea that it would be great if they could operate iframes as they pleased. In this way, static pages have the ability to implement unified multi-page layout equivalent to include and require in background dynamic pages php, jsp, and asp.

With the help of Javascript, we can dynamically load the content of the html page pointed to by the iframe object attribute src like a background. Such an operation requires providing two pages, one page is the page where the iframe is located ( page name: iPage.html ), and the other page is the page pointed to by the iframe attribute src ( page name: srcPage.html ).

iPage.html, dom in <body>:

< iframe id = " iId " name = " iName " src = " srcPage.html " scrolling = “ no “ frameborder = " 0 " > </iframe> srcPage.html

,<body>in

dom : <h1> Sister 's Day </h1>
< p > Eat breakfast in the morning, have a date at noon, sing karaoke in the afternoon, and mess around with my brother in the evening </ p >

Let’s discuss how to operate the above two pages with JS under IE, and then discuss the method of firefox, and finally give the compatibility with IE and firefox The browser's method of operating the iframe object.

1. Access and operate the content in the iframe under IE

Everyone knows that iframe is a non-standard HTML tag. It is a multi-layout tag launched by the IE browser. Later, Mozilla also supported this tag. (Gossip, hehe)

1. IE obtains it through document.frames["IframeName"]. Example: We output the content of h1 in srcPage.html in iPage.html. The JS is as follows:

alert ( document . frames [ " iName " ] . document . getElementsByTagName ( ' h1 ' ) [ 0 ] . firstChild . data ) ;

You will find that adding code to the page does not seem to output the desired stuff. Why? I haven't figured this out yet. I just habitually add window.onload and the output will appear (Note: JS code is written into this event). Can anyone who knows about it tell me? Why? After the change, the code has output under IE, but document.frames is not defined under Firefox. Error message:

window . onload = ( function () {
alert ( document . frames [ " iName " ] . document . getElementsByTagName ( ' h1 ' )[ 0 ] . firstChild . data ) ;
}) ;

2. ie another way is contentWindow to get it, code:

window . onload = ( function () {
var iObj = document . getElementById ( ' iId ' ) . contentWindow ;
alert ( iObj . document . getElementsByTagName ( ' h1 ' ) [ 0 ] . firstChild . data ) ;
}) ;

This method has passed the tests of ie6, ie7, firefox2.0, and firefox3.0. Good thing! hey-hey. (After checking online, I found a buffer overflow vulnerability in Mozilla Firefox iframe.contentWindow.focus, which poses the risk of script injection attacks.

Later I heard that this could be prevented in the background, and I was relieved. However, I still hope that the new version of Firefox can solve it. Such danger.)

3. Change the h1 title content in srcPage.html, code:

iObj . document . getElementsByTagName ( ' h1 ' ) [ 0 ] . innerHTML = ' I want to be part of her day ' ;

access it through contentWindow The nodes are the same as before.

2. Access the content in an iframe under Firefox.

Mozilla supports the W3C standard for accessing the document object of an iframe through IFrameElmRef.contentDocument . Through the standard, you can write one less document, code:

var iObj = document . getElementById ( ' iId ' ) . contentDocument ;
alert ( iObj . getElementsByTagName ( ' h1 ' )[ 0 ] . innerHTML = ' I want to be a part of her day ' ) ;
alert ( iObj . getElementsByTagName ( ' p ' )[ 0 ] . firstChild . data ) ;

A method compatible with these two browsers is now available, which is to use the contentWindow method.

hey-hey! Can I operate the iframe as I wish? If you still feel uncomfortable, you can even rewrite the content in the iframe.

3. Rewrite the content in the iframe.

Through designMode (setting the document to editable design mode) and contentEditable (setting the content to editable), you can rewrite the content in the iframe. Code:

var iObj = document . getElementById ( ' iId ' ) . contentWindow ;
iObj . document . designMode = ' On ' ;
iObj . document . contentEditable = true ;
iObj . document . open () ;
iObj . document . writeln ( ' <html>< head> ' ) ;
iObj . document . writeln ( ' <style>body {background:#000;font-size:9pt;margin: 2px; padding: 0px;}</style> ' ) ;
iObj . document . writeln ( ' </head><body></body></html> ' ) ;
iObj . document . close () ;

For information on these two objects, please refer to: http://msdn.microsoft.com/en-us/ library/ms533720(VS.85).aspx

firebug tests the performance of the above code, as shown in the figure

Comment out iObj.document.designMode = 'On';

iObj.document.contentEditable = true;

as shown:

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

4. iframe adaptive height

With the above principles, it is quite simple to implement this, just set the height value of the iframe to the height value of the document inside it. Code:

window . onload = ( function () {
var iObj = document . getElementById ( ' iId ' ) ;
iObj . height = iObj . contentWindow . document . documentElement . scrollHeight ;
}) ;

Now you have a new understanding of how to operate iframe with JS. Maybe there will be something new that day because of this Web technical term, hey, stinky!

Reference materials:

https://developer.mozilla.org/cn/Migrate_apps_from_Internet_Explorer_to_Mozilla

http://msdn.microsoft.com/en-us/library/ms533690(VS.85).aspx

http://www.kuqin.com/ webpagedesign/20080516/8536.html

http://www.nohack.cn/jsj/safe/2006-10-05/8156.html