Iframe 高度自适应, js控制Iframe 高度自适应, iframe自适应高度
================================
©Copyright 蕃薯耀 2019年12月31日
http://fanshuyao.iteye.com/
方法一：js控制Iframe 高度自适应
这个方法之前一直都在用，没有问题，但最新发现有些情况不行（具体原因不清楚）
/*
function thisIframeHeightAuto(){
setIframeHeight("auditList");
};
*/
//window.setInterval("iframeHeightAuto()", 200);
function setIframeHeight(iframeId){
var cwin = document.getElementById(iframeId);
if(document.getElementById){
if(cwin && !window.opera){
if(cwin.contentDocument && cwin.contentDocument.body.offsetHeight){
cwin.height = cwin.contentDocument.body.offsetHeight;//FF NS
console.log("FF NS cwin.height=" +cwin.height);
}else if(cwin.Document && cwin.Document.body.scrollHeight){
cwin.height = cwin.Document.body.scrollHeight;//IE
console.log("IE cwin.height=" +cwin.height);
}
}else if(cwin.contentWindow.document && cwin.contentWindow.document.body.scrollHeight){
cwin.height = cwin.contentWindow.document.body.scrollHeight;//Opera
}
}
console.log("cwin.height=" + cwin.height);
};
方法二：html代码控制
在方法一不生效的时候，使用了方法二。
头部的html不需要任何的声明，都去掉，如下面代码所示：
<html> <head> <meta charset="UTF-8"> <title>iframe高度自适应</title> </head> <body> <div class="mt20"> <iframe id="mapIframe" border="0" frameborder="0" scrolling="no" width="100%" height="100%" style="padding: 0;margin: 0;" ></iframe> </div> <script type="text/javascript" src="../js/jquery-3.4.1.min.js"></script> </body> </html>
上面如果能自适应，就不需要下面的；如果上面还不自适应，需要设置
1、body样式中的 overflow: hidden; 绝对不对省略；
2、Iframe 中的 height='100%' 以及 滚动条不能设为no(默认是yes，不用设置即可)
方法三：同样是js控制（未验证）
原理：
Iframe页面的内容利用一个<div id="iframeContent">进行包裹，div会自适应内部高度，因此，可以通过div实现子页面高度的获取。
Iframe页面
<body>
<div id="iframeContent">
...
</div>
<body>
父页面（嵌入Iframe的页面）增加js：
//跨域或子页面无"iframeContent"则高度不能自适应
function reinitIframe(iframeId, minHeight) {
try {
var iframe = document.getElementById(iframeId);
var height = iframe.contentWindow.document.getElementById("iframeContent").offsetHeight;
if (!height) {
height = minHeight;
}
if (height < minHeight) {
height = minHeight;
}
iframe.style.height = height + "px";
} catch (e) {
iframe.style.height = minHeight + "px";
}
}
方法四：同样是js控制（未验证）
var browserVersion = window.navigator.userAgent.toUpperCase();
var isOpera = browserVersion.indexOf("OPERA") > -1 ? true : false;
var isFireFox = browserVersion.indexOf("FIREFOX") > -1 ? true : false;
var isChrome = browserVersion.indexOf("CHROME") > -1 ? true : false;
var isSafari = browserVersion.indexOf("SAFARI") > -1 ? true : false;
var isIE = (!!window.ActiveXObject || "ActiveXObject" in window);
var isIE9More = (! -[1,] == false);
function reinitIframe(iframeId, minHeight) {
try {
var iframe = document.getElementById(iframeId);
var bHeight = 0;
if (isChrome == false && isSafari == false) {
try {
bHeight = iframe.contentWindow.document.body.scrollHeight;
} catch (ex) {
}
}
var dHeight = 0;
if (isFireFox == true)
dHeight = iframe.contentWindow.document.documentElement.offsetHeight + 2;//如果火狐浏览器高度不断增加删除+2
else if (isIE == false && isOpera == false && iframe.contentWindow) {
try {
dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
} catch (ex) {
}
}
else if (isIE == true && isIE9More) {//ie9+
var heightDeviation = bHeight - eval("window.IE9MoreRealHeight" + iframeId);
if (heightDeviation == 0) {
bHeight += 3;
} else if (heightDeviation != 3) {
eval("window.IE9MoreRealHeight" + iframeId + "=" + bHeight);
bHeight += 3;
}
}
else//ie[6-8]、OPERA
bHeight += 3;
var height = Math.max(bHeight, dHeight);
if (height < minHeight) height = minHeight;
//alert(iframe.contentWindow.document.body.scrollHeight + "~" + iframe.contentWindow.document.documentElement.scrollHeight);
iframe.style.height = height + "px";
} catch (ex) { }
}
//定时任务
function startInit(iframeId, minHeight) {
eval("window.IE9MoreRealHeight" + iframeId + "=0");
window.setInterval("reinitIframe('" + iframeId + "'," + minHeight + ")", 100);
}
================================
©Copyright 蕃薯耀 2019年12月31日
http://fanshuyao.iteye.com/
相关推荐
js 控制 Iframe 高度自适应是指使用 JavaScript 语言来控制 iframe 的高度，使其能够自动调整以适应内容的高度。 在 iframe 高度自适应中，需要考虑多种浏览器的兼容性问题，包括 Firefox、IE、Opera 等不同的...
标题“Iframe 高度自适应浏览器高度”涉及的核心知识点是如何让Iframe的大小根据其内容自动调整，特别是高度，以便始终保持与浏览器窗口的高度同步，从而提供更好的用户体验。 首先，我们需要了解Iframe的基本结构...
iframe高度自适应代码及演示页面。 适合新手，用到iframe，并且需要高度自适应的人士。 老手自动绕行，又没什么技术含量。。。 解压之后，打开iframe-auto.html之后查看效果. 如果不能查看，检查是否允许执行js
实现`iframe`高度自适应的基本思路是在页面加载完成或者窗口大小发生变化时，通过JavaScript动态计算嵌入内容的实际高度，并相应地调整`iframe`的高度。这种方法的核心在于编写合适的JavaScript函数来获取嵌入内容的...
jsp 页面 iframe 高度自适应的 js 代码详解 jsp 页面 iframe 高度自适应的 js 代码是指在 jsp 页面中使用 iframe 元素，並且使其高度能够自适应内容的高度。这种技术在实际应用中非常有用，例如在某些网页中，我们...
总的来说，通过使用JavaScript动态计算`<iframe>`内容的高度并设置`<iframe>`的高度，可以有效地解决`<iframe>`内容高度自适应以及设置高度后无法缩小的问题。同时，要注意兼容性问题和跨域限制，以确保在各种环境下...
然而，由于同源策略的限制，跨域的`iframe`无法通过JavaScript获取其内容的高度，这给高度自适应带来了挑战。 **解决方法：** 1. **纯CSS解决方案**： 在某些情况下，如果`iframe`内容与主页面同源，可以使用CSS...
### iframe高度自适应JS知识点详解 #### 一、概述 在网页开发中，经常会遇到需要将一个页面嵌入到另一个页面中的场景，这时就需要用到`<iframe>`标签。但是，默认情况下，`<iframe>`的高度是固定的，这往往会导致...
iframe包含的页面的高度，兼容性好，iframe高度自适应
本文将详细讲解如何使用JavaScript实现`iframe`自适应高度的解决方案，确保在各种主流浏览器中都能正常工作。 首先，理解`iframe`的基本结构和属性是至关重要的。`iframe`标签通常包含`src`属性，用于指定要加载的...
这段描述中提到的“完美自适应高度嵌套代码”很可能就是一个实现上述逻辑的JS代码片段，它可能包含了针对不同浏览器的兼容性处理，比如对于IE6-9这些老版本浏览器的特殊处理，因为它们对某些DOM操作和事件处理的支持...
在网页开发中，有时我们需要使用`iframe`来嵌入外部页面或者内容，但是`iframe`的高度自适应问题一直是一个常见的挑战。特别是在不同浏览器之间，由于兼容性问题，往往需要额外的处理才能达到理想的效果。本篇文章将...
总结来说，`iframe`跨域自适应高度模板主要是通过`CORS`解决跨域限制，通过JavaScript监听`load`事件或使用`postMessage`通信来实现内容高度的动态调整。这些技术在现代网页开发中十分常见，能帮助我们更灵活地整合...
完美解决跨域iframe的高度自适应,完美解决跨子域iframe的高度自适应，嵌入几个页面解决跨域iframe的高度自适应。。。
### iframe自适应高度和宽度详解 在Web开发中，`iframe`（Inline Frame）是一种常用的HTML元素，用于在当前页面内嵌入另一个HTML文档。它能够实现页面内部局部刷新的效果，广泛应用于各种复杂的网页布局中。然而，...
`iframe`的使用涉及到许多关键点，尤其是高度自适应和多浏览器兼容性，这在实际项目中至关重要。本篇文章将详细讲解如何实现`iframe`的高度自适应以及在不同浏览器之间的兼容性处理。 一、`iframe`基本使用 `iframe...
这个库允许的高度与同跨域iframe来适应他们所包含的内容的宽度自动调整大小。它最常见的问题与使用iframes提供一系列的功能，其中包括： 高度和宽度大小的iframe内容大小。 作品以多个嵌套的iframe。 跨域iframe域...
### 解决IE、Firefox、Chrome、Safari浏览器中iframe显示高度自适应问题 在Web开发中，`iframe`（Inline Frame）元素常被用于嵌入另一个HTML文档到当前页面中，这种技术为开发者提供了极大的便利，例如加载广告、...
综上所述，`iframe`自适应高度是通过JavaScript、CSS布局技术（如Flexbox或Grid）、或者通过跨窗口通信来实现的。选择哪种方法取决于你的项目需求，如兼容性、复杂性、是否能控制`iframe`源等因素。正确实现`iframe`...