前端iframe iframe标签的优点
大家好，前端iframe相信很多的网友都不是很明白，包括iframe标签的优点也是一样，不过没有关系，接下来就来为大家分享关于前端iframe和iframe标签的优点的一些知识点，大家可以关注收藏，免得下次来找不到哦，下面我们开始吧！
为什么前端尽量少用iframe
网站设计使用Iframe缺点一：得罪搜索引擎“蜘蛛”
网站设计使用Iframe最大的弊端就是得罪了搜索引擎的“蜘蛛”，当蜘蛛访问Iframe布局的网站时，它只会看到框架，框架里面的内容是看不到的，也就无法按照顺序解读页面，会认为这个网站是个死站点，以后绝不会再来了。
网站设计使用Iframe缺点二：链接导航问题
使用Iframe布局必须保证正确设定导航链接，否则，被链接的页面呈现在导航框架内，让浏览者无法退后，只能离开。
网站设计使用Iframe缺点三：分散访问者注意力
Iframe布局的网站除了有时会让浏览者迷惑，分散注意力之外，还会给浏览者带来浏览麻烦，滚动条会使Iframe布局混乱，让浏览者望而止步。
所以iframe通常会用在后台页面的构建山
怎么让iframe自适应高度
什么是自适应高度吧。所谓iframe自适应高度，就是，基于界面美观和交互的考虑，隐藏了iframe的border和scrollbar，让人看不出它是个iframe。如果iframe始终调用同一个固定高度的页面，我们直接写死iframe高度就可以了。而如果iframe要切换页面，或者被包含页面要做DOM动态操作，这时候，就需要程序去同步iframe高度和被包含页的实际高度了。
顺便说下，iframe在迫不得已的时候才去用，它会给前端开发带来太多的麻烦。
传统做法大致有两个：
方法一，在每个被包含页在本身内容加载完毕之后，执行JS取得本页面的高度，然后去同步父页面的iframe高度。
方法二，在主页面iframe的onload事件中执行JS，去取得被包含页的高度内容，然后去同步高度。
在代码维护角度考虑，方法二是优于方法一的，因为方法一，每个被包含页都要去引入一段相同的代码来做这个事情，创建了好多副本。
如果只考虑FX和IE，并且，iframe里面内容也不进行DOM操作，那仍然可以用最简单最方便的传统处理方式：
<iframe id="frame_content" src="iframe_b.html" scrolling="no" frameborder="0" onload="this.height=this.contentWindow.document.documentElement.scrollHeight"></iframe>
两个方法都只处理了静的东西，就是只在内容加载的时候执行，如果JS去操作DOM引起的高度变化，都不太方便。
如果在主窗口做一个Interval，不停的来获取被包含页的高度，然后做同步，是不是即方便，又解决了JS操作DOM的问题了呢？答案是肯定的。
Demo页面：主页面 iframe_a.html，被包含页面 iframe_b.htm和 iframe_c.html
主页面代码示例：
<iframe id="frame_content" src="iframe_b.html" scrolling="no" frameborder="0"></iframe><script type="text/javascript">
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 style="height:160px;position:relative">
<div id="overlay" style="position:absolute;width:280px;height:280px;display:none;"></div>
</div>
<script type="text/javascript">
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里，也没有去做这个事情。如果读者有更好的方法，请告诉我。
这是最终的主页面的代码：
<iframe id="frame_content" src="iframe_b.html" scrolling="no" frameborder="0" onload="this.height=100"></iframe>
<script type="text/javascript">
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有什么弊端
iframe在网页开发中虽有一定便利性，但存在以下弊端：
加载速度慢
iframe需独立加载嵌入的网页内容，这会显著增加整体页面的加载时间。若嵌入的网页体积较大或网络带宽有限，用户需等待更长时间才能看到完整页面，直接影响用户体验。例如，在移动端或低速网络环境下，iframe的延迟加载可能导致页面布局错乱或功能失效。
解决方法：采用异步加载技术（如JavaScript动态创建iframe）或延迟加载（在主页面加载完成后触发iframe加载），以减少对初始渲染的阻塞。
对搜索引擎不友好
搜索引擎爬虫通常无法有效抓取iframe内的内容，导致嵌入的网页难以被索引。这会使依赖SEO的页面（如电商产品页、新闻文章）失去流量入口，降低曝光率。
解决方法：在iframe外部提供替代文本或关键内容摘要，或改用AJAX动态加载内容，确保搜索引擎能解析完整页面信息。
安全性问题
iframe可能被恶意利用，例如通过钓鱼攻击伪造登录界面，或通过点击劫持诱导用户触发隐藏操作。此外，跨域iframe可能泄露用户隐私数据（如Cookie）。
解决方法：服务器端设置X-Frame-Options头部为DENY或SAMEORIGIN，禁止跨域嵌入；或通过CSP（内容安全策略）限制iframe来源。同时，前端需验证嵌入域名的合法性，避免加载不可信内容。
兼容性问题
不同浏览器对iframe的支持存在差异，例如旧版IE可能无法正确渲染iframe内的CSS或JavaScript，或对高度/宽度属性解析不一致，导致布局错乱。
解决方法：开发阶段需进行多浏览器测试，针对兼容性问题调整代码；若问题严重，可考虑用<div>+AJAX或Web Components等现代技术替代iframe。
iframe的弊端集中于性能、SEO、安全及兼容性领域。开发者需权衡其使用场景，优先通过技术手段（如异步加载、CSP策略）缓解问题，或在必要时选择更安全的替代方案。
前端iframe的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于iframe标签的优点、前端iframe的信息别忘了在本站进行查找哦。