js iframe

最新推荐文章于 2023-09-06 17:07:18 发布

原创最新推荐文章于 2023-09-06 17:07:18 发布 · 995 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#iframe

JavaScript 专栏收录该内容

74 篇文章

订阅专栏

本文介绍了一种方法来动态调整网页中IFrame元素的高度及其内部body元素的样式。通过JavaScript实现了IE和Firefox浏览器下的兼容性，使得IFrame能够自适应内容高度的变化，并设置其背景颜色和边框等样式。

//IE和FF下都可以：

//获取iframe中body元素及改变他的属性

document.getElementById("iframePContent").contentWindow.document.body.style.border = "none";

//第二个单词要大写

document.getElementById("iframePContent").contentWindow.document.body.style.backgroundColor = "#ffffff";

//从一个Iframe里找到另一个Iframe
function ChangeLineHeight() {
    if (document.all) { //IE中
        var iframePContent1 = document.parentWindow.parent.document.getElementById("iframePContent");
        iframePContent1.height = iframePContent1.contentWindow.document.body.scrollHeight;
        //使左侧的最外框的线随右侧的高度自适应
        document.parentWindow.parent.document.getElementById('DivAllLeft').style.height =    (document.parentWindow.parent.document.getElementById('DivAllRight').offsetHeight - 2) + "px";
    }
    else {
        var iframePContent1 = document.defaultView.parent.document.getElementById("iframePContent");
        iframePContent1.height = iframePContent1.contentWindow.document.body.scrollHeight;
        //使左侧的最外框的线随右侧的高度自适应
        document.defaultView.parent.document.getElementById('DivAllLeft').style.height = (document.defaultView.parent.document.getElementById('DivAllRight').offsetHeight - 2) + "px";
   }
}