JS操作iframe元素

来源:博客园 分类: 文章浏览史 发布时间:2020-11-28 18:07:50 最后更新:2020-11-28 浏览:145
转载声明:
本文为摘录自“博客园”,版权归原作者所有。
温馨提示:
为了更好的体验,请点击原文链接进行浏览
摘录时间:
2020-11-28 18:07:50

参考链接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>
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

 

注意:

  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 <!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
php技术微信