WZBLOG-惜梦博客-专注web编程的个人博客 WZBLOG-惜梦博客-专注web编程的个人博客

动态的改变IFrame的高度实现IFrame自动伸展适应高度

in HTML5/JavaScript read (366) 文章转载请注明来源!

具体实现一:

1、在IFrame的具体页面(就是子页面),添加JavaScript

window.onload = function(){
    var obj = parent.document.getElementById("childFrame");
    var Time_Status = undefined;

    obj.height = document.body.scrollHeight;

    document.body.onmousedown = function(){
        if (Time_Status !== undefined) return ;
        Time_Status = setInterval(function(){
            obj.height = document.body.scrollHeight;
        },10);
    }

    document.body.onmouseup = function(){
        setTimeout(function(){
            clearInterval(Time_Status);
            Time_Status = undefined;
        },100);
    }
}

2、为父页面的IFrame标签添加ID,即上面第一步,方法体中的第2行所写到的childFrame

<IFRAME border=0 marginWidth=0 frameSpacing=0 marginHeight=0 src="frame1.php" frameBorder=0 noResize scrolling="no" width=100% height=100% vspale="0" id="childFrame"></IFRAME>

本文基于《署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)》许可协议授权
文章链接:https://blog.wz52.cn/archives/14.html (转载时请注明本文出处及文章链接)

iframe
发表新评论
PREVIOUS NEXT
雷姆
拉姆