精华内容
下载资源
问答
  • iframe嵌套iframe 页面高度自适应

    千次阅读 2020-06-28 15:39:36
    做项目的时候遇到了iframe嵌套iframe 需要页面高度跟随页面内容多少来显示。而且还不能使用iframe自带的scrolling滚动条。 刚开始就算父iframe高度 计算错误,导致页面显示只显示一半的内容。 解决方法是 : 在...

    做项目的时候遇到了iframe嵌套iframe 需要页面高度跟随页面内容多少来显示。而且还不能使用iframe自带的scrolling滚动条。
    刚开始就算父iframe高度 计算错误,导致页面显示只显示一半的内容。

    解决方法是 :
    在iframe子页面加载完成时首先将iframe的高度值设置为0(清除上一个子页面的高度影响) 然后通过document.body.scrollHeight获取该子页面的高度值 来设置iframe的高度值

    <iframe id="main" name="main" width="100%" height="100%"  src="home.html" onload="iFrameHeight()" frameborder="0" scrolling="no" ></iframe>
    
    function iFrameHeight(){
            var ifm= document.getElementById("main");  
            var subWeb = document.frames ? document.frames["main"].document :    ifm.contentDocument;  
            if(ifm != null && subWeb != null) {
                $("#main").height(0);//此处关键处 莫忘  清除上一个子页面高度的影响
                $("#main").height(subWeb.body.scrollHeight);
            }
    }
    
    展开全文
  • 完美解决跨域iframe高度自适应

    热门讨论 2015-05-25 09:47:13
    完美解决跨域iframe高度自适应,完美解决跨子域iframe高度自适应,嵌入几个页面解决跨域iframe高度自适应。。。
  • 跨域Iframe实现高度自适应: <html> <head> <style> body {margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; overflow: hidden ...
    跨域Iframe实现高度自适应:
    <html>
        <head>
            <style>
                body {margin-left: 0px;
                    margin-top: 0px;
                    margin-right: 0px;
                    margin-bottom: 0px;
                    overflow: hidden
                }
            </style>
        </head>
        <body>
            <iframe src='http://baidu.com/' width='100%' height='100%' frameborder='0' name="_blank" id="_blank" >       </iframe>
        </body>
    </html>
     
     
     
    注意三点.
     
    1. 文件开头不能是:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    必须 是<html>开头
    2. body样式中的 overflow: hidden; 绝对不对省略;
    3.Iframe 中的 height='100%' 以及 滚动条不能设为no(默认是yes,不用设置即可)
    展开全文
  • NULL 博文链接:https://z-one.iteye.com/blog/1725511
  • iframe自动适应高度,很难得的资源,很多下载的都是部分浏览器可以用,这个可以兼容360.ie6789等,遨游,火狐。搜狗等浏览器。。亲自测试。
  • iframe页面高度自适应

    2019-06-28 08:42:16
    iframe嵌套页面是经常会用到的,那么嵌套页面能够在主页无损显示呢。 事实证明显然不行,这已经是给iframe标签加了widt:100%和height:100%;的结果。 Height:100%无效,那直接给高度呢。 嗯,嵌套页面完全...

     

    iframe嵌套页面是经常会用到的,那么嵌套页面能够在主页无损显示呢。

      

    事实证明显然不行,这已经是给iframe标签加了widt:100%和height:100%;的结果。

    Height:100%无效,那直接给高度呢。

    嗯,嵌套页面完全显示出来了。那切换到另一个嵌套页面试试。

    不同的页面高度不同,切换到不同页面就会造成高度不够的情况。

    那iframe页面高度自适应是怎么做到的呢。

    其实就是切换不同的页面时获取到对应的页面高度给予iframe标签。

    1、首先选择到iframe标签

       var ym = document.getElementById('content');

    给嵌套页面加载事件ifr.onload = function () {

    //解决打开高度太高的页面后再打开高度较小页面滚动条不收缩

        ym.style.height = '0px';

    var hig= ym.contentDocument;

    //contentDocument属性以 HTML 对象返回框架容纳的文档

    var height = measure(hig)

    //使用measure方法获取高度

    ym.style.height = height + 'px';

    //将高度赋予iframe标签

    }

     

    //计算页面的实际高度,iframe自适应会用到

    scrollHeight返回元素的整体高度clientHeight:返回浏览器窗口高度

            function measure(hg) {

    var cHeight = Math.max

    (doc.body.clientHeight, doc.documentElement.clientHeight)

                var sHeight = Math.max

    (doc.body.scrollHeight, doc.documentElement.scrollHeight)

    var height = Math.max(cHeight, sHeight)

    实际上也没用到这三行;

                return height = doc.body.scrollHeight

      //返回返回元素的整体高度

            }

     

    这样就能够让嵌套页面无障碍显示了。

     

    展开全文
  • iframe嵌套网页告诉自适应 <iframe src="https://10.122.105.21:3333/" name="iframe" class="iframe" frameborder="0" style="overflow: hidden; height: 100%; width: 100%; position: absolute;"></...

    iframe嵌套网页高度自适应

    <iframe src="https://10.122.105.21:3333/"  name="iframe"  class="iframe" frameborder="0" style="overflow: hidden; height: 94%; width: 100%; position: absolute;"></iframe>
    
    展开全文
  • domainA 中有一个页面index.html,通过iframe嵌套了domainB中的一个页面other.html由于other.html页面在iframe中显示,而且其页面内容会动态的增加或减少,现在需要去掉iframe的滚动条由于javascript同源策略的限制...
  • 有A,B,C三个页面,A页面包含B页面,B页面包含C页面.A页面随着B页面自适应,C页面随着B页面自适应,具体实现如下,感兴趣的朋友可以参考下
  • iframe高度自适应

    2020-04-17 20:49:46
    现在有这样一个情景:a页面...很显然,因为被嵌入的b页面高度是不确定的,我们在使用iframe的时候就不能固定iframe这个元素的高度,而是应该写为100%。好,下面我还是用最简单的例子来验证如何完美的解决iframe高度...
  • 最近在做网页时需要使iframe高度自适应,以提高用户体验,网上找了挺多都很复杂,后来在csdn看到的这段代码简介而有效,故此记录下,感谢博主。 () HTML: &lt;div class="main_page"&gt; ...
  • 方式二:通过在主页面嵌入iframe页面实现; 两种方式都进行了验证,并且都遇到问题: 方式一问题:可以渲染出子页面html内容,但是丢失css样式,引入ckeditor的标准样式css后,绝大部分样式问题解决,但通过标签...
  • 1.文件开头必须是 原因:xmlns是XHTML namespace的缩写。由于xml允许定义自己的标记,但你定义的标记和其他人定义的... 绝对不对省略 3.Iframe 中的 height=‘100%’ 以及 滚动条不能设为no(默认是yes,不用设置即可)
  • 最近在做网页时需要使iframe高度自适应,以提高用户体验,网上找了挺多都很复杂,最后找到了这个 HTML: <div class="main_page"> <iframe scrolling="no" id="main" name="main" frameborder="0" src="" ...
  • 页面无刷新更新方面,虽然现在的ajax很强悍,但是处理代码相对多点。想比之下,iframe就简单多了!处理iframe自适应宽、高,会经常用到,网上整理了一份,写在这里备用: ...多层嵌套iframe 高度自适应
  • Vue 中 iframe高度自适应

    万次阅读 2019-04-28 18:13:17
    iframe引入报表,高度自适应。 <template> <div style="height:auto;"> <iframe style="width:100%;height:100%;" :src="bdTokenUrl" frameborder="0" scrolling="no" id="bdIframe"> <...
  • class Iframe { constructor(options) { this.$el = document.createElement('IFRAME'); this.$options = options; this.$target = options.target ? document.getElementById(options...
  • iframe包含的页面高度,兼容性好,iframe高度自适应
  • iframe { width : 100% ; height : 100% ; padding : 0 ; margin : 0 } #wrap { width : 100% ; height : 100% ; overflow-x : hidden ; }...
  • 在网上找了很多iframe高度自适应,发现很多兼容性都不是很好,于是自己总结了一下。  子页面html节点上要有下面红色部分,不然ie浏览器会无限递增 &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 ...
  • <html> <head> <style> body{ margin: 0px 0px 0px 0px; overflow: hidden } </style>...iframe id="alimamaifrm" name="alimamaifrm" height="100%" wid.
  • iframe在实际开发中应该算是比较常见的,在一些...在iframe页面里通过window.parent即可定位到父页面的window对象,然后,通过定时器来检测iframe页面高度变化,来设置父页面的相应容器的高度即可。 实例代码: ...
  • iframe完美解决自适应内嵌网页高度

    千次阅读 2020-06-19 23:40:04
    /*设置高度百分比,一直调到只有一个滚动调为止*/ width: 100%; } html <iframe src="https://www.bilibili.com/video/BV1E7411b7QN" width="100%" allowfullscreen frameborder="0"></iframe> 效果 ...
  • iframe跨域嵌套自适应高度 iframe跨域嵌套 丢失session值(针对嵌套asp.net 做的网站)
  • iframe宽高自适应iframe跨域

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,182
精华内容 872
关键字:

iframe嵌套页面高度自适应