Home > Developer > JavaScript
This article will focus on discussing the dom in the iframe for JS cross-origin access operations. Many people have always had an idea 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.
Javascript cross-origin access operation dom in iframe
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 name: srcPage.html ).
◆IPage.html, dom in <body>:
- <iframeidiframeid=“iId“name=“iName“
- src=“srcPage.html“scrolling=“no“frameborder=“0“>
- </iframe>
Using srcpage.html, <body> In dom:
- <H1> sister's day
- <P> breakfast in the morning, lunch appointment, and Karaoke in the afternoon </p>
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"].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 am not clear about this. I just habitually add window. onload and output it. Note: JS Code is written into this event.) can anyone who knows this 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"].document.
- getElementsByTagName(‘h1‘)[0].firstChild.data);
- });
2. Another method of IE is contentWindow to get it. Code:
- window.onload=(function(){
- variObj=document.getElementById(‘iId‘).contentWindow;
- alert(iObj.document.
- getElementsByTagName(‘h1‘)[0].firstChild.data);
- });
This method has passed IE6, IE7, firefox2.0, and firefox3.0 tests. Good thing! Hey. Check the network and find the MozillaFirefoxiframe. 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 become 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:
- VariObj = document. getElementById ('iid'). contentDocument;
- Alert (iObj. getElementsByTagName ('h1 ') [0].
- InnerHTML = 'I want to become 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.
Can I operate iframe at will? If you still feel uncomfortable, you can even rewrite the content in iframe.
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
