學習html——iframe

tomorrowwu 發布于2019-08-02 15:09 / 2828人閱讀

摘要：，總結起來就是，可以嵌入第三方資源，并且可以對第三方資源進行策略限制，為了安全，畢竟第三方，需要一定的兜底處理。

基本概念

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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