参考链接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 的内联框架。
<iframe> 标签定义了包含另外一个文档的内联框架。
在 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>
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>
注意：
- 谷歌浏览器对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>
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>
注意：这里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>
4. 案例，如何防止自己页面被其他人嵌套在iframe里？
答曰：在自己页面，用window.top != window进行判断，如果确实不等，说明被嵌套，则赋值window.top.location.href值。核心代码如下：
1 if(window.top != window){ 2 window.top.location.href = window.location.href; 3 }