iframe操作笔记

iframe元素属性介绍：

align  ： left | right | top | middle | bottom

frameborder ： 0 | 1          规定显示框架周围的边框

width， height                  定义iframe的宽度和高度

marginWidth， marginHeight     定义iframe的边距

scrolling  ：   yes  | no  | auto            是否显示滚动条

src :  规定iframe中显示文档的url

longdesc ： 规定一个页面，该页面包含了有关 iframe 的较长描述

 

 

javascript操作iframe中的元素

可以使用oIframe.contentWindow来获取iframe下的window对象

1 2 3 4 5 6 7 8 9 10 11 12

//获取iframe var oIframe = document . getElementsByTagName ( 'iframe' ) [ 0 ] ;   //获取iframe中的元素 var oText = oIframe . contentWindow . document . getElementById ( 'text' ) ;   //改变iframe中元素的属性   oIframe . contentWindow . document . getElementById ( 'text' ) . style . color = 'red' ;   //需要注意，如果采用局部变量缓存节点再操作会报错，如下 oText . style . color = 'red' ;

需要注意的是此方法在chrome浏览器下需要在服务器环境下方可生效，其他浏览器均支持此方法

获取iframe下的document对象可以使用oIframe.contentDocument方法，但是在IE6， 7下不支持此方法

 

如何在iframe中操作iframe外面的元素呢？

可以通过window.parent来获取iframe父级的window对象

1 2 3 4 5 6 7

//获取iframe父级下的元素 var oText = window . parent . document . getElementById ( 'text' ) ;   //如果是iframe多层嵌套，可以使用window.top来获取最外层的window对象，如 var oText = window . top . document . getElementById ( 'text' ) ;   //需要注意此方法在chrome下需要服务器环境方可生效

 

iframe下的onload事件

iframe加载完成后有一个onload事件，如

1 2 3 4 5 6 7 8 9 10 11 12 13

var oIframe = document . createElement ( 'iframe' ) ; oIframe . src = 'http://www.rankbill.com' ;   document . body . appendChild ( oIframe ) ;   oIframe . onload = function ( ) {      console . log ( 'OK' ) ; }   //在IE下iframe的onload事件只能用绑定形式添加 oIframe . attachEvent ( 'onload' , function ( ) {      console . log ( 'IE OK' ) ; } ) ;

 

如何防止网站被钓鱼

有很多不法分子利用iframe来嵌套网站欺骗用户，那如何防止网站被不法分子利用呢？

1 2 3 4

//防止网站被钓鱼，加个判断即可 if ( window != window . top ) {      window . top . location . href = window . location . href ; }

 

 

转载请注明： 蓝克比尔 » javascript操作iframe详解

转载于:https://www.cnblogs.com/l-woniu/p/3517080.html