js获取iframe和父级之间元素,方法、属,获取iframe的高度自适应iframe高度

1、在父页面 获取iframe子页面的元素

(在同域的情况下 且在http://下测试,且最好在iframe onload加载完毕后 dosomething...)

js写法

a、同过contentWindow获取

也有用contentDocument 获取的 但是contentWindow 兼容各个浏览器,可取得子窗口的 window 对象。
contentDocument Firefox 支持,> ie8 的ie支持。可取得子窗口的 document 对象。

获取方法

[html]  view plain  copy
  1. var frameWin=document.getElementById('iframe').contentWindow;    //window对象  
  2. var frameDoc=document.getElementById('iframeId').contentWindow.document  //document对象  
  3. var frameBody=document.getElementById('iframeId').contentWindow.document.body   //body对象  

还有iframe.contentDocument 方法 //但是ie 6,7不支持



b、通过frames[]数组获取

(但是必须在ifram框架加载完毕后获取,iframe1是iframe的name属性)

[html]  view plain  copy
  1. document.getElementById('iframId').onload=function(){  
  2.     var htmlwindow.frames["name属性"].document.getElementById('iframe中的元素的id').innerHTML;  
  3.     alert(html)  
  4. }  
  5.  如果要获取iframe中的iframe  
  6. document.getElementById('iframId').onload=function(){  
  7.     var htmlwindow.frames["name属性"].frames["name属性"].document.getElementById('iframe中的元素的id').innerHTML;  
  8.     alert(html)  
  9. }  

jq写法:必须在iframe加载完毕以后才有效

[html]  view plain  copy
  1. a、$("#iframe的ID").contents().find("#iframe中的控件ID").click();//jquery 方法1 必须在iframe加载完后才有效  
  2. b、$("#iframe中的控件ID",document.frames("frame的name").document)//方法2 <span style="font-family: Arial, Helvetica, sans-serif;">必须在iframe加载完后才有效</span>  


=================================

2、在iframe中获取父级页面的id元素 

(在同域的情况下且在http://下测试,最好是 iframe记载完毕再dosomething)

js写法:

获取父级中的objid

[html]  view plain  copy
  1. var obj=window.parent.document.getElementById('objId')  
window.top 方法可以获取父级的父级的....最顶层的元素对象

jq写法:

[html]  view plain  copy
  1. $('#父级窗口的objId', window.parent.document).css('height':'height);  // window可省略不写  
  2. 或者  
  3. $(window.parent.document).find("#objId").css('height':'height);   // window可省略不写  
===================================

3、父级窗体访问iframe中的属性  

(经测试,在ie中最好用原生的onload事件,如果用jq的load把iframe加载完毕 有时候方法调用不到 多刷新才有效果)

[html]  view plain  copy
  1. a、 用contentWindow方法   
  2. document.getElementById('iframe1').onload=function(){  
  3.          this.contentWindow.run();  
  4.  }  
  5. b、用iframes[]框架集数组方法  
  6. document.getElementById('iframe1').onload=function(){  
  7.          frames["iframe1"].run();  
  8. }  

===================================

4、在iframe中访问父级窗体的方法和属性 //window 可以不写

[html]  view plain  copy
  1. window.parent.attributeName;  // 访问属性attributeName是在父级窗口的属性名  
  2. window.parent.Func();  // 访问属性Func()是在父级窗口的方法  

5、让iframe自适应高度

[html]  view plain  copy
  1. $('#iframeId').load(function() { //方法1  
  2.     var iframeHeight = Math.min(iframe.contentWindow.window.document.documentElement.scrollHeight, iframe.contentWindow.window.document.body.scrollHeight);  
  3.     var h=$(this).contents().height();  
  4.     $(this).height(h+'px');   
  5. });  
  6.   
  7. $('#iframeId').load(function() { //方法2  
  8.     var iframeHeight=$(this).contents().height();  
  9.     $(this).height(iframeHeight+'px');   
  10. });  

6、iframe的onload的事件,

主流浏览器都支持 iframe.οnlοad=function....
在ie下需要用attachEvent绑定事件

7、在iframe所引入的网址写入防钓鱼代码

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

8、获取iframe的高度

iframe.contentWindow.document.body.offsetHeight;

转自:https://blog.csdn.net/kongjiea/article/details/38870399

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值