摘要:注意事項該屬性返回窗口中所有命名的框架。跨域未跨主域嘗試。所以有人把叫一級域名這是錯誤的。報錯圖兼容性監聽方可以獲得父級對象必須是同域檢查的發送頁面的源。四路由變化以及前進后退。
探索Iframe
本文目的:
Iframe簡單使用
Iframe跨域
Iframe常見問題
一.Iframe基本Dom以及常用屬性和常用事件 1.DOM: 2.常用屬性:和平時使用的DOM標簽類似,樣式之類的還是建議用class吧,統一起來方便管理。
更多屬性看:http://www.runoob.com/tags/ta...
3.常用事件:一般用這個就夠了
onload:當文檔加載時運行腳本
document.querySelector("#Yiframe").onload = function(event){ console.log("onload",event); }二.JS動態新增并插入Iframe
和平時新增DOM標簽一樣即可。
var iframe = document.createElement("iframe"); iframe.src = url; iframe.id = "Yiframe"; iframe.style="height: 100%;width: 100%;border: 0;"; $(".content").append(iframe);三.iframe與父頁面互動 1.注意事項
(1). 必須是在兩者同域的情況下才能進行數據交互。
(2). 中間無論嵌套幾次iframe,只要其中一個iframe與上級或者上上級同域,兩者之前就能進行相互調用
2.實現方案(同域) (1).父頁面獲取子頁面document.querySelector("#XXXX").contentWindow window.frames[x]
可以獲取到iframe內的window對象,包括iframe內自行聲明的全局方法等。
該屬性返回窗口中所有命名的框架(
直接打印window.frames不是數組對象。
frames.length 來獲取框架的數量。
可以通過window.frames[數字]直接獲取iframe內的window對象。
(2).子頁面獲取父頁面window.parent
可以獲取到父頁面的window對象,包括父頁面內自行聲明的全局方法等。
3.跨域(未跨主域)(1).嘗試。
打印 document.querySelector("#XXXX").contentWindow 和 window.parent 可以看到里面的屬性和方法(第一層/第二層)。 但關鍵數據和方法會被和諧。
(2).修改document.domain實現跨域通信
網上搜到這個方法,但自己嘗試的時候總會報錯:
VM301:1 Uncaught DOMException: Failed to set the "domain" property on "Document": "baidu.com" is not a suffix of "corp.dinghuo123.com". at:1:17
因為同源安全政策不能直接修改。
首先補充一個知識點,然后再講解怎么使用。
知識點:
一級域名 有的人叫根域名,如:dinghuo123.com、baidu.com、xx.com.cn、xx.cn.net 等等。
二級域名 是指增加了一級,包括www。如:www.dinghuo123.com、corp.dinghuo123.com、agent.dinghuo123.com 等等。所以有人把www.dinghuo123.com叫一級域名這是錯誤的。
document.domain 可以修改 corp.dinghuo123.com、agent.dinghuo123.com 為同一個主域 dinghuo123.com,此時即可通過上面步驟三-2實現父子之間的通信。
但是跨主域的時候就不能用這個方法了。
4.跨域(跨主域) (1)方法otherWindow.postMessage(message, targetOrigin, [transfer]); otherWindow //其他窗口的一個引用, //(1)比如iframe的contentWindow屬性、 //(2)執行window.open返回的窗口對象、 //(3)或者是命名過或數值索引的window.frames。 //(4)父級parent.window對象 message //將要發送到其他 window的數據。它將會被結構化克隆算法序列化。這意味著你可以不受什么限制的將數據對象安全的傳送給目標窗口而無需自己序列化。 //PS個人覺得若是對象盡量還是自行序列化吧避免出現什么奇怪的問題。 targetOrigin //通過窗口的origin屬性來指定哪些窗口能接收到消息事件,其值可以是字符串"*"(表示無限制)或者一個URI。在發送消息的時候,如果目標窗口的協議、主機地址或端口這三者的任意一項不匹配targetOrigin提供的值,那么消息就不會被發送;只有三者完全匹配,消息才會被發送。這個機制用來控制消息可以發送到哪些窗口;例如,當用postMessage傳送密碼時,這個參數就顯得尤為重要,必須保證它的值與這條包含密碼的信息的預期接受者的orign屬性完全一致,來防止密碼被惡意的第三方截獲。如果你明確的知道消息應該發送到哪個窗口,那么請始終提供一個有確切值的targetOrigin,而不是*。不提供確切的目標將導致數據泄露到任何對數據感興趣的惡意站點。 //PS簡單來說就是*的話對方無論是什么URL都會觸發onmessage回調,如果不是就會報錯(圖片見下方) transfer //可選 //是一串和message 同時傳遞的 Transferable 對象. 這些對象的所有權將被轉移給消息的接收方,而發送一方將不再保有所有權。 //PS這個不是很懂,后面有時間研究。
targetOrigin報錯圖
postMessage兼容性
window.onmessage = function(e){ console.log(e)} e.source //可以獲得父級window對象(必須是同域) e.origin //檢查postMessage的發送頁面的源。(2)實踐
父向子
//父: document.querySelector("#xx").onclick = function(){ window.frames[0].postMessage("testPost","*"); //document.querySelector("#Yiframe").contentWindow.postMessage("testPost","*"); 也可以 } //子: window.onmessage =function(e){ console.log("onmessage2",e,document.domain); }
子向父
//子: document.querySelector("#btn5").addEventListener("click",function(){ parent.window.postMessage("testChildPost","*"); }); //父: window.onmessage = function(e){ console.log("onmessage父",e) }
兩個窗口:
理論上把window對象瀏覽器存儲下再用上面的方式就能實現。未嘗試。
(3)安全問題如果您不希望從其他網站接收message,請不要為message事件添加任何事件偵聽器。 這是一個完全萬無一失的方式來避免安全問題。
如果您確實希望從其他網站接收message,請始終使用origin和source屬性驗證發件人的身份。 任何窗口(包括例如http://evil.example.com)都可以向任何其他窗口發送消息,并且您不能保證未知發件人不會發送惡意消息。 但是,驗證身份后,您仍然應該始終驗證接收到的消息的語法。 否則,您信任只發送受信任郵件的網站中的安全漏洞可能會在您的網站中打開跨網站腳本漏洞。
當您使用postMessage將數據發送到其他窗口時,始終指定精確的目標origin,而不是*。 惡意網站可以在您不知情的情況下更改窗口的位置,因此它可以攔截使用postMessage發送的數據。
四.路由變化以及前進后退。控制臺使用window.location.href會導致瀏覽器的url變化。
用戶點擊后退或者前進的時候,會根據之前的操作,完全依次復現(變化瀏覽器url和iframe內部頁面路由變化)
window.history.go(xx) 和 window.history.back() ,無論在父頁面還是在子頁面中,使用的效果和瀏覽器的前進后退是一樣的。
iframe中的頁面使用window.location.href(和a標簽)改變路由的時候不會引發瀏覽器url的變化,但會新增一條歷史記錄。
iframe每次重載,都會觸發onload事件。
五.常見問題iframe內的路由變化,iframe的src值不會變!!!
要獲取iframe內的當前url,用document.querySelector("#Yiframe").contentWindow.location.href;
parent.window 在沒有父級的時候 parent.window = window;
參考資料SO JSON在線解析:http://www.sojson.com/blog/17...
瀏覽器同源政策: https://developer.mozilla.org...
postMessage:https://developer.mozilla.org...
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/83613.html
摘要:注意事項該屬性返回窗口中所有命名的框架。跨域未跨主域嘗試。所以有人把叫一級域名這是錯誤的。報錯圖兼容性監聽方可以獲得父級對象必須是同域檢查的發送頁面的源。四路由變化以及前進后退。 探索Iframe 本文目的: Iframe簡單使用 Iframe跨域 Iframe常見問題 一.Iframe基本Dom以及常用屬性和常用事件 1.DOM: 2.常用屬性: 和平時使用的DOM標簽類似,...
摘要:通常我們可以在后配置各種指定資源路徑,有如果你未指定的話,則是使用規定的加載策略默認配置就是同域這里和有一點瓜葛的就是和就是用來指定的有效加載路徑。 某大咖說: iframe是能耗最高的一個元素,請盡量減少使用某大牛說: iframe安全性太差,請盡量減少使用...wtf, 你們知不知道你們這樣澆滅了多少孩紙學習iframe的熱情和決心。 雖然,你們這樣說的我竟無法反駁,但是ifram...
摘要:如何利用網頁請求暴露出來的接口去抓取網頁數據很多爬蟲都能實現這個功能。跨域通信時,瀏覽器會報如下錯誤其實這兩個問題都是由于跨域造成的。結果這些數據可以在請求成功會傳回本地。 如何利用網頁ajax請求暴露出來的接口去抓取網頁數據?很多爬蟲都能實現這個功能。不過今天要來和大家八一八單從前端的角度,利用js解決這個問題。 大家都知道,在不同域的情況下是不能發送ajax請求的,瀏覽器會報如下錯...
摘要:數據仍然是通過頁面獲得,頁面僅需向頁面傳遞即可,頁面拿到函數名,并通過傳遞從服務器拿到的數據,在頁面執行頁面的回調函數,回調函數執行完畢后移除頁面以及該函數。以上是我所知道的解決跨域請求的兩種方法。 iframe跨域的基本前提是,一個頁面可以嵌套非同源站點的html文件,以及某一個域名下的html頁面可以通過腳本向同域名服務器發出ajax請求。當一個域名為domain1下的頁面A想要向...
閱讀 1125·2021-11-24 10:21
閱讀 2561·2021-11-19 11:35
閱讀 1662·2019-08-30 15:55
閱讀 1293·2019-08-30 15:54
閱讀 1192·2019-08-30 15:53
閱讀 3498·2019-08-29 17:21
閱讀 3308·2019-08-29 16:12
閱讀 3412·2019-08-29 15:23