使用iframe标签，可以将其他网站或者HTML页面嵌入到当前页面中。它可以创建一个包含另一网页的内联框架，将一个HTML文档插入到另一个HTML文档中。
1. 概述
- iframe 元素属于 inline frame （内联框架）的类别。
- iframe 元素可以嵌入一个 HTML 文档到另一个 HTML 文档中。
- 通过使用 iframe，Web 开发人员可以在一个窗口内显示来自不同服务器的内容，并且在不影响其他部分的情况下将其嵌入到自己的页面中。
2. iframe 的使用
iframe 标签的使用方法如下所示：
<iframe src="URL" frameborder="0" width="100%" height="600"></iframe>
其中，src 属性指定在 iframe 中显示的 HTML 页面的 URL。frameborder 属性指定是否显示 iframe 外框线。width 和 height 属性指定 iframe 的宽度和高度。
<iframe src="https://www.baidu.com/" frameborder="0" width="100%" height="600"></iframe>
将展示百度主页运行效果：
<iframe src="https://www.baidu.com/" frameborder="0" width="100%" height="600"></iframe>
3. iframe 的优缺点
3.1 优点
- 显示外部内容：通过使用 iframe，Web 开发人员可以将其他网站或者 HTML 页面插入到自己的页面中。
- 代码复用：通过使用 iframe，Web 开发人员可以重用现有的代码。
- 独立性：使用 iframe 可以使嵌入的页面保持独立。
3.2 缺点
- 速度较慢：iframe 引用外部页面会增加页面加载时间，降低页面的速度。
- 不便于搜索引擎优化：搜索引擎较难对 iframe 中的内容进行解析，可能会影响网站的 SEO。
- 可能带来安全问题：iframe 可以将一个网站嵌入到另一个网站中，容易产生一些安全问题。
4. iframe 的属性
4.1 src
src 属性确定 iframe 中显示的 HTML 页面的 URL。
<iframe src="http://www.example.com"></iframe>
当 iframe 页面的内容需要根据其他页面的事件来刷新时，可以在事件处理程序中修改 src 属性的值。
<button onclick=document.getElementById('myFrame').src='http://www.example.com'">刷新 iframe</button>
<iframe id="myFrame"></iframe>
4.2 frameborder
frameborder 属性确定是否为 iframe 显示框架线。
<iframe src="http://www.example.com" frameborder="1"></iframe>
4.3 width 和 height
width 和 height 属性分别确定 iframe 的宽度和高度。
<iframe src="http://www.example.com" frameborder="0" width="500" height="300"></iframe>
4.4 scrolling
scrolling 属性确定 iframe 中内容是否可以滚动。
<iframe src="http://www.example.com" frameborder="0" width="500" height="300" scrolling="no"></iframe>
5. iframe 的替代方案
在某些情况下，可以使用 iframe 的替代方案来显示外部内容。
5.1 跨域 AJAX
如果需要从不同的域获取数据，可以使用 AJAX 从服务器加载数据，并将结果插入到页面中。
javascript
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("myDiv")[xss_clean] = this.responseText;
}
};
xmlhttp.open("GET", "http://www.example.com", true);
xmlhttp.send();
5.2 object 元素
object 元素可以使用 data 属性引用另一个 HTML 文件，将其嵌入到页面中。
<object data="http://www.example.com"></object>
6. 总结
- iframe 元素可以将一个 HTML 页面嵌入到另一个 HTML 页面中。
- 使用 iframe 元素可以重用现有的代码，显示外部内容以及使嵌入的页面保持独立。
- 在某些情况下，可以使用 iframe 的替代方案来显示外部内容，例如跨域 AJAX 和 object 元素。