使用iframe怎么實(shí)現(xiàn)跨域-創(chuàng)新互聯(lián)

使用iframe怎么實(shí)現(xiàn)跨域？相信很多沒有經(jīng)驗(yàn)的人對(duì)此束手無策，為此本文總結(jié)了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個(gè)問題。

牡丹江網(wǎng)站制作公司哪家好，找創(chuàng)新互聯(lián)！從網(wǎng)頁設(shè)計(jì)、網(wǎng)站建設(shè)、微信開發(fā)、APP開發(fā)、響應(yīng)式網(wǎng)站設(shè)計(jì)等網(wǎng)站項(xiàng)目制作，到程序開發(fā)，運(yùn)營維護(hù)。創(chuàng)新互聯(lián)2013年至今到現(xiàn)在10年的時(shí)間，我們擁有了豐富的建站經(jīng)驗(yàn)和運(yùn)維經(jīng)驗(yàn)，來保證我們的工作的順利進(jìn)行。專注于網(wǎng)站建設(shè)就選創(chuàng)新互聯(lián)。

為什么會(huì)跨域

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

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

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

場(chǎng)景

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

解決辦法

設(shè)置domain

document.domain作用是獲取/設(shè)置當(dāng)前文檔的原始域部分，同源策略會(huì)判斷兩個(gè)文檔的原始域是否相同來判斷是否跨域。這意味著只要把這個(gè)值設(shè)置成一樣就可以解決跨域問題了。
在此我將domain設(shè)置為一級(jí)域名的值，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對(duì)象并直接調(diào)用

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

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

使用中間頁面

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

在a頁面的node層新開一個(gè)路由，此路由加載一個(gè)c頁面作為中間頁面，c頁面的url為a.demo.com/c。c頁面只是一個(gè)簡單的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()
 });

看完上述內(nèi)容，你們掌握使用iframe怎么實(shí)現(xiàn)跨域的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

本文名稱：使用iframe怎么實(shí)現(xiàn)跨域-創(chuàng)新互聯(lián)
文章來源：http://muchs.cn/article22/deepjc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站策劃、網(wǎng)站排名、標(biāo)簽優(yōu)化、網(wǎng)站改版、品牌網(wǎng)站設(shè)計(jì)、電子商務(wù)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容