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

最新推荐文章于 2020-10-13 23:53:11 发布

kongjiea

最新推荐文章于 2020-10-13 23:53:11 发布

阅读量6.5w

点赞数 2

分类专栏： javascript

本文链接：https://blog.csdn.net/kongjiea/article/details/38870399

版权

javascript 专栏收录该内容

87 篇文章

订阅专栏

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

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

js写法

a、同过contentWindow获取

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

获取方法

var frameWin=document.getElementById('iframe').contentWindow;    //window对象
var frameDoc=document.getElementById('iframeId').contentWindow.document  //document对象
var frameBody=document.getElementById('iframeId').contentWindow.document.body   //body对象

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

b、通过frames[]数组获取

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

document.getElementById('iframId').οnlοad=function(){
    var html= window.frames["name属性"].document.getElementById('iframe中的元素的id').innerHTML;
    alert(html)
}
 如果要获取iframe中的iframe
document.getElementById('iframId').οnlοad=function(){
    var html= window.frames["name属性"].frames["name属性"].document.getElementById('iframe中的元素的id').innerHTML;
    alert(html)
}

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

a、$("#iframe的ID").contents().find("#iframe中的控件ID").click();//jquery 方法1 必须在iframe加载完后才有效
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

var obj=window.parent.document.getElementById('objId')

window.top 方法可以获取父级的父级的....最顶层的元素对象

jq写法：

$('#父级窗口的objId', window.parent.document).css('height':'height);  // window可省略不写
或者
$(window.parent.document).find("#objId").css('height':'height);   // window可省略不写

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

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

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

a、 用contentWindow方法 
document.getElementById('iframe1').οnlοad=function(){
         this.contentWindow.run();
 }
b、用iframes[]框架集数组方法
document.getElementById('iframe1').οnlοad=function(){
         frames["iframe1"].run();
}

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

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

window.parent.attributeName;  // 访问属性attributeName是在父级窗口的属性名
window.parent.Func();  // 访问属性Func()是在父级窗口的方法

5、让iframe自适应高度

$('#iframeId').load(function() { //方法1
    var iframeHeight = Math.min(iframe.contentWindow.window.document.documentElement.scrollHeight, iframe.contentWindow.window.document.body.scrollHeight);
    var h=$(this).contents().height();
    $(this).height(h+'px'); 
});

$('#iframeId').load(function() { //方法2
    var iframeHeight=$(this).contents().height();
    $(this).height(iframeHeight+'px'); 
});