Iframe DOM方式自适应

最新推荐文章于 2024-03-07 11:29:39 发布

webwalker

最新推荐文章于 2024-03-07 11:29:39 发布

阅读量1.6k

点赞数

分类专栏： Web 文章标签： iframe generator html function div button

本文链接：https://blog.csdn.net/webwalker/article/details/3440354

版权

Web 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

控制IFRAME在加载时自适应宽度、高度，两行代码就可以搞定了，今天遇到了这样一个问题：

1、IFRAME页面中部分内容为DOM方式动态填充，填充页面后，IFRAME部分内容被遮住。

2、尝试parent.document.getElementById('MainFrameId');的方式来控制IFRAME宽度、高度，无果

尝试重写了两个静态的HTML代码，成功，放到IIS目录访问，亦然成功

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
     <HEAD>
      <TITLE> New Document </TITLE>
      <META NAME="Generator" CONTENT="EditPlus">
      <META NAME="Author" CONTENT="">
      <META NAME="Keywords" CONTENT="">
      <META NAME="Description" CONTENT="">
     </HEAD>
     <BODY>
     <div id="div" style="background-color:green">
    <iframe id="pframe" src="iframe.html" scrolling="no" ></iframe>
    <br><br><br><br><br><br><br><br><br><br>
    00fdsdsfsdfsdfsdfsdfd
    <div>
    <script>
    //document.getElementById('pframe').style.height=1000;
    </script>
     </BODY>
    </HTML>

Iframe.html

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
     <HEAD>
      <TITLE> New Document </TITLE>
      <META NAME="Generator" CONTENT="EditPlus">
      <META NAME="Author" CONTENT="">
      <META NAME="Keywords" CONTENT="">
      <META NAME="Description" CONTENT="">
     </HEAD>
     <BODY>
     <script>
     function Set()
     {
        var obj = parent.document.getElementById('pframe');
    //  obj.style.height=1000;
    //  return;
            if( obj != null ){
                obj.style.height = document.body.scrollHeight + 20;
                obj.style.width =document.body.scrollWidth;
            }
    //      alert(document.body.scrollHeight + "," + document.documentElement.scrollHeight);
     }
      </script>
      fsdf
      <br>  <br>  <br>  <br>  <br>  <br>  <br>  <br>  <br>  <br>  <br>  <br>  <br>  <br>  <br>  <br>  <br>  <br>  <br>  <br>  <br>  <br>  <br>  <br>
      <input type=button value="地方地方" οnclick="Set();">
     </BODY>
    </HTML>

3、尝试IFRAME调用父窗体方法后，成功

4、尝试采用框架集的方式设定当前IFRAME的样式，成功

//2011-10-12 最新的自适应可供参考，可在页面加载完成时自动调用，也可由被嵌页面调用，前提是不要跨域。

如果存在跨域问题，则需要通过内嵌页面中增加代理页（该代理页为父窗体同一个APP）

//auto height
function setAutoWH() {
    try {
        var name = "iframeTip";
        var iframe = document.getElementById(name);

        if (iframe.contentDocument) {
            document.getElementById('divTip').style.left = (parseInt(window.screen.availWidth) - parseInt(iframe.width)) / 2 + 'px';
            iframe.height = iframe.contentDocument.height; iframe.width = iframe.contentDocument.height <= 200 ? 570 : 330; $f("divTip").style.height = iframe.height + "px"; $f("divTip").style.width = iframe.width + "px"; $f("divMask").style.height = document.body.scrollHeight + "px";
        }
        else { document.getElementById('divTip').style.left = (parseInt(window.screen.availWidth) - parseInt(iframe.scrollWidth)) / 2 + 'px'; iframe.style.height = document.frames[name].document.body.scrollHeight; iframe.style.width = document.frames[name].document.body.scrollWidth; $f("divTip").style.height = iframe.style.height; $f("divTip").style.width = iframe.style.width; }
    } catch (e) { }
}
function setAutoHeight(name) {
    try {
        var iframe;
        if (!name) name = "MainFrmTd";
        iframe = document.getElementById(name);
        if (iframe.contentDocument) {
            var h1 = 0, h2 = 0, d = iframe.contentDocument, dd = d.documentElement;
            iframe.style.height = "10px";
            if (dd && dd.scrollHeight) h1 = dd.scrollHeight;
            if (d.body) h2 = d.body.scrollHeight;

            var h = Math.max(d.documentElement["clientHeight"], d.body["scrollHeight"], d.documentElement["scrollHeight"], d.body["offsetHeight"], d.documentElement["offsetHeight"])
            //var h = Math.max(h1, h2);
            if (document.all) h += 4;
            if (window.opera) h += 1;
            iframe.style.height = h + 5 + "px";
        }
        else {
            var d = document.frames[name].document;
//            var h = Math.max(d.documentElement["clientHeight"], d.body["scrollHeight"], d.documentElement["scrollHeight"], d.body["offsetHeight"], d.documentElement["offsetHeight"]);
            var h = Math.max(d.body["scrollHeight"], d.documentElement["scrollHeight"], d.body["offsetHeight"]);
            iframe.style.height = h + 5 + "px";
        }
    }
    catch (e) { }
}