Many people have always had an idea. It would be nice to operate iframe as they wish. In this way, static pages have the include and require implementation equivalent to dynamic pages in the backend, such as php, jsp, and asp.Uniform multi-page layoutCapabilities.
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 of which is the page where iframe is located (Page name: iPage.html), The other page is that the iframe property src points to the page (Page name: srcPage.html).
IPage.html, dom in <body>:
SrcPage.html, dom in <body>:
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:Ipage.html outputs h1 content in srcpage.html. JS is as follows:
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:
2. Another method of ie is contentWindow to get it. Code:
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:
Access the nodes through contentWindow is the same as before.
Ii. Access the content in iframe in firefoxMozilla supports using IFrameElmRef. contentDocument to access the W3C standard of iframe document objects. You can use the following standard to write less document:
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 iframeYou can rewrite the content in iframe through designMode (set the document to editable design mode) and contentEditable (set the content to editable. Code:
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 heightWith 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:
// JavaScript Document
// ** Iframe automatically adapts to the page **//
// Enter the list of iframe names that you want to automatically adjust the height based on the page height
// Use commas (,) to separate the IDs of each iframe. For example, ["myframe1", "myframe2"] can have only one form.
// Define the iframe ID
Var iframeids = ["main"]
// If your browser does not support iframe, whether to hide iframe: yes, no
Var iframehide = "yes"
Function dyniframesize ()
{
Var dyniframe = new Array ()
For (I = 0; I <iframeids. length; I ++)
{
If (document. getElementById)
{
// Automatically adjust the iframe height
Dyniframe [dyniframe. length] = document. getElementById (iframeids [I]);
If (dyniframe [I] &! Window. opera)
{
Dyniframe [I]. style. display = "block"
If (dyniframe [I]. contentDocument & dyniframe [I]. contentDocument. body. offsetHeight) // if your browser is NetScape
Dyniframe [I]. height = dyniframe [I]. contentDocument. body. offsetHeight;
Else if (dyniframe [I]. Document & dyniframe [I]. Document. body. scrollHeight) // if your browser is IE
Dyniframe [I]. height = dyniframe [I]. Document. body. scrollHeight;
}
}
// Display the browser that does not support iframe Based on the set parameters
If (document. all | document. getElementById) & iframehide = "no ")
{
Var tempobj = document. all? Document. all [iframeids [I]: document. getElementById (iframeids [I])
Tempobj. style. display = "block"
}
}
}
If (window. addEventListener)
Window. addEventListener ("load", dyniframesize, false)
Else if (window. attachEvent)
Window. attachEvent ("onload", dyniframesize)
Else
Window. onload = dyniframesize
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
