js實作跨域存取的三種方法_javascript技巧
javascript跨域存取是web開發者經常遇到的問題，什麼是跨域，一個域上載入的腳本獲取或操作另一個域上的文檔屬性，下面將列出三種實作javascript跨域方法:
1.基於iframe實作跨域
基於iframe實現的跨域要求兩個域具有aa.xx.com,bb.xx.com這種特點，也就是兩個頁面必須屬於一個基礎域（例如都是xxx.com，或是xxx .com.cn），使用相同協定（例如都是http）和相同連接埠（例如都是80），這樣在兩個頁面中同時加入document.domain，就可以實作父頁面呼叫子頁面的函數，程式碼如下：
頁面一：
<html>
<head>
<script>
document.domain = "xx.com";
function aa(){
alert("p");
}
</script>
</head>
<body>
<iframe src="http://localhost:8080/CmsUI/2.html" id="i">
</iframe>
<script>
document.getElementById('i').onload = function(){
var d = document.getElementById('i').contentWindow;
d.a();
};
</script>
</body>
</html> 頁二：
<html>
<head>
<script>
document.domain = "xx.com";
function a(){
alert("c");
}
</script>
</head>
<body>
</body>
</html>
這時候父頁就可以呼叫子頁面的a函數，實作js跨域存取
2.基於script標籤實作跨域
script標籤本身就可以存取其它網域的資源，不受瀏覽器同源策略的限制，可以透過在頁面動態建立script標籤，程式碼如下：
var script = document.createElement('script');
script.src = "http://aa.xx.com/js/*.js";
document.body.appendChild(script);
這樣透過動態建立script標籤就可以載入其它域的js文件，然後透過本頁面就可以呼叫載入後js文件的函數，這樣做的缺陷就是不能載入其它域的文檔，只能是js文件， jsonp便是透過這種方式實現的，jsonp透過向其它域傳入一個callback參數，透過其他域的後台將callback參數值和json串包裝成javascript函數返回，因為是透過script標籤發出的請求，瀏覽器會將傳回的字串依照javascript進行解析執行，實現了域與域之間的資料傳輸。
jquery中對jsonp的支援也是基於此方案。
3.後台代理方式
這種方式可以解決所有跨域問題，也就是將後台作為代理，每次對其它域的請求轉交給本域的後台，本域的後台通過模擬http請求去訪問其它域，再將返回的結果返回給前台，這樣做的好處是，無論訪問的是文檔，還是js文件都可以實現跨域。
以上js實現跨域訪問的三種方法分先給大家，大家仔細研究學習，一定會有所收穫
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
AI Hentai Generator
免費產生 AI 無盡。
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
熱門話題
在JavaScript中替換字符串字符
Mar 11, 2025 am 12:07 AM
JavaScript字符串替換方法詳解及常見問題解答 本文將探討兩種在JavaScript中替換字符串字符的方法：在JavaScript代碼內部替換和在網頁HTML內部替換。 在JavaScript代碼內部替換字符串 最直接的方法是使用replace()方法： str = str.replace("find","replace"); 該方法僅替換第一個匹配項。要替換所有匹配項，需使用正則表達式並添加全局標誌g： str = str.replace(/fi
如何在瀏覽器中優化JavaScript代碼以進行性能？
Mar 18, 2025 pm 03:14 PM
本文討論了在瀏覽器中優化JavaScript性能的策略，重點是減少執行時間並最大程度地減少對頁面負載速度的影響。
如何使用瀏覽器開發人員工具有效調試JavaScript代碼？
Mar 18, 2025 pm 03:16 PM
本文討論了使用瀏覽器開發人員工具的有效JavaScript調試，專注於設置斷點，使用控制台和分析性能。
立即提高jQuery性能的10種方法
Mar 11, 2025 am 12:15 AM
本文概述了十個簡單的步驟，可以顯著提高腳本的性能。 這些技術很簡單，適用於所有技能水平。 保持更新：使用bundler（例如vite）的npm等軟件包經理來確保
使用Passport與semelize和MySQL
Mar 11, 2025 am 11:04 AM
續集是一個基於承諾的node.js orm。它可以與PostgreSQL，MySQL，MariadB，Sqlite和MSSQL一起使用。在本教程中，我們將為Web應用程序的用戶實施身份驗證。我們將使用Passport，Passport，Midderw的流行身份驗證
如何構建簡單的jQuery滑塊
Mar 11, 2025 am 12:19 AM
本文將引導您使用jQuery庫創建一個簡單的圖片輪播。我們將使用bxSlider庫，它基於jQuery構建，並提供許多配置選項來設置輪播。 如今，圖片輪播已成為網站必備功能——一圖胜千言！ 決定使用圖片輪播後，下一個問題是如何創建它。首先，您需要收集高質量、高分辨率的圖片。 接下來，您需要使用HTML和一些JavaScript代碼來創建圖片輪播。網絡上有很多庫可以幫助您以不同的方式創建輪播。我們將使用開源的bxSlider庫。 bxSlider庫支持響應式設計，因此使用此庫構建的輪播可以適應任何
如何使用源地圖調試縮小JavaScript代碼？
Mar 18, 2025 pm 03:17 PM
本文說明瞭如何使用源地圖通過將其映射回原始代碼來調試JAVASCRIPT。它討論了啟用源地圖，設置斷點以及使用Chrome DevTools和WebPack之類的工具。
