JS操作iframe元素

Posted 2020-11-26 哟吼！

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS操作iframe元素相关的知识，希望对你有一定的参考价值。

参考链接1：https://www.cnblogs.com/html55/p/10163631.html

参考链接2：https://www.runoob.com/jsref/dom-obj-frame.html

Frame 对象

Frame 对象代表一个 HTML 框架。

<frame>标签定义了在框架中一个特定的窗口（框架）。

在 HTML 文档中 <frame> 每出现一次，就会创建一个 Frame对象。

IFrame 对象

IFrame 对象代表一个 HTML 的内联框架。

在 HTML 文档中 <iframe> 每出现一次，一个 IFrame 对象就会被创建。

Frame/IFrame 对象属性

属性	描述	W3C
align	根据周围的文字排列 iframe。	Yes
contentDocument	容纳框架的内容的文档。返回 frame/iframe 生成的文档对象。	Yes
contentWindow	返回 frame/iframe 生成的 window 对象。	No
frameBorder	设置或返回是否显示框架周围的边框。	Yes
height	设置或返回 iframe 的高度。	Yes
longDesc	设置或返回指向包含框架内容描述文档的 URL。	Yes
marginHeight	设置或返回 iframe 的顶部和底部的页空白。	Yes
marginWidth	设置或返回 frame/iframe 的左侧和右侧的页空白。	Yes
name	设置或返回 frame/iframe 的名称。	Yes
noResize	设置或返回框架是否可调整大小。	Yes
scrolling	设置或返回框架是否可拥有滚动条。	Yes
src	设置或返回应被加载到框架中的文档的 URL。	Yes
width	设置或返回 iframe 的宽度。	Yes

onload 事件在frame或者iframe载入完成后被触发。

实例：

1. demo1.html页面中有个iframe元素，iframe元素的src是iframe1.html，怎么在demo1.html页面中操作iframe1.html页面

答曰：demo1.html中，js先找到iframe元素（比如命名为：oIframe），那么oIframe.contentWindow就是iframe1.html这个页面的window，剩下了就是DOM操作的事情了。

举例：要求：demo1.html页面中有个按钮，点击按钮，iframe1页面某些文字改变颜色

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>我是demo1.html</title>
 6     </head>
 7     <body>
 8          
 9         <input type="button" name="btn1" id="btn1" value="点击按钮控制iframe页面" />
10         <br />
11         <iframe id="iframe1" src="iframe1.html" width="300" height="200"></iframe>
12         <script>
13             window.onload = function(){
14                 var oBtn1   = document.getElementById(\'btn1\');
15                 //获取iframe元素,oIframe.contentWindow就是iframe1.html页面的window对象
16                 var oIframe = document.getElementById(\'iframe1\');
17                 oBtn1.onclick = function() {
18                     //demo1.html页面中的js控制了iframe1.html页面的字体颜色
19                     oIframe.contentWindow.document.body.style.color = \'red\';
20                 }
21             }
22         </script>
23          
24          
25     </body>
26 </html>

View Code

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>我是iframe1.html</title>
 6     </head>
 7     <body>
 8         父级页面要改变我的颜色
 9     </body>
10 </html>

View Code

注意：

谷歌浏览器对iframe要在服务器环境下执行。
oIframe.contentWindow.document可以简写为oIframe.contentDocument，但是前者所有浏览器都支持，后者IE6、IE7不支持

2. demo2.html页面中有个iframe，地址是iframe2.html，怎么在iframe2.html页面中操作demo2.html页面中的元素

答曰：iframe2.html页面的js中，window.parent就是demo2.html这个页面的window，剩下的也就是具体怎么DOM操作的事情了

举例：iframe2.html页面中的按钮，点击一次，demo2.html页面中某些文字变颜色

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>我是demo2.html</title>
 6     </head>
 7     <body>
 8          
 9         <div>有本事你改我的颜色啊！</div>
10         <iframe id="iframe2" src="iframe2.html" width="300" height="200"></iframe>
11          
12          
13          
14     </body>
15 </html>

View Code

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>我是iframe2.html</title>
 6     </head>
 7     <body>
 8         <input type="button" name="btn2" id="btn2" value="点击按钮控制demo2.html页面" />
 9         <script>
10             window.onload = function(){
11                 var oBtn2   = document.getElementById(\'btn2\');
12                 oBtn2.onclick = function() {
13                     //demo1.html页面中的js控制了iframe1.html页面的字体颜色
14                     var oDiv = window.parent.document.body.children[0]; 
15                     oDiv.style.color = \'red\';
16                 }
17             }
18         </script>
19     </body>
20 </html>

View Code

注意：这里iframe2.html页面中，window.parent就是他的父级的window，如果是demo2.html中iframe的src是demo3.html，demo3.html里iframe是iframe2.html呢？就是多层嵌套，怎么找到最顶层的页面window对象呢？答曰：window.top即可！

3. 上面的案例中，都是demo页面中固定好了的iframe，如果要动态加载iframe，该怎么用呢？

答：和其他元素标签的DOM操作一样，document.createElement即可。

举例：要求demo3.html中，点击按钮，动态生成并加载iframe2.html（iframe2.html代码就不用贴了，在上面案例中有）

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>我是demo3.html</title>
 6     </head>
 7     <body>
 8         <h1>动态加载iframe</h1>
 9         <input type="button" name="btn3" id="btn3" value="点击创建iframe" />
10         <script>
11             window.onload = function(){
12                 var oBtn3   = document.getElementById(\'btn3\');
13                 oBtn3.onclick = function() {
14                      
15                     var oIframe = document.createElement(\'iframe\');
16                     oIframe.src = \'iframe2.html?t=798\';
17                     document.body.appendChild(oIframe);
18                      
19                     //oIframe就是指在demo3.html这个页面中的iframe标签所代表的DOM元素
20                     //oIframe.contentWindow是iframe2.html这个页面的window对象
21                      
22                      
23                     //别人说，IE下只能用oIframe.attachEvent(\'onload\',function(){...}) 我试了下，IE下也可以用下面的
24                     oIframe.onload = function(){
25                         alert(888);
26                     };
27                      
28                     //如果iframe页面js中有window.onload，oIframe.contentWindow.onload是无效的（IE6-8下还是有效的），如果没有，则可以。当然尽量别用这么乱
29                     oIframe.contentWindow.onload = function(){
30                         alert(999);
31                     }
32                      
33                      
34  
35                 }
36             }
37         </script>
38          
39          
40     </body>
41 </html>

View Code

4. 案例，如何防止自己页面被其他人嵌套在iframe里？

答曰：在自己页面，用window.top != window进行判断，如果确实不等，说明被嵌套，则赋值window.top.location.href值。核心代码如下：

1 if(window.top != window){
2     window.top.location.href = window.location.href;
3 }

View Code

以上是关于JS操作iframe元素的主要内容，如果未能解决你的问题，请参考以下文章

html里面，点击按钮时，怎么使用js或jq给iframe里面的表单赋值和提交

js 怎么在父页面控制iframe中的元素