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); 版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/199365.html原文链接：https://javaforall.net
