iframe 里的高度适应的问题
Posted 淡定总是那么难
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了iframe 里的高度适应的问题相关的知识，希望对你有一定的参考价值。
iframe 这个东西功能是很强大，但是有一个巨大的问题就是高度自适应的问题；
不过这个问题，百度或者谷歌上有很多解决办法，但是，很多时候都有兼容性问题； 所有我就每个方法都试了一遍，终于找到了一个
感觉很牛的样子，不需要用到js 就可以让iframe 里的内容覆盖整个页面，感觉很舒服。哈哈哈
<html> <head> <meta charset="UTF-8"> <title></title> </head> <style type="text/css"> body {margin-left: 0px;margin-top: 0px;margin-right: 0px;margin-bottom: 0px;overflow: hidden;} </style> <body> <div> <iframe id="external-frame" src="https://cdn-huoshu.fire2333.com/landpages/rxgl/template/4039/index.php?pt=7590&footer_id=1" width="100%" height="100%" scrolling=" no"></iframe> </div> </body> </html>
这样，就可以完美的解决这个问题啦；
有三点要注意哦：
第一：一定要已html开头，而不是用<!DOCTYPE html>开头
第二：body的overflow:hidden ; 一定不要忘记加；
第三：iframe 的高度100%一定要记得加上。这样就解决了我的问题了；
虽然不知道这种实现的原理是什么，希望有知道的朋友可以告诉我下。
这在跨域的时候，是真的好用，尤其是不能修改iframe 里的页面的时候；
同域的话：
有一段js代码就可以解决这个问题啦；
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‘)); };
在页面里插入这个就好啦；
我觉得这两个方法完美的解决了我公司一些php们的问题。
天天都在用iframe结果用的还那么不清楚，实在搞不懂。
尤其是某个php，什么css js html都不会，真心不知道他是怎么成为php的。连获取元素都不会。很气
瞎抱怨下，反正没人看。哈哈哈哈，总之这两种方法我觉得很好。赞；
以上是关于iframe 里的高度适应的问题的主要内容，如果未能解决你的问题，请参考以下文章
什么命令可以使iframe框架里的被引用页面宽高自适应框架宽高？