精华内容
下载资源
问答
  • 2022-03-21 11:16:51

    解决iframe高度自适应

    原因

    iframe的高度不会随着页面高度的变化而变化,可能会导致页面显示不全,或者页面下方有空白的问题。

    第一种方法

    这个方式更适用于嵌套的页面,当嵌套多个iframe时,比如左侧有个侧边栏,右侧是个大的iframe,这个大的iframe又嵌套了一层:中间是iframe,但是右侧又有个侧边栏,这时候不想让iframe单独滑动(避免页面出现两个滚动条),而是想整个页面一起滑动时,用这个方法。

    html代码: 注意一定要写height=‘100%’ scrolling=‘no’ width='100%'
    否则iframe会自己滑动

     <div class=" iframe My-home embed-responsive embed-responsive-16by9" id="taskheight">
            <iframe class="embed-responsive-item" frameborder="0" height='100%' id="form-iframe" name="formIframe" scrolling="no" width='100%'></iframe>
     </div>
    

    js代码:

    try {
        var timer;
        $("#form-iframe").load(function () {
            if (timer) {
                clearInterval(timer);
            }
            //pre_height用于记录上次检查时body的高度
            //mainheight用于获取本次检查时body的高度,并赋予iframe的高度
            var mainheight, pre_height;
            var frame = $(this);
            timer = setInterval(function () {
                mainheight = $(document.body).height() + 10;
                if (mainheight != pre_height) {
                    pre_height = mainheight;
                    frame.height(Math.max(mainheight, 350));
                }
            }, 500);//每0.5秒检查一次
        });
    } catch (e) {
    }
    
    

    第二种方法

    这个方法更简单些,适用于左侧有个侧边栏,右侧是iframe,并且iframe可以自己滑动,只在页面高度变化时重新赋值即可。

    html代码:

    <div class="iframe My-home embed-responsive embed-responsive-16by9">
         <iframe class="embed-responsive-item" frameborder="0" id="form-iframe" src=""></iframe>
          <!--src是动态赋值的-->
    </div>
    

    js代码:

      //根据ID获取iframe对象
        var org = $("#form-iframe")
        org.onload = function () {
            //解决打开高度太高的页面后再打开高度较小页面滚动条不收缩
            org.style.height = '0px';
            var iDoc = org.contentDocument || org.document
            var height = calcPageHeight(iDoc)
            if (height < 850) {
                height = 850;
            }
            org.style(height, height + 'px')
        }
    

    两种方法我都用了,亲测好用!!!

    更多相关内容
  • iframe高度需要根据子页面的实际高度来进行调整,但是如果子页面不在同一域中怎么办?这时候脚本没有办法获取到子页面的高度,存在JavaScript跨域的问题
  • 主要介绍了iframe高度自适应及隐藏滚动条的实例详解的相关资料,希望通过本文能帮助到大家,需要的朋友可以参考下
  • iframe高度自适应

    2019-03-15 01:00:49
    NULL 博文链接:https://tianshi0253.iteye.com/blog/316987
  • domainA 中有一个页面index.html,通过iframe嵌套了domainB中的一个页面other.html由于other.html页面在iframe中显示,而且其页面内容会动态的增加或减少,现在需要去掉iframe的滚动条由于javascript同源策略的限制...
  • Iframe 高度自适应,js控制Iframe 高度自适应.docx
  • iframe高度自适应,获取自身高度,之后将高度作为参数传递,在窗口加载后执行就可以了
  • iframe高度自适应的解决方案 使用场景:通过Iframe来解决项目嵌套问题时会碰到iframe的高度自适应的问题; 正常情况下的iframe:会出现一个滚动条影响美观 情况1:不存在跨域情况时的解决方案 <iframe name=...

    iframe高度自适应的解决方案

    使用场景:通过Iframe来解决项目嵌套问题时会碰到iframe的高度自适应的问题;
    正常情况下的iframe:会出现一个滚动条影响美观
    在这里插入图片描述

    情况1:不存在跨域情况时的解决方案

     <iframe name="outerPage" onload="iframeload()" src="./test.html" name="myFrame" scrolling="auto" frameborder="0"
        id="outerPage" :style="{ 'min-width': '100%', 'min-height': '100%' }"></iframe>
        
      <script>
        function iframeload () {
          try {
            const cIframe = document.getElementById('outerPage')
            let aWindow = cIframe.contentWindow
            let aWindowHeight = aWindow.document.documentElement.scrollHeight
            cIframe.style.height = aWindowHeight + 'px'
          } catch (e) {
            //跨域获取不到
            throw new Error(e,'自定义错误setIframeHeight Error')
          }
        }
      </script>
    

    情况1:存在跨域情况时的解决方案

    //引入iframe的页面
    <iframe name="outerPage" src="http://localhost:9006/#/home/homePage" name="myFrame"
        scrolling="no" frameborder="0" id="outerPage" style="width:100%"></iframe>
    
      <script>
        window.addEventListener('message', (e) => {
          const cIframe = document.getElementById('outerPage')
          cIframe.style.height = e.data.text + 'px'
        })
      </script>
    
    //被引入的iframe页面:发送事件
    mounted() {
    	this.$nextTick(() => {
    	    // 等子页面渲染好了之后,获取高度
    	    setTimeout(() => {
    	      const viewHeight = document.getElementById("app").scrollHeight;
    	      window.parent.postMessage(
    	        {
    	          code: "iframeheght",
    	          text: viewHeight
    	        },
    	        "*"
    	      );
    	    }, 1000);
    	  });
    },
    
    展开全文
  • 采用JavaScript来控制iframe元素的高度是iframe高度自适应的关键,同时由于JavaScript对不同域名下权限的控制,引 发出同域、跨域两种情况。 同域时Iframe高度自适应 下面的代码兼容IE/Firefox浏览器,控制id为...
  • js自适应高度,实际上就是设置iframe高度,设置等于内嵌网页的高度,从而看不到滚动条和嵌套痕迹。对于用户体验和网站美观起着重要作用。我们可以通过css来给它直接定义一个高度,同样可以实现上面的需求。当内容...

    js自适应高度,实际上就是设置iframe的高度,设置等于内嵌网页的高度,从而看不到滚动条和嵌套痕迹。对于用户体验和网站美观起着重要作用。我们可以通过css来给它直接定义一个高度,同样可以实现上面的需求。当内容是未知或者是变化的时候。这个时候又有几种情况了。

    1、iframe内容未知,高度可预测

    // document.domain = "caibaojian.com";
    function setIframeHeight(iframe) {
      if (iframe) {
        var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;
        if (iframeWin.document.body) {
          iframe.height = iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight;
        }
      }
    };
    
    window.onload = function () {
      setIframeHeight(document.getElementById('external-frame'));
    };
    

    如果在同一个顶级域名下,不同子域名之间互通信息,设置document.domain =“ caibaojian.com”只要修改以上的iframe的ID就可以了。不污染html代码,建议使用上面的代码。

    <iframe src="backtop.html" frameborder="0" scrolling="no" id="external-frame" onload="setIframeHeight(this)"></iframe>
    

    2、针对知道的iframe的ID调用

    function iframeAutoFit(iframeObj) {
      setTimeout(function () { if (!iframeObj) return; iframeObj.height = (iframeObj.Document ? iframeObj.Document.body.scrollHeight : iframeObj.contentDocument.body.offsetHeight); }, 200)
    }
    

    3、内容宽度变化的iframe高度自适应

    <iframe src="backtop.html" frameborder="0" scrolling="no" id="test" onload="this.height=100"></iframe>
    
    function reinitIframe() {
      var iframe = document.getElementById("test");
      try {
        var bHeight = iframe.contentWindow.document.body.scrollHeight;
        var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
        var height = Math.max(bHeight, dHeight);
        iframe.height = height;
        console.log(height);
      } catch (ex) { }
    }
    window.setInterval("reinitIframe()", 200);
    
    展开全文
  • 6种iframe高度自适应的方法

    千次阅读 2021-03-13 00:03:39
    js自适应高度,实际上就是设置iframe高度,设置等于内嵌网页的高度,从而看不到滚动条和嵌套痕迹。对于用户体验和网站美观起着重要作用。我们可以通过css来给它直接定义一个高度,同样可以...

    js自适应高度,实际上就是设置iframe的高度,设置等于内嵌网页的高度,从而看不到滚动条和嵌套痕迹。对于用户体验和网站美观起着重要作用。我们可以通过css来给它直接定义一个高度,同样可以实现上面的需求。当内容是未知或者是变化的时候。这个时候又有几种情况了。

    1、iframe内容未知,高度可预测

    这个时候,我们可以给它添加一个替换的css的min-height值,然后同时使用JavaScript改变高度。常用的兼容代码有:

    // document.domain = "caibaojian.com";function setIframeHeight(iframe) {if (iframe) {var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;if (iframeWin.document.body) {iframe.height = iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight;}}};
    window.onload = function () {setIframeHeight(document.getElementById('external-frame'));};
    

    如果在同一个顶级域名下,不同子域名之间互通信息,设置document.domain =“ caibaojian.com”只要修改以上的iframe的ID就可以了。不污染html代码,建议使用上面的代码。

    <iframe src="backtop.html" frameborder="0" scrolling="no" id="external-frame" onload="setIframeHeight(this)"></iframe>
    

    2、多个iframe的情况下

    <script language="JavaScript">//输入你希望根据页面高度自动调整高度的iframe的名称的列表//用逗号把每个iframe的ID分隔. 例如: ["myframe1", "myframe2"],可以只有一个窗体,则不用逗号。//定义iframe的IDvar iframeids=["test"];//如果用户的浏览器不支持iframe是否将iframe隐藏 yes 表示隐藏,no表示不隐藏var iframehide="yes";function dyniframesize(){var dyniframe=new Array()for (i=0; i<iframeids.length; i++){if (document.getElementById){//自动调整iframe高度dyniframe[dyniframe.length] = document.getElementById(iframeids[i]);if (dyniframe[i] && !window.opera){dyniframe[i].style.display="block";if (dyniframe[i].contentDocument && dyniframe[i].contentDocument.body.offsetHeight) //如果用户的浏览器是NetScapedyniframe[i].height = dyniframe[i].contentDocument.body.offsetHeight;else if (dyniframe[i].Document && dyniframe[i].Document.body.scrollHeight) //如果用户的浏览器是IEdyniframe[i].height = dyniframe[i].Document.body.scrollHeight;}}//根据设定的参数来处理不支持iframe的浏览器的显示问题if ((document.all || document.getElementById) && iframehide=="no"){var tempobj=document.all? document.all[iframeids[i]] : document.getElementById(iframeids[i]);tempobj.style.display="block";}}}if (window.addEventListener)window.addEventListener("load", dyniframesize, false);else if (window.attachEvent)window.attachEvent("onload", dyniframesize);elsewindow.onload=dyniframesize;</script>
    

    3、针对知道的iframe的ID调用

    function iframeAutoFit(iframeObj){setTimeout(function(){if(!iframeObj) return;iframeObj.height=(iframeObj.Document?iframeObj.Document.body.scrollHeight:iframeObj.contentDocument.body.offsetHeight);},200)}
    

    4、内容宽度变化的iframe高度自适应

    <iframe src="backtop.html" frameborder="0" scrolling="no" id="test" onload="this.height=100"></iframe><script type="text/javascript">function reinitIframe(){var iframe = document.getElementById("test");try{var bHeight = iframe.contentWindow.document.body.scrollHeight;var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;var height = Math.max(bHeight, dHeight);iframe.height = height;console.log(height);}catch (ex){}}window.setInterval("reinitIframe()", 200);</script>
    

    5、跨域下的iframe自适应高度

    跨域的时候,由于js的同源策略,父页面内的js无法获取到iframe页面的高度。需要一个页面来做代理。方法如下:假设www.a.com下一个一个页面a.html要包含我们使用www.a.com下一个另一个页面agent.html来做代理,通过它获取iframe页面的高度,并设置iframe元素的高度。html中包含iframe:

    <iframe src="http://www.b.com/c.html" id="Iframe" frameborder="0" scrolling="no"></iframe>
    

    在c.html中加入如下代码:

    <iframe id="c_iframe"  height="0" width="0"  src="http://www.a.com/agent.html" ></iframe><script type="text/javascript">(function autoHeight(){var b_width = Math.max(document.body.scrollWidth,document.body.clientWidth);var b_height = Math.max(document.body.scrollHeight,document.body.clientHeight);var c_iframe = document.getElementById("c_iframe");c_iframe.src = c_iframe.src + "#" + b_width + "|" + b_height;  // 这里通过hash传递b.htm的宽高})();</script>
    

    最后,agent.html中加入一段js:

    <script type="text/javascript">var b_iframe = window.parent.parent.document.getElementById("Iframe");var hash_url = window.location.hash;if(hash_url.indexOf("#")>=0){var hash_width = hash_url.split("#")[1].split("|")[0]+"px";var hash_height = hash_url.split("#")[1].split("|")[1]+"px";b_iframe.style.width = hash_width;b_iframe.style.height = hash_height;}</script>
    

    agent.html从URL中获得宽度值和高度值,并设置iframe的高度和宽度(因为agent.html在www.a.com下,所以操作a.html时不受JavaScript的类似限制)

    6、postMessage + window.name实现跨域iframe高度自适应兼容版

    我们知道HTML5 PostMessage不支持IE8以下的浏览器跨域,于是我想到了window.name支持ie6和ie7的方案,那么能否把这两种合并起来,变成一种全兼容的跨域方案呢?还别说,真有人能做到。

    html5 postMessage实现跨域

    postMessage是html5的一个新功能,可以实现不同域名之间的通信,通过给postMessage方式发送数据,监听则通过在父子窗口上添加onmessage事件进行。缺点也就很明显了,只有支持html5的浏览器才支持这种跨域方式,像IE6、7当然就拒之门外了!

    window.name实现跨域

    window.name实现跨域也是一个比较老的问题,之前kejun写过一个演示,可是给的却是同域名的通信。其实kejun的实例中就是实现跨域的,不过他采用了同一个域名,而且过程比较崎岖:

    1. 建立iframe,指定src为被跨域的页面

    2. 被跨域文件修改window.name,将数据传给window.name

    3. 将iframe.src修改为本域代理文件,然后就可以取到contentWindow.name

    4. 进行处理数据,清除iframe充分的运用了window.name因为页面的URL改变而名称不改变的特性。但是如果我们是自己用,还是可以的,而如果我们放出去要别人使用我们写的东西,那样学习成本太大。

    多浏览器双向跨域

    为了解决上面的问题,我们使用的方法就是如果支持postMessage的浏览器就使用postMessage,如果不支持的就采用window.name的方式,幸运的是在IE6、7中支持跨域设置window.name,而我们就可以简单的通过window.name来跨域。

    然后建立计时器来监听window.name是否发生了变化,如果变化则接收并分析window.name,然后做请求。 

    演示和代码:

    <body>  <div style="width:100%;border:1px solid green;">    <h3>this page from :<span id="host"></span></h3>    <input type="text" value="" id="data" /><button id="btn" onclick="send();">提交</button>  </div>    <iframe id="iframeA" src="http://1.qdemo.sinaapp.com/cross-domain/client.html" style="border:1px solid #ff6600;width:100%;height:300px;"></iframe>  <script type="text/javascript">    document.getElementById('host').innerHTML = location.host;    function send(){      var val = document.getElementById('data').value;      sendMessage(val);    }    (function(win, doc){      var ifr = doc.getElementById('iframeA').contentWindow;      var cb = function(json){        alert(location.host+" get msg:"+json);      };      var sendMessage = function(){        if(win.postMessage){          if (win.addEventListener) {                    win.addEventListener("message",function(e){            cb.call(win,e.data);          },false);                }else if(win.attachEvent) {                    win.attachEvent("onmessage",function(e){            cb.call(win,e.data);          });                }          return function(data){            ifr.postMessage(data,'*');          };        }else{          var hash = '';                    setInterval(function(){                      if (win.name !== hash) {              hash = win.name;              cb.call(win, hash);            }          }, 50);          return function(data){            ifr.name = data;          };        }      };      win.sendMessage = sendMessage();    })(window, document);</script></body>
    
    <body>  <h3>this page from :<span id="host"></span></h3>  <input type="text" value="" id="data" /><button id="btn" onclick="send();">提交</button>  <ul>    <li>firefox、chrome等高级浏览器采用html5 postMessage方法</li>    <li>IE6 7等使用window.name方法</li>    <li>支持双向跨域,在chrome 13、firefox6、IE6+测试通过</li>    <li>window.name可以通过data加随机数方式,避免两次提交的数据相同,本例没做处理,所以如果不改变value值点击提交是不会触发alert的</li>    <li><a href="cross-domain.zip">demo下载</a></li>  </ul>  <script type="text/javascript">    document.getElementById('host').innerHTML = location.host;    function send(){      var val = document.getElementById('data').value;      sendMessage(val);    }    (function(win, doc){      var ifr = win.parent;            var cb = function(json){        alert(location.host+"  get msg:"+json);      };      var sendMessage = function(){        if(win.postMessage){          if (win.addEventListener) {                    win.addEventListener("message",function(e){            cb.call(win,e.data);          },false);                }else if(win.attachEvent) {                    win.attachEvent("onmessage",function(e){            cb.call(win,e.data);          });                }
              return function(data){            ifr.postMessage(data,'*');          };        }else{          var hash = '';                    setInterval(function(){            if(win.name!==hash){              hash = win.name;              cb.call(win,hash);            }          },50);          return function(data){            ifr.name = data;          };        }      }      win.sendMessage = sendMessage();    })(window, document);</script></body>
    

    基于上面的代码,结合我上篇文章的演示,我们再来命名一个iframe自适应高度的解决方案。

    本文完〜

    展开全文
  • 开发作者:Jackie Law 开发时间:2021-08-04 开发语言:Javascript 浏 览 器:Microsoft Edge(版本 92.0.902....3.B.html的内容高度不固定; 4.A.html里包含B.html的iframe出现滚动条; 场景需求 1.让A.html页面里的ifr
  • 但是这就造成了iframe高度无法自适应,比如在电脑上能正常显示,手机上就无法正常显示,哪么有什么办法可以设置iframe高度自适应呢? 其实很简单,并不用像网上说的那样,用js去监听浏览器高度纯css就可以实现iframe...
  • iframe 标签添加 onload 事件,如下 <iframe src="引用链接" width="100%" name="demo" id="demo" frameborder="0" onload="this.height=this.contentWindow.document.body.scrollHeight" sandbox="allow-...
  • vue iframe高度自适应 实用

    千次阅读 2021-02-20 11:26:02
    实时刷新iframe高度变化 var iframes = document.getElementsByTagName('iframe'); setInterval(function() { for (var i = 0, j = iframes.length; i < j; ++i) { iframes[i].setAttribute('heigh
  • 目录ftl文件js文件 ftl文件 // A code block <div class="layui-tab-content"> <div class="layui-tab-item ...iframe width=100% id="myiframe" onload="setHeight()" height="1" frameborder="0" src="
  • 真正解决iframe高度自适应问题

    千次阅读 2021-06-10 10:49:23
    1.前言解决iframe高度自适应问题有两种方法1.pym2.手动设置iframe的高度本文主要是总结第二种实现方式,因为第一种pym.js插件我没用懂如果使用iframe时,遇到以下的需求:iframe的高度始终等于嵌入页面内容的高度,...
  • iframe高度自适应撑开

    千次阅读 2021-06-10 10:49:21
    iframe在div中如何自适应高度div中的iframe高度和宽度自适应的问题我用bootstrap布局,上边部分为导航菜单,左边为一级菜单。DIV里嵌套Iframe,让Iframe及DIV高度一起随内容自假设: Div ID为:A 宽度750 高度600 ...
  • <html> <head> <style> body {margin-left: 0px;margin-top: 0px;margin-right: 0px;margin-bottom: 0px;...iframe src='http://hi.baidu.com/' width='100%' height='100%' frameborder=.
  • 带边框的iframe因为能和网页无缝的结合从而不刷新页面的情况下更新页面的部分数据成为可能,可是 iframe的大小却不像层那样可以“伸缩自如”,所以带来了使用上的麻烦,给iframe设置高度的时候多了也不好,少了更是...
  • 一直被iframe高度自适应的问题困扰着,今天终于找到完美解决方案,加上以下css即可。 css iframe { display: block; border: none; height: 90vh;/*设置高度百分比,一直调到只有一个滚动调为止*/ width: 100%;...
  • 网上查了好多用着都不行,自己搞定了:在包含iframe的页面中加入以下脚本,基本思想是在iframe加载内容后重新设置高度,下面代码尽在IE6中用过,没在其他浏览器中测试。
  • 高度自适应的实现方法有不少了,今天我们以css iframe高度自适应示例来为各位引起一些js与jquery的例子,有兴趣的可以和小编一起来看看。前因:某个项目为了统计效果,把咨询的页面窗口内嵌放进一个单独的空页面,在...
  • 设置iframe高度自适应屏幕高度

    千次阅读 2019-12-11 23:01:20
    最近在搭建项目前台页面框子的时候,把iframe设置成了固定的高度,导致不同的电脑尺寸访问的时候,高度差异较大,故查了下,将iframe设置成自动适应屏幕高度的方式,这里记录下。  还是直接上代码吧 <%--...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 8,073
精华内容 3,229
关键字:

iframe高度自适应