学习html——iframe

tomorrowwu 发布于2019-08-02 15:09 / 2808人阅读

摘要：，总结起来就是，可以嵌入第三方资源，并且可以对第三方资源进行策略限制，为了安全，毕竟第三方，需要一定的兜底处理。

基本概念

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就是一个特殊符号）

you should get earl&amp;me on the next cover."
  >

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为允许

比如你嵌入了一篇文章，这篇文章有全屏观看的操作



// http://article....


// 省略文章内容


script：
const handleFullClick = （） => {
  const article = document.getElementById("article");
  article.requestFullscreen();
}

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

// 嵌入的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

云服务器 GPU云服务器 iframe加载html ifram iframe webrtc iframe

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/53933.html

记前端hybrid学习总结

摘要：什么是即混合即前端和客户端的混合开发需前端开发人员和客户端开发人员配合完成某些环节可能涉及到端存在价值可以快速迭代更新无需审核体验流畅和体验基本类似减少开发和沟通成本双端公用一套代码是中的一个组件中可以有也可以没有用于加载页面即一个小型的浏什么是hybrid hybrid即混合,即前端和客户端的混合开发需前端开发人员和客户端开发人员配合完成某些环节可能涉及到server端 h...

CodeSheep 2019-08-23 15:41 评论0 收藏0
记前端hybrid学习总结

摘要：什么是即混合即前端和客户端的混合开发需前端开发人员和客户端开发人员配合完成某些环节可能涉及到端存在价值可以快速迭代更新无需审核体验流畅和体验基本类似减少开发和沟通成本双端公用一套代码是中的一个组件中可以有也可以没有用于加载页面即一个小型的浏什么是hybrid hybrid即混合,即前端和客户端的混合开发需前端开发人员和客户端开发人员配合完成某些环节可能涉及到server端 h...

yimo 2019-08-02 14:25 评论0 收藏0
同源策略和跨域知识点学习

摘要：同源策略在这之前需要先熟悉一下这个概念，同源指请求协议相同，主机名相同，端口相同，涉及安全的策略。同源策略主要限制的是不同源之间的交互操作，对于跨域内嵌的资源不受该策略限制。问题起因是在使用weibo api的时候，发现有一个报错。weibo api是https协议，我本地是模拟的回调域名，然后进行数据通信，本地http协议，于是乎就报错了。出于对postMessage的不是很熟悉，...

baiy 2019-08-20 12:08 评论0 收藏0