iframe 元素跨域訪問
使用<iframe>元素可以在當前頁面嵌入其他頁面。
如果兩個頁面是不同源的,那麼父子視窗無法通訊,也就是無法拿到對方的DOM。
程式碼如下:
[JavaScript] 純文字檢視 複製程式碼document.getElementById("theIframe").contentWindow.document
如果父子視窗非同源,那麼上面程式碼會報錯;對於window.open方法開啟的視窗也是如此。
如果兩個視窗一級域名相同,那麼只要將document.domain屬性值設定為根域名即可:
[JavaScript] 純文字檢視 複製程式碼document.domain = 'softwhy.com';
關於document.domain可以參閱JavaScript 跨域訪問cookie一章節。
對於根域名不同頁面,可以使用如下兩種方式解決跨域視窗的通訊問題:
一.通過錨點傳遞資訊:
關於錨點可以參閱HTML 錨點定位一章節,以如下連結為例子:
[HTML] 純文字檢視 複製程式碼http://www.softwhy.com/antzone.html#ts
只改變錨點不會不會重新重新整理網頁,父視窗可以通過這個錨點來傳遞資訊:
[JavaScript] 純文字檢視 複製程式碼let src = iframeURL + "#" + data; document.getElementById("theiframe").src = src;
這樣我們就將資料通過data傳遞給了iframe子頁面。
然後通過hashchange事件來進行監聽錨點資訊的變化,程式碼如下:
[JavaScript] 純文字檢視 複製程式碼window.onhashchange = handler; function handler() { let data = window.location.hash; }
相同的道理,子視窗也可以改變父視窗的錨點:
[JavaScript] 純文字檢視 複製程式碼parent.location.href= target + "#" + hash;
二.window.postMessage()方法:
H5ML5引入了window.postMessage()可以實現跨視窗通訊,並且不受同源策略的限制。
程式碼片段如下:
[JavaScript] 純文字檢視 複製程式碼var popup = window.open("http://b.com","title"); popup.postMessage("螞蟻部落","http://b.com");
在http://a.com中執行上述程式碼,會開啟一個新的http://b.com視窗,然後傳遞一個字串"螞蟻部落"。
關於postMessage()方法參閱postMessage() 方法一章節。
子視窗向父視窗傳送資訊也是同樣的道理:
[JavaScript] 純文字檢視 複製程式碼window.opener.postMessage("父視窗你好", "http://a.com");
上面已經傳遞了資訊,自然要通過一定的手段來監聽和獲取這些資訊:
[JavaScript] 純文字檢視 複製程式碼window.addEventListener("message", function(event) { console.log(event.data); },false);
關於message事件更多內容參閱message 事件一章節。
相關文章
- localStorage 跨域訪問跨域
- 跨源通訊、跨域訪問跨域
- 同源策略和跨域訪問跨域
- Vue嵌入iframe,iframe如何跨域呼叫vue內路由Vue跨域路由
- iframe 跨域高度自適應跨域
- 關於父視窗獲取跨域iframe子視窗中的元素跨域
- Laravel API 允許跨域訪問LaravelAPI跨域
- iframe跨域的幾種常用方法跨域
- 解決JS跨域訪問的問題JS跨域
- vue_cli3.x 跨域訪問Vue跨域
- springboot配置CORS允許跨域訪問Spring BootCORS跨域
- spring boot解決跨域訪問配置Spring Boot跨域
- 防止跨域問題無法訪問網址跨域
- 跨域庫herryPostMessage.js的一些優化,多iframe跨域跨域JS優化
- 阿里雲圖片跨域訪問設定阿里跨域
- Angular應用解決跨域訪問的問題Angular跨域
- Nginx解決前端訪問資源跨域問題Nginx前端跨域
- 跨域問題(普通跨域和springsecurity跨域)跨域SpringGse
- 解決Django本地介面不能跨域訪問的問題Django跨域
- JavaScript 跨域訪問(API介面)實現原理分析JavaScript跨域API
- PHP 設定多域名允許跨域訪問PHP跨域
- 跨域訪問是什麼!怎麼解決?跨域
- 跨域問題跨域
- 分享跨域訪問的解決方案與基礎分析跨域
- 搞懂:前端跨域問題JS解決跨域問題VUE代理解決跨域問題原理前端跨域JSVue
- 封裝一個postMessage庫,進行iframe跨域互動封裝跨域
- 詳解瀏覽器跨域訪問的幾種辦法瀏覽器跨域
- AJAX 跨域問題跨域
- djangorestjwtvue跨域問題DjangoRESTJWTVue跨域
- VUE跨域問題Vue跨域
- 前端跨域問題前端跨域
- springboot 跨域問題Spring Boot跨域
- Nginx跨域問題Nginx跨域
- js -- 跨域問題JS跨域
- 【Thinkphp6】api介面使用apipost等工具可以正常訪問,專案中訪問報跨域問題PHPAPI跨域
- Iframe嵌入跨域頁面高度自適應實現詳解跨域
- 深入跨域問題(3) – 利用 JSONP 解決跨域跨域JSON
- 深入跨域問題(3) - 利用 JSONP 解決跨域跨域JSON