1tmk 发表于 2022-12-8 23:26:53

iframe根据子页面自动调整大小，附完整代码

突然用到了iframe代码，需要根据子页面自动调整父页面的iframe高度和宽度，找了好多代码都没实现，终于找到了一个可以实现的代码，不敢私藏，拿来分享下，亲测有效。


测试条件：子页面全页面自适应，父页面调用iframe后克根据父页面位置自动调整显示大小。


代码如下：
js部分：
//定义变量，存储iframe的ID列表
var iframeids=["pframe"];
//判断浏览器是否支持iframe,yes支持,no则不支持
var iframehide="yes";

function dyniframesize()
{
    var dyniframe=new Array();
   
    for(var i=0;i<iframeids.length;i++)
    {
      if(document.getElementById)
      {
            //自动调整iframe高度
            dyniframe=document.getElementById(iframeids);
            if(dyniframe && !window.opera)
            {
                dyniframe.style.display="block";
                if(dyniframe.contentDocument && dyniframe.contentDocument.body.offsetHeight) //如果用户的浏览器是NetScape
                  dyniframe.height=dyniframe.contentDocument.body.offsetHeight;
                else if(dyniframe.Document && dyniframe.Document.body.scrollHeight)//如果用户的浏览器是IE
                  dyniframe.height=dyniframe.Document.body.scrollHeight;
            }
      }
      //根据设定的参数来处理不支持iframe的浏览器的显示问题
      if((document.all || document.getElementById) && iframehide=="no")
      {
            var tempobj=document.all? document.all] : document.getElementById(iframeids);
            tempobj.style.display="block" ;
      }
    }
}

if (window.addEventListener)
window.addEventListener("load", dyniframesize, false)
else if (window.attachEvent)
window.attachEvent("onload", dyniframesize)
else
window.onload=dyniframesize


html部分：
<iframe id="pframe" name="pframe" scrolling="no" src="notebook/index.asp" frameborder="0"width="660"> </iframe>

_ci 发表于 2022-12-8 23:26:53

我是个凑数的。。。

64_9q 发表于 2022-12-8 23:28:56

小白一个 顶一下

244b26 发表于 2022-12-8 23:35:25

这么强,支持楼主，佩服

ujy28 发表于 2022-12-8 23:41:10

LZ帖子不给力，勉强给回复下吧

4cg_r 发表于 2022-12-8 23:43:37

高手云集 果断围观

rzz 发表于 2022-12-8 23:46:00

锄禾日当午，发帖真辛苦。谁知坛中餐，帖帖皆辛苦！

v0vm 发表于 2022-12-8 23:53:06

无论是不是沙发都得回复下

781vn2 发表于 2022-12-8 23:54:50

元芳你怎么看？

f4dsmm 发表于 2022-12-8 23:57:47

打酱油的人拉，回复下赚取积分
页: [1] 2
查看完整版本: iframe根据子页面自动调整大小，附完整代码