Html-iframe

基本概念

iframe 做为html页面构成的基本元素之一，具有下面的特色

• 行内元素，默认宽度300px，高度150px
• 遵循流式布局（Flow content），位于body元素内
• 段落内容（Phrasing content），能够构成一个段落
• 嵌入资源（Embedded content），相似的还有video、img等
• 可交互（Interactive content），相似的还有button、textarea等
• 无子节点（Palpable content），iframe标签内部不嵌入任何元素，相反，div标签内就能够嵌入其余元素 关于html元素的构成的内容划分，这张图有一个很好的解释：

基本用法

iframe具有一些节点属性，以下：

• src：资源的地址
  • 绝对地址： 会加载对应地址的资源
  • 相对地址： 会加载当前页面，默认同源
  • about:blank： 会显示一个空白页
• srcdoc: iframe中须要render的内容，会覆盖掉对应的资源的内容

为何要这么作？
在iframe中，你能够加载不一样的内容，这类内容不会被浏览器再一次进行解释，举个例子来讲:
若是你想嵌入一些特别的符号，你就能够和sandbox联合使用（例子中的amp就是一个特殊符号）

<iframe
  sandbox
  srcdoc="<p>hey that's earl's table. <p>you should get earl&amp;amp;me on the next cover."
  >
</iframe>
复制代码

• name：给嵌入的文档资源起的一个名字
• sandbox：设置一些安全规则,规定了嵌入资源的一些行为,是否容许弹窗的行为

allow-forms, allow-modals, allow-orientation-lock, allow-pointer-lock, allow-popups, allow-popups-to-escape-sandbox, allow-presentation, allow-same-origin, allow-scripts, allow-top-navigation, and allow-top-navigation-by-user-activation.
复制代码

• allowfullScreen： 规定嵌入资源是否容许全屏,true为容许

好比你嵌入了一篇文章，这篇文章有全屏观看的操做
<iframe
  src="http://article...."
>
</iframe>

// http://article....

<div
  id='article'
  onclick={handleFullClick}
>
// 省略文章内容
</div>

script：
const handleFullClick = （） => {
  const article = document.getElementById('article');
  article.requestFullscreen();
}
复制代码

• allow，设置是否容许对应的特征策略

// 嵌入的iframe是否容许定位
<iframe src="https://maps.example.com/" allow="geolocation"></iframe>
复制代码

• referrerpolicy：是以枚举类型，设置了一些策略

enum ReferrerPolicy {
  "",
  "no-referrer",
  "no-referrer-when-downgrade",
  "same-origin",
  "origin",
  "strict-origin",
  "origin-when-cross-origin",
  "strict-origin-when-cross-origin",
  "unsafe-url"
};
复制代码

• contentDocument和contentWindow：返回的是iframe对应的document和window与当前页面的document和window对应。 ok，总结起来就是，iframe能够嵌入第三方资源，而且能够对第三方资源进行策略限制，为了安全，毕竟第三方，须要必定的兜底处理。

经常使用的业务场景

与iframe之间的通讯

iframe是被浏览器的当前页面以第三方资源的形式嵌入的，若是想两者之间实现通讯，就须要经过postMessage

otherWindow.postMessage(message, targetOrigin, [transfer]);
复制代码

• otherWindow: 窗口的引用，也就是你要向谁发送消息
• message：发送消息的内容，会被结构化克隆算法序列化
• targetOrigin：指定哪些窗口能够没收到消息
• transfer：transfer中的对象，发送以后，就会被垃圾回收，不存储任何内容

Example：

父窗口：
// 假定iframe的id = iframe
document.getElementById('iframe').contentWindow.postMessage('123'， '*');
子窗口：
Window.addEventListener('message', ({ data }) => {
    console.log('data');
    // 向父窗口发送消息
    if(window.parrent !== window.self) {
       window.parrent.postMessage('456', '*'); 
    }
})

复制代码

参考资料

• MDN-Iframe
• HTML标准-iframe