資訊專欄INFORMATION COLUMN
摘要：，總結(jié)起來(lái)就是，可以嵌入第三方資源，并且可以對(duì)第三方資源進(jìn)行策略限制，為了安全，畢竟第三方，需要一定的兜底處理。
基本概念
iframe 作為html頁(yè)面構(gòu)成的基本元素之一，具備下面的特點(diǎn)
行內(nèi)元素，默認(rèn)寬度300px，高度150px
遵循流式布局（Flow content），位于body元素內(nèi)
段落內(nèi)容（Phrasing content），可以構(gòu)成一個(gè)段落
嵌入資源（Embedded content），類似的還有video、img等
可交互（Interactive content），類似的還有button、textarea等
無(wú)子節(jié)點(diǎn)（Palpable content），iframe標(biāo)簽內(nèi)部不嵌入任何元素，相反，div標(biāo)簽內(nèi)就可以嵌入其他元素
關(guān)于html元素的構(gòu)成的內(nèi)容劃分，這張圖有一個(gè)很好的解釋：
基本用法iframe具備一些節(jié)點(diǎn)屬性，如下：
src：資源的地址
絕對(duì)地址： 會(huì)加載對(duì)應(yīng)地址的資源
相對(duì)地址： 會(huì)加載當(dāng)前頁(yè)面，默認(rèn)同源
about:blank： 會(huì)顯示一個(gè)空白頁(yè)
srcdoc: iframe中需要render的內(nèi)容，會(huì)覆蓋掉對(duì)應(yīng)的資源的內(nèi)容
為什么要這么做？ 在iframe中，你可以加載不同的內(nèi)容，這類內(nèi)容不會(huì)被瀏覽器再一次進(jìn)行解釋，舉個(gè)例子來(lái)說(shuō): 如果你想嵌入一些特別的符號(hào)，你就可以和sandbox聯(lián)合使用（例子中的amp就是一個(gè)特殊符號(hào)）
name：給嵌入的文檔資源起的一個(gè)名字
sandbox：設(shè)置一些安全規(guī)則,規(guī)定了嵌入資源的一些行為,是否允許彈窗的行為
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： 規(guī)定嵌入資源是否允許全屏,true為允許
比如你嵌入了一篇文章，這篇文章有全屏觀看的操作 // http://article....// 省略文章內(nèi)容script： const handleFullClick = （） => { const article = document.getElementById("article"); article.requestFullscreen(); }
allow，設(shè)置是否允許對(duì)應(yīng)的特征策略
// 嵌入的iframe是否允許定位
referrerpolicy：是以枚舉類型，設(shè)置了一些策略
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對(duì)應(yīng)的document和window與當(dāng)前頁(yè)面的document和window對(duì)應(yīng)。
ok，總結(jié)起來(lái)就是，iframe可以嵌入第三方資源，并且可以對(duì)第三方資源進(jìn)行策略限制，為了安全，畢竟第三方，需要一定的兜底處理。
常用的業(yè)務(wù)場(chǎng)景 與iframe之間的通信iframe是被瀏覽器的當(dāng)前頁(yè)面以第三方資源的形式嵌入的，如果想二者之間實(shí)現(xiàn)通信，就需要通過(guò)postMessage
otherWindow.postMessage(message, targetOrigin, [transfer]);
otherWindow: 窗口的引用，也就是你要向誰(shuí)發(fā)送消息
message：發(fā)送消息的內(nèi)容，會(huì)被結(jié)構(gòu)化克隆算法序列化
targetOrigin：指定哪些窗口可以沒(méi)收到消息
transfer：transfer中的對(duì)象，發(fā)送之后，就會(huì)被垃圾回收，不存儲(chǔ)任何內(nèi)容
Example：
父窗口：
// 假定iframe的id = iframe
document.getElementById("iframe").contentWindow.postMessage("123"， "*");
子窗口：
Window.addEventListener("message", ({ data }) => {
console.log("data");
// 向父窗口發(fā)送消息
if(window.parrent !== window.self) {
window.parrent.postMessage("456", "*");
}
})
參考資料
MDN-Iframe
HTML標(biāo)準(zhǔn)-iframe
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/53933.html
摘要：什么是即混合即前端和客戶端的混合開(kāi)發(fā)需前端開(kāi)發(fā)人員和客戶端開(kāi)發(fā)人員配合完成某些環(huán)節(jié)可能涉及到端存在價(jià)值可以快速迭代更新無(wú)需審核體驗(yàn)流暢和體驗(yàn)基本類似減少開(kāi)發(fā)和溝通成本雙端公用一套代碼是中的一個(gè)組件中可以有也可以沒(méi)有用于加載頁(yè)面即一個(gè)小型的瀏 什么是hybrid hybrid即混合,即前端和客戶端的混合開(kāi)發(fā) 需前端開(kāi)發(fā)人員和客戶端開(kāi)發(fā)人員配合完成 某些環(huán)節(jié)可能涉及到server端 h...
摘要：什么是即混合即前端和客戶端的混合開(kāi)發(fā)需前端開(kāi)發(fā)人員和客戶端開(kāi)發(fā)人員配合完成某些環(huán)節(jié)可能涉及到端存在價(jià)值可以快速迭代更新無(wú)需審核體驗(yàn)流暢和體驗(yàn)基本類似減少開(kāi)發(fā)和溝通成本雙端公用一套代碼是中的一個(gè)組件中可以有也可以沒(méi)有用于加載頁(yè)面即一個(gè)小型的瀏 什么是hybrid hybrid即混合,即前端和客戶端的混合開(kāi)發(fā) 需前端開(kāi)發(fā)人員和客戶端開(kāi)發(fā)人員配合完成 某些環(huán)節(jié)可能涉及到server端 h...
摘要：同源策略在這之前需要先熟悉一下這個(gè)概念，同源指請(qǐng)求協(xié)議相同，主機(jī)名相同，端口相同，涉及安全的策略。同源策略主要限制的是不同源之間的交互操作，對(duì)于跨域內(nèi)嵌的資源不受該策略限制。 問(wèn)題起因是在使用weibo api的時(shí)候，發(fā)現(xiàn)有一個(gè)報(bào)錯(cuò)。weibo api是https協(xié)議，我本地是模擬的回調(diào)域名，然后進(jìn)行數(shù)據(jù)通信，本地http協(xié)議，于是乎就報(bào)錯(cuò)了。出于對(duì)postMessage的不是很熟悉，...
閱讀 1429·2021-11-22 09:34
閱讀 1390·2021-09-22 14:57
閱讀 3425·2021-09-10 10:50
閱讀 1418·2019-08-30 15:54
閱讀 3704·2019-08-29 17:02
閱讀 3485·2019-08-29 12:54
閱讀 2628·2019-08-27 10:57
閱讀 3328·2019-08-26 12:24
