iframe切换(iframe是什么)

编程之家2026-06-301177次浏览

大家好，感谢邀请，今天来为大家分享一下iframe切换的问题，以及和iframe是什么的一些困惑，大家要是还不太明白的话，也没有关系，因为接下来将为大家分享，希望可以帮助到大家，解决大家的问题，下面就开始吧！

怎么让iframe自适应高度

什么是自适应高度吧。所谓iframe自适应高度，就是，基于界面美观和交互的考虑，隐藏了iframe的border和scrollbar，让人看不出它是个iframe。如果iframe始终调用同一个固定高度的页面，我们直接写死iframe高度就可以了。而如果iframe要切换页面，或者被包含页面要做DOM动态操作，这时候，就需要程序去同步iframe高度和被包含页的实际高度了。

顺便说下，iframe在迫不得已的时候才去用，它会给前端开发带来太多的麻烦。

传统做法大致有两个：

方法一，在每个被包含页在本身内容加载完毕之后，执行JS取得本页面的高度，然后去同步父页面的iframe高度。

方法二，在主页面iframe的onload事件中执行JS，去取得被包含页的高度内容，然后去同步高度。

在代码维护角度考虑，方法二是优于方法一的，因为方法一，每个被包含页都要去引入一段相同的代码来做这个事情，创建了好多副本。

如果只考虑FX和IE，并且，iframe里面内容也不进行DOM操作，那仍然可以用最简单最方便的传统处理方式：

两个方法都只处理了静的东西，就是只在内容加载的时候执行，如果JS去操作DOM引起的高度变化，都不太方便。

如果在主窗口做一个Interval，不停的来获取被包含页的高度，然后做同步，是不是即方便，又解决了JS操作DOM的问题了呢？答案是肯定的。

Demo页面：主页面 iframe_a.html，被包含页面 iframe_b.htm和 iframe_c.html

主页面代码示例：

function reinitIframe(){

var iframe= document.getElementById("frame_content");

try{

iframe.height= iframe.contentWindow.document.documentElement.scrollHeight;

}catch(ex){}

}

window.setInterval("reinitIframe()", 200);

</script>

一直执行，效率会不会有问题？

我做了测试，同时开5个窗口（IE6、IE7、FF、Opera、Safari）执行这个代码，不会对CPU有什么影响，甚至调整到2ms，也没影响（基本维持在0%占用率）。

下面谈谈各浏览器的兼容性问题，如何获取到正确的高度，主要是对body.scrollHeight和documentElement.scrollHeight两个值得比较。注意本文用的是这个doctype，不同的doctype应该不会影响结果，但是假如你的页面没有申明doctype，那还是先去加一个吧。

<!DOCTYPE HTML PUBLIC"

在主页面追加以下测试代码，以输出这两个值，代码示例：

<div><button onclick="checkHeight()">Check Height</button></div><script type="text/javascript">

function checkHeight(){

var iframe= document.getElementById("frame_content");

var bHeight= iframe.contentWindow.document.body.scrollHeight;

var dHeight= iframe.contentWindow.document.documentElement.scrollHeight;

alert("bHeight:"+ bHeight+", dHeight:"+ dHeight);

}

</script>

被加载页面，可以切换一个绝对定位的层，来使页面高度动态改变。如果层展开，则会撑高页面高度。代码示例：

<div><button onclick="toggleOverlay()">Toggle Overlay</button>

</div>

</div>

function toggleOverlay(){

var overlay= document.getElementById('overlay');

overlay.style.display=(overlay.style.display=='none')?'block':'none';

}

</script>

下面列出以上代码在各浏览器的测试值：

（bHeight= body.scrollHeight, dHeight= documentElement.scrollHeight,红色=错误值,绿色=正确值）

层隐藏时

层展开时

bHeight

dHeight

bHeight

dHeight

IE6 184 184 184 303

IE7 184 184 184 303

FF 184 184 184 303

Opera 181 181 300 300

Safari 184 184 303 184

暂且无视Opera比别人少3像素的问题…可以看出，如果没有绝对定位的东西，两个值是相等的，取哪个都无所谓。

但是如果有，那么各个浏览器的表现不太相同，单取哪个值都不对。但可以找到了一条规律，那就是取两个值得最大值可以兼容各浏览器。所以我们的主页面代码就要改造成这样了：

function reinitIframe(){var iframe= document.getElementById("frame_content");

try{

var bHeight= iframe.contentWindow.document.body.scrollHeight;

var dHeight= iframe.contentWindow.document.documentElement.scrollHeight;

var height= Math.max(bHeight, dHeight);

iframe.height= height;

}catch(ex){}

}

window.setInterval("reinitIframe()", 200);

这样子，基本解决了兼容性问题。顺便说下，不光绝对定位的层会影响到值，float也会导致两个值的差异。

如果你演示Demo后，会发现，除了IE，其他浏览器中，当层展开后再隐藏，取到的高度值还是维持在展开的高度303，而非隐藏回去的真正值184，就是说长高了之后缩不回去了。这个现象在不同被包含页面之间做切换也会发生，当从高的页面切换到矮页面的时候，取到的高度还是那个高的值。

可以归纳为，当iframe窗体高度高于文档实际高度的时候，高度取的是窗体高度，而当窗体高度低于实际文档高度时，取的是文档实际高度。因此，要想办法在同步高度之前把高度设置到一个比实际文档低的值。所以，在iframe的添加 onload=”this.height=100″，让页面加载的时候先缩到足够矮，然后再同步到一样的高度。

这个值，在实际应用中决定，足够矮但又不能太矮，否则在FF等浏览器里会有很明显的闪烁。DOM操作的时候主页面无法监听到，只能DOM操作完了之后把高度变小了。

在我的一个实际项目中，在成本和收益之间权衡，我并没有做这个事情，因为每个DOM函数中都要插入这个代码，代价太高，其实层缩回去不缩掉也不是那么致命。包括Demo里，也没有去做这个事情。如果读者有更好的方法，请告诉我。

这是最终的主页面的代码：

function reinitIframe(){

var iframe= document.getElementById("frame_content");

try{

var bHeight= iframe.contentWindow.document.body.scrollHeight;

var dHeight= iframe.contentWindow.document.documentElement.scrollHeight;

var height= Math.max(bHeight, dHeight);

iframe.height= height;

}catch(ex){}

}

window.setInterval("reinitIframe()", 200);

</script>

附Demo页面：主页面 iframe_a.html，被包含页面 iframe_b.htm和 iframe_c.html

iframe无法在浏览器中显示怎么办

1、首先，进入出现“此内容不能在框架中显示。”的页面，单击“在新窗口中打开此内容”。点击后，即可正常显示网页的内容了。注意，出现“此内容无法在框架中显示”，以上解决方法必须是在IE浏览器中进行。

2、问题2：页面内容的缺失框架中可能会存在一些限制，从而导致网页的某些内容无法正常显示。比如，如果一个网页使用了非标准的HTML标记，而框架又不支持这些标记，那么该网页的部分内容就会被遗漏。

3、因为IE中需要支持P3P，你在被嵌入页面中添加一条语句：response.AddHeader(P3P，CP=CAOPSAOUR)；看能不能行，不行的话再搜索Iframe的跨域问题，有好几种方案。

4、电脑打开360浏览器。打开360浏览器之后，点击浏览器右上角的打开菜单图标。进入360浏览器菜单，点击切换到E6多窗口模式就可以了。

5、菜单-工具里的360安全浏览器选项：常规设置里有个“窗口（只打开一个浏览器）”选中即可。

如何让嵌入的iframe自动缓存

让嵌入的iframe自动缓存可以通过以下几种方式实现：

设置iframe的缓存策略：

可以通过设置iframe的HTTP头部信息来控制缓存行为。例如，使用Cache-Control和Expires头部字段来指定缓存策略。例如，设置Cache-Control为"max-age=3600"表示缓存有效期为3600秒。这种方式需要服务器端的配合，确保在响应iframe请求时包含正确的缓存头部信息。

使用localStorage或sessionStorage：

在父页面中使用localStorage或sessionStorage来存储iframe的内容或相关数据。当iframe需要加载时，可以先检查localStorage或sessionStorage中是否存在缓存的数据，如果存在则直接读取并显示，而无需重新从服务器加载。这种方法适用于iframe内容变化不频繁的场景。

使用Service Worker：

Service Worker可以在浏览器后台运行，拦截和处理网络请求。通过编写Service Worker脚本，可以缓存iframe的内容，并在下次加载时直接从缓存中获取数据。这种方式需要一定的编程技能，但可以实现对iframe内容的精细控制。

使用浏览器缓存：

浏览器本身具有缓存机制，可以通过设置iframe的src属性为一个具有缓存策略的URL来利用这一机制。当浏览器加载该URL时，会根据缓存策略决定是否从缓存中获取数据。这种方法简单有效，但依赖于浏览器的缓存策略和用户的浏览器设置。

在Vue3中通过路由和组件缓存iframe：

对于使用Vue3开发的应用，可以通过同一个路由传入不同的src参数来显示不同的iframe内嵌页面。利用Vue的组件缓存机制（如keep-alive），可以对这些页面进行缓存。当切换回已缓存的iframe页面时，可以直接从缓存中恢复显示，而无需重新加载iframe内容。

以上方法各有优缺点，具体选择哪种方式取决于应用场景和需求。

文章到此结束，如果本次分享的iframe切换和iframe是什么的问题解决了您的问题，那么我们由衷的感到高兴！

dedecms标签生成器，dedecms织梦仿工具网上说的vb是什么意思？vb是微博吗