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