标签：meta   完成   特定   调整   判断   inpu   页面   无效   定义   

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

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

Frame 对象

Frame 对象代表一个 HTML 框架。

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

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

IFrame 对象

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

在 HTML 文档中

Frame/IFrame 对象属性

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 
 2 
 3 4         "UTF-8">
 5          6     
 7     
 8          
 9         "button" name="btn1" id="btn1" value="点击按钮控制iframe页面" />
10         
11         
12         23          
24          
25     
26 

View Code

 1 
 2 
 3      4         "UTF-8">
 5          6     
 7     
 8         父级页面要改变我的颜色
 9     
10 

View Code

注意：

1. 谷歌浏览器对iframe要在服务器环境下执行。
2. 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 
 2 
 3      4         "UTF-8">
 5          6     
 7     
 8          
 9         
有本事你改我的颜色啊！
10         
11          
12          
13          
14     
15 

View Code

 1 
 2 
 3      4         "UTF-8">
 5          6     
 7     
 8         "button" name="btn2" id="btn2" value="点击按钮控制demo2.html页面" />
 9         19     
20 

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 
 2 
 3      4         "UTF-8">
 5          6     
 7     
 8         
动态加载iframe
 9         "button" name="btn3" id="btn3" value="点击创建iframe" />
10         38          
39          
40     
41 

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元素

标签：meta   完成   特定   调整   判断   inpu   页面   无效   定义   

原文地址：https://www.cnblogs.com/kongbursi-2292702937/p/12113101.html