HTML5废弃的iframe有哪些缺点？

最新推荐文章于 2024-08-30 10:00:00 发布

转载最新推荐文章于 2024-08-30 10:00:00 发布 · 3.4k 阅读

前端学习笔记专栏收录该内容

33 篇文章

订阅专栏

本文介绍了iframe可能带来的两个主要问题：阻塞主页面的onload事件及影响页面并行加载效率，并提供了一种通过JavaScript动态设置iframe src属性的解决方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1：iframe会阻塞主页面的onload事件
2：iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。
使用iframe之前需要考虑这两个缺点。如果需要使用iframe，最好是通过javascript动态给iframe添加src属性值，这样可以可以绕开以上两个问题。

如下案例：

<!DOCTYPE html>
<html>
<head>
<script>
function changeSrc()
{
    document.getElementById("myframe").src="http://google.com";
}
</script>
</head>
<body>
<iframe id="myframe" src="http.www.baidu.com">
<p>您的浏览器不支持iframe。</p>
</iframe>
<br><br>
    <input type="button" onclick="changeSrc()" value="改变地址">
</body>
</html>