App下載

在前端中iframe跨域有幾種用法?常用跨域方法總結(jié)！

猿友 2021-08-03 16:24:52 瀏覽數(shù) (4514)
反饋

今天小編來和大家講講：“在前端中iframe跨域有幾種用法?”這個問題中有幾種常用的跨域方法，下面是小編在經(jīng)過各種資料總結(jié)的相關(guān)內(nèi)容，希望對大家有所幫助！

背景

隨著業(yè)務(wù)的發(fā)展，自然地會有一些公共的業(yè)務(wù)被抽離成為公共組件共各個項(xiàng)目使用。但是由于各個項(xiàng)目用到的技術(shù)棧都有所不同，所以這個公共組件就不能方便地被引用了。為解決這個問題，我們把這個組件寫成了單獨(dú)的頁面掛到一個域名下，其他項(xiàng)目采用iframe或者webview的方式去加載這個頁面，從而實(shí)現(xiàn)功能的簡單復(fù)用。

不過這過程中也產(chǎn)生了很多問題，單是跨域就會出現(xiàn)好幾次了。以下我將會介紹我遇到的跨域問題以及一些解決方法。

為什么會跨域

為了保證用戶信息的安全，95年的時候Netscape公司引進(jìn)了同源策略，里面的同源指的是三個相同：協(xié)議、域名、端口。

違反了同源策略就會出現(xiàn)跨域問題，主要表現(xiàn)為以下三方面：

  • 無法讀取cookie、localStorage、indexDB
  • DOM無法獲得
  • ajax請求無法發(fā)送

場景

最近在做一個需求，需要用iframe引入一個別人封裝好的類似視頻播放器的東西。iframe里面有一個全屏的按鈕，點(diǎn)擊后需要頁面讓iframe全屏，由于受到同源策略的限制，iframe無法告訴頁面全屏。

解決辦法

設(shè)置domain

document.domain作用是獲取/設(shè)置當(dāng)前文檔的原始域部分，同源策略會判斷兩個文檔的原始域是否相同來判斷是否跨域。這意味著只要把這個值設(shè)置成一樣就可以解決跨域問題了。
在此我將domain設(shè)置為一級域名的值，a頁面url為a.demo.com，a頁面中iframe引用的b頁面url為b.demo.com，具體設(shè)置為：

document.domain = 'demo.com'

設(shè)置完之后，在a頁面的window上掛載使iframe全屏的方法:

// a頁面
window.toggleFullScreen = () => {
    // do something
}

在b頁面上可以直接獲取到a頁面的window對象并直接調(diào)用:

// b頁面
window.parent.toggleFullScreen()

但是這個值的設(shè)置也有一定限制，只能設(shè)置為當(dāng)前文檔的上一級域或者是跟該文檔的URL的domain一致的值。如url為a.demo.com，那domain就只能設(shè)置為demo.com或者a.demo.com。因此，設(shè)置domain的方法只能用于解決主域相同而子域不同的情況。

使用中間頁面

我們還可以使用一個與a頁面同域名但不同路由的c頁面作為中間頁面，b頁面加載c頁面，c頁面調(diào)用a頁面的方法，從而實(shí)現(xiàn)b頁面調(diào)用a頁面的方法。具體操作如下：

在a頁面的node層新開一個路由，此路由加載一個c頁面作為中間頁面，c頁面的url為a.demo.com/c。c頁面只是一個簡單的html頁面，在window的onload事件上調(diào)用了a頁面的方法。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <script>
        window.onload = function () {
            parent.parent.toggleFullScreen();
        }
    </script>
</body>
</html>

由于c頁面和a頁面是符合同源策略的，所以可以避開跨域問題，執(zhí)行全屏的方法。

postmessage

window.postMessage方法可以安全地實(shí)現(xiàn)跨源通信，寫明目標(biāo)窗口的協(xié)議、主機(jī)地址或端口就可以發(fā)信息給它。

// b頁面
parent.postMessage(
    value,
    "http://a.demo.com"
);
// a頁面
window.addEventListener("message", function( event ) {
    if (event.origin !== 'http://b.demo.com') return;
    toggleFullScreen()
 });

為了安全，收到信息后要檢測下event.origin判斷是否要收信息的窗口發(fā)過來的。

總結(jié)

那么我們在文章中知道我們在使用以上這些方法之后我們就可以和iframe自由通信了，對于html5有感興趣的小伙伴們都可以在W3Cschool中進(jìn)行學(xué)習(xí)！


HTML5

1 人點(diǎn)贊