原文:使用postMesssage()實現跨域iframe頁面間的信息傳遞

由於web同源策略的限制,當頁面使用跨域iframe鏈接時,主頁面與子頁面是無法交互的,這對頁面間的信息傳遞造成了不小的麻煩,經過一系列的嘗試,最后我發現有以下方法可以實現: . 子頁面url傳參 簡單說來就是把所有需要傳遞的參數加到與主頁面同源的url上,將子頁面重定向到該url,然后主頁面通過iframe的src獲取這些參數 過程非常復雜,不建議使用這種方法 .postMessage post ...

2016-03-29 12:50 0 2295 推薦指數:

查看詳情

iframe通信

1,的一個示例 當你需要操作一個內嵌iframe是,如果這個內嵌iframe和打開的網站不在同一個域中,你時常會遇到這樣的報錯: Unsafe JavaScript attempt to access frame with URL http:/www.d1.com from ...

Tue Aug 28 20:24:00 CST 2012 0 3099
window.postMessage()實現(iframe嵌套頁面)消息傳遞

window.postMessage()方法可以安全地實現Window對象之間的通信。例如,在頁面和嵌入其中的iframe之間。 不同頁面上的腳本允許彼此訪問,當且僅當它們源自的頁面共享相同的協議,端口號和主機(也稱為“同源策略”)。window.postMessage()提供 ...

Fri Nov 29 01:36:00 CST 2019 0 805
使用 postMessage + iframe 實現通信

一、postMessage window.postMessage() 方法可以安全地實現源通信。通常,對於兩個不同頁面的腳本,只有當執行它們的頁面位於具有相同的協議(通常為https),端口號(443為https的默認值),以及主機(兩個頁面的模數 Document.domain設置 ...

Sat Jun 16 09:14:00 CST 2018 0 833
使用 iframe + postMessage 實現通信

在實際項目開發中可能會碰到在 a.com 頁面中嵌套 b.com 頁面,這時第一反應是使用 iframe,但是產品又提出在 a.com 中操作,b.com 中進行顯示,或者相反。 1、postMessage   postMessage方法允許來自不同源的腳本采用異步方式進行有限的通信,可以實現 ...

Thu Jun 28 23:23:00 CST 2018 0 2844
iframe嵌套頁面

父級調用iframe方法: 子級 iframe中調用 父級html中方法: 使用的前提條件是要在同域名下,想要如果域名不同,甚至端口不同,都會存在 的問題。 簡單示例demo: a.html 頁面 b.html 頁面 ...

Fri Jul 12 18:40:00 CST 2019 0 8163
如何實現獲取iframe頁面動態的url

有的時候iframe的子頁面會動態的切換頁面,我們在父頁面通過iframe1.contentWindow.window.location只能獲取同源的子頁面信息。獲取的子頁面信息會報錯。 這時可以通過html5 提供的接口 postMessage來過去頁面信息。如下代 ...

Thu May 03 01:18:00 CST 2018 0 13145
使用獲取iframe的父頁面URL

通常情況下,我們獲取iframe頁面的url很簡單:parent.location或top.location即可,但前提是它們遵循同源策略。當iframe與父頁面不屬於同一個域名時,像上面的獲取會因為安全策略原因而失敗。在nczonline的一篇文章上看到一種方法,使用 ...

Wed Aug 22 23:46:00 CST 2018 1 4298
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM