iframe高度自适应 1

iframe高度

之前用原生js写的iframe高度自适应方法都失效了，可能是浏览器不支持那样的写法，不过幸好的是还可以依赖jquery来处理

父层页面的结构：

      <div class="wrapper"><h1>这个是一个主页面，里面嵌套了一个iframe页面，iframe能高度自适应</h1></div><iframe id="iframe1" frameBorder=0 scrolling=no  src="test.html"  ></iframe>

方法1：写在父页面上

      <script src="//cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script><script>$(function(){$('#iframe1').load(function() {var iframeHeight=$(this).contents().height();$(this).height(iframeHeight+'px');});})</script>

方法2：写在父页面上

      <script src="//cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script><script>$(function(){$('#iframe1').css({width: $(window).width(),height: $(window).height() - $('.wrapper').height() - 10})})</script>

方法3：写在子页面上

      <script src="//cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script><script>$(function(){$(window.parent.document).find("#iframe1").load(function() {var main = $(window.parent.document).find("#iframe1");var thisheight = $(document).height() + 10;main.height(thisheight);})})</script>

iframe高度自适应 1相关推荐

Iframe高度自适应（兼容IE/Firefox、同域/跨域）
在实际的项目进行中,很多地方可能由于历史原因不得不去使用iframe,包括目前正火热的应用开发也是如此. 随之而来的就是在实际使用iframe中,会遇到iframe高度的问题,由于被嵌套的页面长度不固 ...
Iframe高度自适应（兼容IEFirefox、同域跨域）
在实际的项目进行中,很多地方可能由于历史原因不得不去使用iframe,包括目前正火热的应用开发也是如此. 随之而来的就是在实际使用iframe中,会遇到iframe高度的问题,由于被嵌套的页面长度不固 ...
CSS完美实现iframe高度自适应（支持跨域）
https://blog.csdn.net/qq_32915337/article/details/79900222 Iframe的强大功能偶就不多说了,它不但被开发人员经常运用,而且黑客们也常常使用 ...
纯CSS实现iframe高度自适应，完美兼容各种浏览器，同域异域
最近做项目需要引用外部页面,在网上找的许多关于iframe高度自适应的文章,有的只能同域访问,有的可以实现异域,但是需要异域是可编辑的.对于我这种情况都不适用.而且,这些方法都需要用js. 后来,我发 ...
iframe高度自适应（IE6+、FF、Opera、Chrome等测试通过）
在主页面中对于嵌入的iframe页面高度未知,而且iframe页面的高度也不定,故不能在主页面中通过DOM来控制高度.在iframe页面中加入以下脚本便可实现: /* iframe 高度自适应脚本(I ...
iframe高度自适应的6个方法
iframe内容未知,高度可预测这个时候,我们可以给它添加一个默认的CSS的min-height值,然后同时使用JavaScript改变高度.常用的兼容代码有: // document.domain ...
跨域iframe高度自适应(兼容IE/FF/OP/Chrome)
采用JavaScript来控制iframe元素的高度是iframe高度自适应的关键,同时由于JavaScript对不同域名下权限的控制,引发出同域.跨域两种情况. 由于客户端js使用浏览器的同源安全策 ...
html iframe自动高度,iframe高度自适应撑开
iframe在div中如何自适应高度 div中的iframe高度和宽度自适应的问题我用bootstrap布局,上边部分为导航菜单,左边为一级菜单. DIV里嵌套Iframe,让Iframe及DIV高 ...
完美实现跨域Iframe高度自适应【Iframe跨域高度自适应解决方案】
Iframe的强大功能偶就不多说了,它不但被开发人员经常运用,而且黑客们也常常使用它,总之用过的人知道它的强大之处,但是Iframe有个致命的"BUG"就是iframe的高度无法自 ...
iframe高度自适应问题
今天写了一下html静态页,遇到iframe高度自适应问题.本来是使用bootstrap的,看它上面的文档说直接使用它们给好样式就可以了.但是并没有达到要的效果. 最后使用了这个中方法解决了. < ...

iframe高度自适应 1

iframe高度

iframe高度自适应 1相关推荐

最新文章

热门文章