深入理解iframe

来源:https://www.cnblogs.com/Leophen/archive/2019/08/24/11403800.html
-Advertisement-
Play Games

一、什麼是 iframe iframe 用於在頁面內顯示頁面，使用 <iframe> 會創建包含另外一個文檔的內聯框架（即行內框架） 二、iframe 的常用屬性 1、width 定義 iframe 的寬度 2、height 定義 iframe 的高度 3、name 規定 iframe 的名稱 4、 ...


一、什麼是 iframe

iframe 用於在頁面內顯示頁面，使用 <iframe> 會創建包含另外一個文檔的內聯框架（即行內框架）

<iframe src="URL"></iframe>

 

 

二、iframe 的常用屬性

 

1、width

定義 iframe 的寬度

 

2、height

定義 iframe 的高度

 

3、name

規定 iframe 的名稱

 

4、frameborder

規定是否顯示邊框，值為 0（不顯示）和 1（顯示）

 

5、scrolling

規定是否在 iframe 中顯示滾動條，值為 yes、no、auto

 

6、src

設置 iframe 的地址（頁面/圖片）

 

7、srcdoc

用來替換 iframe 中 html、body 里的內容（ IE 不支持）

 

8、sandbox

對 iframe 進行內容限制，值為

  • allow-forms
  • allow-same-origin
  • allow-scripts
  • allow-top-navigation
  • ...

支持 IE10+

 

 

三、獲取 iframe 中的內容

 

1、獲取 iframe

var iframe = document.getElementById("iframe1");

 

2、iframe.contentWindow

獲取iframe的window對象

var iwindow = iframe.contentWindow;


3、iframe.contentDocument

獲取iframe的document對象

var idoc = iwindow.document;

 

4、window.frames['name']

這種方法同樣可以獲取 window 對象

var iwindow = window.frames['name'];

 

 

四、在 iframe 中獲取父級內容

 

1、window.parent

獲取上一級 window 對象（ iframe 可以有多層使用）

 

2、window.top

獲取最頂級容器的 window 對象，即打開頁面時的文檔

 

3、window.self

返回自身 window 對象

 

 

五、iframe 的長輪詢 

 

長輪詢就是在 ajax 的 readyState = 4的時，再次執行原函數。

這裡使用 iframe 也是一樣，非同步創建 iframe，然後 reload

var iframeCon = docuemnt.querySelector('#container'),
        text; //傳遞的信息
    var iframe = document.createElement('iframe'),
        iframe.id = "frame",
        iframe.style = "display:none;",
        iframe.name="polling",
        iframe.src="target.html";
    iframeCon.appendChild(iframe);
    iframe.onload= function(){
        var iloc = iframe.contentWindow.location,
            idoc  = iframe.contentDocument;
        setTimeout(function(){
            text = idoc.getElementsByTagName('body')[0].textContent;
            console.log(text);
            iloc.reload(); //刷新頁面,再次獲取信息，並且會觸發onload函數
        },2000);
    }

這樣就可以實現 ajax 長輪詢的效果。 當然，這裡只是使用 reload 進行獲取，也可以添加 iframe 和刪除 iframe 的方式，進行發送信息，這些都是根據具體場景應用的。

另外在 iframe 中還可以實現非同步載入 js 文件，不過，iframe 和主頁是共用連接池的，現在基本上都被 XHR 和 hard calllback 取締了

 

 

六、自適應 iframe - 廣告嵌入

廣告通常與原文無關，如果直接在某個 div 下嵌套，會造成網頁佈局的紊亂，而且還需要引入額外的 css 和 js 文件，極大降低了網頁的安全性。 這些所有的弊端，都可以使用iframe進行解決。 
可以將 iframe 理解為一個沙盒，裡面的內容能夠被 top window 完全控制，而且，主頁的 css 樣式不會入侵 iframe 裡面的樣式

預設情況下，iframe 會自帶滾動條，不會全屏，如果你想自適應iframe的話：


1、去掉滾動條

<iframe src="./iframe1.html" id="iframe1" scrolling="no"></iframe>

 

2、設置 iframe 的高為 body 的高

var iwindow = iframe.contentWindow;
var idoc = iwindow.document;
iframe.height = idoc.body.offsetHeight;

另外，還可以添加其它的裝飾屬性：

屬性效果
allowtransparency true or false
是否允許iframe設置為透明，預設為false
allowfullscreen true or false
是否允許iframe全屏，預設為false

 

 

 

 

 

 

七、iframe 的安全性

 

1、防嵌套網頁

iframe 享有 click 優先權，當有人在偽造的主頁中進行點擊的話，如果點在 iframe 上，則會預設是在操作 iframe 的頁面。 所以，釣魚網站就是使用這個技術，通過誘導用戶進行點擊。
為了防止網站被釣魚，可以使用 window.top 來防止你的網頁被 iframe，即限定你的網頁不能被嵌套在任何網頁內：

//iframe2.html
if(window != window.top){
    window.top.location.href = correctURL;
}

 

2、X-Frame-Options

X-Frame-Options 是一個相應頭，主要是描述伺服器的網頁資源的 iframe 許可權，有3個選項：

  1. DENY：當前頁面不能被嵌套 iframe 里，即便是在相同功能變數名稱的頁面中嵌套也不允許，也不允許網頁中有嵌套 iframe
  2. SAMEORIGIN：iframe 頁面的地址只能為同源功能變數名稱下的頁面
  3. ALLOW-FROM：可以在指定的 origin url 的 iframe 中載入

簡單實例：

X-Frame-Options: DENY
拒絕任何iframe的嵌套請求

X-Frame-Options: SAMEORIGIN
只允許同源請求，例如網頁為 foo.com/123.php，則 foo.com 底下的所有網頁可以嵌入此網頁，但是 foo.com 以外的網頁不能嵌入

X-Frame-Options: ALLOW-FROM http://s3131212.com
只允許指定網頁的iframe請求，不過相容性較差Chrome不支持

X-Frame-Options 其實就是將前端 js 對 iframe 的把控交給伺服器來進行處理

//js
if(window != window.top){
    window.top.location.href = window.location.href;
}
//等價於
X-Frame-Options: DENY

//js
if (top.location.hostname != window.location.hostname) { 
　　　　top.location.href =window.location.href;
}
//等價於
X-Frame-Options: SAMEORIGIN

該屬性是對頁面的 iframe 進行一個主要限制，不過，涉及 iframe 的 header 可不止這一個，另外還有一個 Content Security Policy，同樣也可以對 iframe 進行限制

 

3、sandbox

sandbox 就是用來給指定 iframe 設置一個沙盒模型限制 iframe 的更多許可權
sandbox 是 h5 的一個新屬性，IE10+支持
啟用方式就是使用 sandbox 屬性：

<iframe sandbox src=”...”></iframe>

這樣會對iframe頁面進行一系列的限制:

  1. script 腳本不能執行
  2. 不能發送 ajax 請求
  3. 不能使用本地存儲，即 localStorage，cookie 等
  4. 不能創建新的彈窗和 window
  5. 不能發送表單
  6. 不能載入額外插件比如 flash 等

同時可以放寬一點許可權。在 sandbox 裡面進行一些簡單設置

<iframe sandbox=”allow-same-origin” src=”...”></iframe>

常用的配置項有:

配置效果
allow-forms 允許進行提交表單
allow-scripts 運行執行腳本
allow-same-origin 允許同域請求，比如 ajax，storage
allow-top-navigation 允許 iframe 能夠主導 window.top 進行頁面跳轉
allow-popups 允許 iframe 中彈出新視窗，比如 window.open，target="_blank"
allow-pointer-lock 在 iframe 中可以鎖定滑鼠，主要和滑鼠鎖定有關

 

 

 

 

 

 

可以通過在 sandbox 里，添加允許進行的許可權.

<iframe sandbox=”allow-forms allow-same-origin allow-scripts” src=”...”></iframe>

這樣可以保證 js 腳本的執行，但是禁止 iframe 里的 javascript 執行 top.location = self.location

 

 

八、iframe 的局限

 

1、創建比一般的 DOM 元素慢了 1-2 個數量級

iframe 的創建比其它包括 scripts 和 css 的 DOM 元素的創建慢了 1-2 個數量級，使用 iframe 的頁面一般不會包含太多 iframe，所以創建 DOM 節點所花費的時間不會占很大的比重。但帶來一些其它的問題：onload 事件以及連接池（connection pool）

 

2、阻塞頁面載入

及時觸發 window 的 onload 事件是非常重要的。onload 事件觸發使瀏覽器的 “忙” 指示器停止，告訴用戶當前網頁已經載入完畢。當 onload 事件載入延遲後，它給用戶的感覺就是這個網頁非常慢。

window 的 onload 事件需要在所有 iframe 載入完畢後（包含裡面的元素）才會觸發。在 Safari 和 Chrome 里，通過 JavaScript 動態設置 iframe 的 SRC 可以避免這種阻塞情況

 

3、唯一的連接池

瀏覽器只能開少量的連接到 web 伺服器。比較老的瀏覽器，包含 Internet Explorer 6 & 7 和 Firefox 2，只能對一個功能變數名稱（hostname）同時打開兩個連接。這個數量的限制在新版本的瀏覽器中有所提高。Safari 3+ 和 Opera 9+ 可同時對一個功能變數名稱打開 4 個連接，Chrome 1+, IE 8 以及 Firefox 3 可以同時打開 6 個

絕大部分瀏覽器，主頁面和其中的 iframe 是共用這些連接的。這意味著 iframe 在載入資源時可能用光了所有的可用連接，從而阻塞了主頁面資源的載入。如果 iframe 中的內容比主頁面的內容更重要，這當然是很好的。但通常情況下，iframe 里的內容是沒有主頁面的內容重要的。這時 iframe 中用光了可用的連接就是不值得的了。一種解決辦法是，在主頁面上重要的元素載入完畢後，再動態設置 iframe 的 SRC。

 

4、不利於 SEO

搜索引擎的檢索程式無法解讀 iframe。另外，iframe 本身不是動態語言，樣式和腳本都需要額外導入。綜上，iframe 應謹慎使用。

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 黑客帝國背景
    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name= ...
  • 關於DOM事件流、DOM0級事件與DOM2級事件
    一、DOM 事件模型 DOM 事件模型包括捕獲和冒泡，捕獲是從上往下到達目標元素，冒泡是從當前元素，也就是目標元素往上到 window 二、流 流的概念，在現今的 JavaScript 中隨處可見。比如說 React 中的單向數據流，Node 中的流，還有 DOM 事件流，都是流的一種生動體現。至於 ...
  • jsp+servlet+mysql簡單實現用戶登陸註冊
    原碼，項目中遇到的錯誤，解決方法，文章最後有鏈接可以獲取 項目簡介 功能描述 登陸，註冊，用戶一覽表，修改，刪除，添加，模糊查詢和精確查詢 採用的技術及環境 JSP：前端的信息展示 Servlet：業務邏輯功能實現，及調用資料庫的實現數據處理和傳輸 MySQL：用來實現數據存儲 利用Eclipse來 ...
  • 使用base64編碼把背景添加到CSS文件中
    最近博客背景圖片的外鏈掛了，沒辦法，只好另找辦法。 在博客園後臺，有一個“文件”菜單，可以上傳自己的文件，我就打算把圖片傳到裡面。但卻發現了一個很反人性的設置：不允許上傳jpg，png文件，允許上傳的只有bmp，gif這樣的圖片文件。bmp文件太大，載入都要好幾秒，gif文件質量太差，只有256色， ...
  • 複習0824js
    編程思想： 面向過程：凡事親力親為，所有事情的過程都要清楚，註重的是過程。 面向對象：提出需求，找到對象，對象解決這個問題，我們要結果，註重的是結果。 面向對象的特性：封裝，繼承，多態； JS： 是一門解釋性語言，是一門腳本語言，是一門弱類型語言，是一門基於對象的語言，是一門動態類型的語言。 對象： ...
  • React Native實踐總結一
    一、React的世界觀1、通過改變state來改變視圖視圖不用考慮如何改變自己，把state畫出來即可。2、變數不可變通過創建一個新的state來更改state，使得變更可追蹤，不容易因為其他部分修改state導致不可預測的錯誤3、結構與樣式分離參考了CSS的做法，RN的style機制使得代碼更清晰 ...
  • 數組和字元串的方法整合
    js中的數組和字元串有點類似，不是說本質上，而是在遍歷，獲取時的類似。從標識來說，可以一眼看出那個是數組，那個是字元串；但在使用遍歷時，會不經意的將兩者混淆，導致方法用錯。同時兩者的方法又有好幾個相同的，但需註意語義，以及有些方法是不會對原數組產生影響的。以下是我整理的一些關於數組和字元串的一些方法 ...
  • CSS3中的彈性盒子模型
    介紹 在css2當中，存在標準模式下的盒子模型和IE下的怪異盒子模型。這兩種方案表示的是一種盒子模型的渲染模式。而在css3當中，新增加了彈性盒子模型，彈性盒子模型是一種新增加的強大的、靈活的佈局方案。彈性盒子模型是css3中新提出的一種佈局方案。是一種為了應對針對不同屏幕寬度不同設備的一整套新的布 ...
一周排行
    -Advertisement-
    Play Games
  • GoF之工廠模式
    GoF之工廠模式 @目錄GoF之工廠模式每博一文案1. 簡單說明“23種設計模式”1.2 介紹工廠模式的三種形態1.3 簡單工廠模式（靜態工廠模式）1.3.1 簡單工廠模式的優缺點:1.4 工廠方法模式1.4.1 工廠方法模式的優缺點:1.5 抽象工廠模式1.6 抽象工廠模式的優缺點：2. 總結:3 ...
  • dotnet C# 簡單的追加文件夾到 ZipArchive 壓縮文件的方法
    新改進提供的Taurus Rpc 功能，可以簡化微服務間的調用，同時可以不用再手動輸出模塊名稱，或調用路徑，包括負載均衡，這一切，由框架實現並提供了。新的Taurus Rpc 功能，將使得服務間的調用，更加輕鬆、簡約、高效。 ...
  • Elasticsearch 系列（六）- ES數據同步和ES集群
    本章將和大家分享ES的數據同步方案和ES集群相關知識。廢話不多說，下麵我們直接進入主題。 一、ES數據同步 1、數據同步問題 Elasticsearch中的酒店數據來自於mysql資料庫，因此mysql數據發生改變時，Elasticsearch也必須跟著改變，這個就是Elasticsearch與my ...
  • 自動化測試數據生成：Asp.Net Core單元測試利器AutoFixture詳解
    引言 在我們之前的文章中介紹過使用Bogus生成模擬測試數據，今天來講解一下功能更加強大自動生成測試數據的工具的庫"AutoFixture"。 什麼是AutoFixture? AutoFixture 是一個針對 .NET 的開源庫，旨在最大程度地減少單元測試中的“安排（Arrange）”階段，以提高 ...
  • .NET Emit 入門教程：第七部分：實戰項目1：將 DbDataReader 轉實體
    經過前面幾個部分學習，相信學過的同學已經能夠掌握 .NET Emit 這種中間語言，並能使得它來編寫一些應用，以提高程式的性能。隨著 IL 指令篇的結束，本系列也已經接近尾聲，在這接近結束的最後，會提供幾個可供直接使用的示例，以供大伙分析或使用在項目中。 ...
  • Windows下綁定線程到指定的CPU核心
    當從不同來源導入Excel數據時，可能存在重覆的記錄。為了確保數據的準確性，通常需要刪除這些重覆的行。手動查找並刪除可能會非常耗費時間，而通過編程腳本則可以實現在短時間內處理大量數據。本文將提供一個使用C# 快速查找並刪除Excel重覆項的免費解決方案。 以下是實現步驟： 1. 首先安裝免費.NET ...
  • mORMot 1.18 第07章 簡單的讀寫操作
    C++ 異常處理 C++ 異常處理機制允許程式在運行時處理錯誤或意外情況。它提供了捕獲和處理錯誤的一種結構化方式，使程式更加健壯和可靠。 異常處理的基本概念： 異常: 程式在運行時發生的錯誤或意外情況。 拋出異常: 使用 throw 關鍵字將異常傳遞給調用堆棧。 捕獲異常: 使用 try-catch ...
  • mORMot 1.18 第06章 概念
    優秀且經驗豐富的Java開發人員的特征之一是對API的廣泛瞭解，包括JDK和第三方庫。 我花了很多時間來學習API，尤其是在閱讀了Effective Java 3rd Edition之後 ，Joshua Bloch建議在Java 3rd Edition中使用現有的API進行開發，而不是為常見的東西編 ...
  • php 開發規範
    框架 · 使用laravel框架，原因：tp的框架路由和orm沒有laravel好用 · 使用強制路由，方便介面多時，分多版本，分文件夾等操作 介面 · 介面開發註意欄位類型，欄位是int，查詢成功失敗都要返回int（對接java等強類型語言方便） · 查詢介面用GET、其他用POST 代碼 · 所 ...
  • 2024 年 4 月 28 日 周日 晴 熱（1253 字）
    正文 下午找企業的人去鎮上做貸後。 車上聽同事跟那個司機對罵，火星子都快出來了。司機跟那同事更熟一些，連我在內一共就三個人，同事那一手指桑罵槐給我都聽愣了。司機也是老社會人了，馬上聽出來了，為那個無辜的企業經辦人辯護，實際上是為自己辯護。 “這個事情你不能怪企業。”“但他們總不能讓銀行的人全權負責， ...
所有分類