iframe 是一种 HTML 元素，它可以在一个网页中嵌入另一个网页的内容。iframe 的英文全称是 inline frame，意思是内联框架。iframe 的作用是让网页开发者可以在一个页面中展示多个不同来源的内容，而不需要重新加载整个页面。
iframe 的使用方法很简单，只需要在 HTML 代码中添加一个 <iframe> 标签，然后指定 src 属性为要嵌入的网页的地址，就可以实现内嵌框架的效果。例如，下面的代码就可以在一个网页中嵌入百度的首页：
<iframe src="https://www.baidu.com" width="800" height="600"></iframe>
除了 src 属性外，iframe 还有一些其他的属性，可以用来控制内嵌框架的样式和行为。
| 属性 | 值 | 描述 |
|---|---|---|
| width | pixels | 规定<iframe>的宽度 |
| height | pixels | 规定<iframe>的高度 |
| frameborder | 1 0 |
规定是否显示 <iframe> 周围的边框。HTML5 不支持 |
| src | URL | 规定在 <iframe> 中显示的文档的 URL。 |
| align | left right top middle bottom |
规定如何根据周围的元素来对齐 <iframe>。 HTML5 不支持。HTML 4.01 已废弃 |
| name | name | 规定 <iframe> 的名称。 |
| srcdoc | HTML_code | 规定页面中的 HTML 内容显示在 <iframe> 中。 |
| sandbox | “” allow-forms allow-same-origin allow-scripts allow-top-navigation |
对 <iframe> 的内容定义一系列额外的限制。 |
| scrolling | yes no auto |
规定是否在 <iframe> 中显示滚动条。HTML5 不支持 |
例如，width 和 height 属性可以设置 iframe 的宽度和高度；frameborder 属性可以设置 iframe 的边框是否显示；scrolling 属性可以设置 iframe 是否允许滚动；sandbox 属性可以设置 iframe 的安全限制等。
iframe的工作原理
iframe 的工作原理是基于浏览器的同源策略（same-origin policy）。同源策略是一种安全机制，它规定了不同来源的网页之间能否相互访问彼此的资源。同源策略的核心是判断两个网页是否具有相同的协议（protocol）、域名（domain）和端口（port）。如果这三个部分都相同，那么这两个网页就属于同一个源（origin），就可以互相访问；如果有任何一个部分不同，那么这两个网页就属于不同的源，就不能互相访问。
当我们使用 iframe 嵌入一个网页时，实际上是创建了一个新的浏览器窗口（window），并且加载了要嵌入的网页的内容。这个新的浏览器窗口和原来的浏览器窗口是独立的，它们有各自的源和文档对象模型（document object model，DOM）。因此，如果要嵌入的网页和原来的网页不属于同一个源，那么它们之间就不能直接交互，例如不能读取或修改对方的 DOM 元素、不能调用对方的 JavaScript 函数等。这样可以保护嵌入网页和原来网页的隐私和安全。
不同源页面如何通信
有时候我们可能需要让不同来源的网页之间能够通信，例如实现跨域登录、跨域表单提交等功能。这时候，我们就需要使用一些特殊的技术来绕过同源策略的限制。其中最常用的技术之一是 postMessage API。
postMessage API 可以让不同来源的网页之间通过发送和接收消息来进行通信。postMessage API 的使用方法如下：
① 在发送消息的网页中，调用 window.postMessage 方法，传入要发送的消息内容、目标窗口和目标窗口的源作为参数。例如：
window.postMessage('Hello', 'https://www.example.com');
② 在接收消息的网页中，监听 message 事件，获取 event.data 属性来获取消息内容、event.origin 属性来获取消息来源、event.source 属性来获取消息发送者。例如：
window.addEventListener('message', function(event) {
console.log(event.data); // Hello
console.log(event.origin); // https://www.example.com
console.log(event.source); // window object of the sender
});
通过 postMessage API，我们就可以实现不同来源的网页之间的通信，而不需要担心同源策略的限制。
iframe的优缺点
如果您需要在自己的网站中嵌入来自外部资源的元素，内嵌框架是一种很有用的方法。通过使用它们，用户可以继续浏览同一个网站，而不必跳转到另一个域名。这样一来，用户体验得到了大幅提升。此外，内嵌框架还具有许多技术优势。iframe 中的内容与其余页面内容相互独立加载，因此即使其他页面元素尚未加载完成时也可供用户查看。
然而，在实际应用中，内嵌框架变得越来越不重要了，并且存在着一些缺点。例如，在处理搜索引擎中包含的内置元素时会发生问题。这会影响SEO并可能导致排名下降。与 iframe 相关联的安全风险需引起更多注意力和警惕性。当您将外部内容插入到内部系统时可能存在被攻击或损坏系统等问题 。例如：iframe 中可能包含恶意插件、黑客攻击或网络钓鱼等安全隐患，请谨慎操作！
iframe 是一种常用的 HTML 元素，它可以让我们在一个网页中嵌入另一个网页的内容。iframe 的工作原理是基于浏览器的同源策略，它可以保护不同来源的网页之间的隐私和安全。如果我们需要让不同来源的网页之间进行通信，我们可以使用 postMessage API 等技术来绕过同源策略的限制。
往期精彩：
评论区