溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇“web前端中iframe跨域的方法有哪些”文章的知識點大部分人都不太理解，所以小編給大家總結了以下內容，內容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“web前端中iframe跨域的方法有哪些”文章吧。
為什么會跨域
為了保證用戶信息的安全，95年的時候Netscape公司引進了同源策略，里面的同源指的是三個相同：協(xié)議、域名、端口。
違反了同源策略就會出現(xiàn)跨域問題，主要表現(xiàn)為以下三方面：
無法讀取cookie、localStorage、indexDB
DOM無法獲得
ajax請求無法發(fā)送
場景
最近在做一個需求，需要用iframe引入一個別人封裝好的類似視頻播放器的東西。iframe里面有一個全屏的按鈕，點擊后需要頁面讓iframe全屏，由于受到同源策略的限制，iframe無法告訴頁面全屏。
解決辦法
設置domain
document.domain作用是獲取/設置當前文檔的原始域部分，同源策略會判斷兩個文檔的原始域是否相同來判斷是否跨域。這意味著只要把這個值設置成一樣就可以解決跨域問題了。
在此我將domain設置為一級域名的值，a頁面url為a.demo.com，a頁面中iframe引用的b頁面url為b.demo.com，具體設置為：
document.domain = 'demo.com'設置完之后，在a頁面的window上掛載使iframe全屏的方法:
// a頁面
window.toggleFullScreen = () => {
// do something
}在b頁面上可以直接獲取到a頁面的window對象并直接調用:
// b頁面
window.parent.toggleFullScreen()但是這個值的設置也有一定限制，只能設置為當前文檔的上一級域或者是跟該文檔的URL的domain一致的值。如url為a.demo.com，那domain就只能設置為demo.com或者a.demo.com。因此，設置domain的方法只能用于解決主域相同而子域不同的情況。
使用中間頁面
我們還可以使用一個與a頁面同域名但不同路由的c頁面作為中間頁面，b頁面加載c頁面，c頁面調用a頁面的方法，從而實現(xiàn)b頁面調用a頁面的方法。具體操作如下：
在a頁面的node層新開一個路由，此路由加載一個c頁面作為中間頁面，c頁面的url為a.demo.com/c。c頁面只是一個簡單的html頁面，在window的onload事件上調用了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方法可以安全地實現(xiàn)跨源通信，寫明目標窗口的協(xié)議、主機地址或端口就可以發(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ā)過來的。
以上就是關于“web前端中iframe跨域的方法有哪些”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注億速云行業(yè)資訊頻道。
免責聲明：本站發(fā)布的內容（圖片、視頻和文字）以原創(chuàng)、轉載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權內容。
