この記事では主に、いくつかの一般的な JavaScript クロスドメイン通信方法を紹介します。まずはJSONPについて説明します。
1.JSONP
JSONP (JSON with Padding) は、主流ブラウザによるクロスドメイン データ アクセスの問題を解決するために使用できる JSON の「使用モード」です。同一オリジン ポリシーにより、一般に、server1.example.com にある Web ページは、HTML の <script> 要素を除き、server1.example.com 以外のサーバーと通信できません。 <script> 要素のこのオープン ポリシーを使用すると、Web ページは他のソースから動的に生成された JSON データを取得できます。この使用パターンは JSONP と呼ばれます。 JSONP でキャプチャされたデータは JSON ではなく、JSON パーサーで解析されるのではなく、JavaScript インタープリターで実行される任意の JavaScript です。 <br />
次にJSONPの具体的な実装を紹介します。 <br />
クロスドメイン js ファイル内のコード (もちろん Web スクリプトのセキュリティ ポリシーに準拠している) であっても、Web ページは無条件に実行される可能性があることがわかっています。リモートサーバーremoteserver.comのルートディレクトリには、次のコードを持つremote.jsファイルがあります:<br />
<span style="color: #3366ff"><strong>alert('私はリモートファイルです');
<br />ローカルサーバー localserver.com には、次のような jsonp.html ページ コードがあります:
<br />
</script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script type="text/javascript" src="http://remoteserver.com/remote.js"></script> </head> <body> </body> </html>
ここで、jsonp.html ページで関数を定義し、リモートのremote.js にデータを渡してその関数を呼び出します。 jsonp.html ページのコードは次のとおりです:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
var localHandler = function(data){
alert('我是本地函数，可以被跨域的remote.js文件调用，远程js带来的数据是：' + data.result);
};
</script>
<script type="text/javascript" src="http://remoteserver.com/remote.js"></script>
</head>
<body>
</body>
</html>
localHandler({"result":"私はリモート js によってもたらされたデータです"});
正常に実行された後、クロスドメインのリモート データ取得の目的は達成されたように見えますが、呼び出すべきローカル関数の名前をリモート JS に知らせるにはどうすればよいでしょうか?現時点では、サーバーが提供する js スクリプトを動的に生成する必要があります。呼び出し元は、パラメーターを渡すことでサーバーに必要な関数を通知できます。jsonp.html のコードは次のとおりです。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
// 得到航班信息查询结果后的回调函数
var flightHandler = function(data){
alert('你查询的航班结果是：票价 ' + data.price + ' 元，' + '余票 ' + data.tickets + ' 张。');
};
// 提供jsonp服务的url地址（不管是什么类型的地址，最终生成的返回值都是一段javascript代码）
var url = "http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998&callback=flightHandler";
// 创建script标签，设置其属性
var script = document.createElement('script');
script.setAttribute('src', url);
// 把script标签加入head，此时调用开始
document.getElementsByTagName('head')[0].appendChild(script);
</script>
</head>
<body>
</body>
</html>
flightHandler({
"code": "CA1998",
"price": 1780,
"tickets": 5
});
2. CORS
CORS (Cross OriginResource Sharing、クロスオリジン リソース共有) には、クロスオリジン XMLHttpRequest が実装されており、サーバーに HTTP リクエストのソース情報を提供します。ヘッダーはブラウザーによって保護されており、アプリケーション コードによって変更することはできません。このアプローチは、外部入力を評価するよりもはるかに安全です。
以前は、ajax は同じソースからのみリクエストを行うことができましたが、現在は XMLHttpRequests レベル 2 を通じて、クロスドメイン リクエストを行うことができます。ページまたはアプリケーションがすでに http://www.test1.com にあり、http://www.test2.com からのデータ抽出をリクエストする予定だとします。通常の状況では、AJAX を直接使用してリクエストすると、リクエストは失敗し、ブラウザも「ソース不一致」エラーを返します。これが「クロスドメイン」の由来です。
CORS を使用すると、http://www.test2.com はヘッダーを追加するだけで http://www.test1.com からのリクエストを許可できます。 PHP コードは次のとおりです:
header("Access-Comtrol-Allow-Origin:*");<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);"> </span>
设置好头信息之后，其他域就可以进行请求了。
使用"跨域资源共享"的前提，是浏览器必须支持这个功能，而且服务器端必须同意这种"跨域"。如果能够满足上面的条件，则代码的写法与不跨域的请求完全一样。
xhr.open('GET', ' http://www.test2.com ');
接下来介绍另外一种实时通信方式：
3、Cross-document messaging
跨文档信息通信。使用这个功能，只要获取到网页所在窗口对象的实例，不仅同原的web网页可以互相通信，也可以实现跨域通信。要想接受从其他窗口发送来的信息，必须对窗口对象的onmessage事件进行监听，其他窗口可以通过postmessage方法来传递数据，该方法使用两个参数：第一个参数为所发送的消息文本，但也可以是任何js对象，第二个参数为接收消息的对象窗口的url地址。
下面进行试验，主页面index.html代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<script type="text/javascript">
function sendIt(){
document.getElementById("otherPage").contentWindow
.postMessage(//向子窗口发出请求
document.getElementById("message").value,//值
"http://127.0.0.1:8020"//目标域
)
}
</script>
<body>
<iframe src="http://127.0.0.1:8020/test2/JS/jstest/Cross-document-messaging/other.html" id="otherPage" width="" height=""></iframe>
<br /><br />
<input type="text" name="message" id="message" value="" />
<input type="button" name="" id="" value="发送跨域消息" onclick="sendIt();" />
</body>
</html>
窗口所引用页面other.html代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
window.addEventListener("message",function(event){//通过onmessage监听
//将从父窗口传来的数据展现出来
document.getElementById("content").innerHTML+=event.data+"<br>";
},false);
</script>
</head>
<body>
信息来自于另外一个域
<div id="content">
</div>
</body>
</html>试验结果如下：
可以看到在81端口服务器中的index.html和8020端口的服务器中的other.html进行的通信。
完整代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<script type="text/javascript">
function sendIt(){
document.getElementById("otherPage").contentWindow
.postMessage(//向子窗口发出请求
document.getElementById("message").value,//值
"http://127.0.0.1:8020"//目标域
)
}
</script>
<body>
<iframe src="http://127.0.0.1:8020/test2/JS/jstest/Cross-document-messaging/other.html" id="otherPage" width="" height=""></iframe>
<br /><br />
<input type="text" name="message" id="message" value="" />
<input type="button" name="" id="" value="发送跨域消息" onclick="sendIt();" />
</body>
</html>
CrossDocumentMessaging_index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
window.addEventListener("message",function(event){//通过onmessage监听
//将从父窗口传来的数据展现出来
document.getElementById("content").innerHTML+=event.data+"<br>";
},false);
</script>
</head>
<body>
信息来自于另外一个域
<div id="content">
</div>
</body>
</html>以上就是本文的全部内容，希望对大家了解熟悉常见的javascript跨域通信方法有所帮助。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
