JavaScriptクロスドメインスクリプト呼び出し(iframe方式)
30938 ワード
ドメイン間の要求は、名前の通り、別のドメイン名サイトのリソースにアクセスすることです.しかし、スクリプトにおいてクロスドメイン要求を行うことは、セキュリティによって制限されます.
ドメインをまたぐスクリプトの呼び出しには多くの方法があります.ここで紹介したhashを利用してiframe構造のクロスドメインアクセスを行います.
主にこのような状況に対して:
サイトA:www.aa.com
サイトB:www.bb.com
このうちAは親ページであり、Bはサブページであり、iframe形式でAに埋め込まれている.
ポイント:
①＜script＞のsrc属性はドメインをまたぐことができます.
②window.location.hashとは、urlの中で嚔始と分割のアンカー値パラメータでhashの値を変えたもので、ページが自動的に更新されないので、一つのページの状態が保存されます.親ページでは、JSによって伝達するべき値を文字列としてサブページのhash値を変更し、サブページは時間更新によって自身のhash値の変化を感知し、親ページから渡された値を取得する.
短所:
①hash値が変更されても自動的にページが更新されることはないが、url値が変更されているため、前進・後退などの操作でページが混乱してしまう.
②文字列の種類の値しか渡されません.
ページA: http://domain1/TestCross.html:
ページB:http://domain2/TestCross.html:
ドメインをまたぐスクリプトの呼び出しには多くの方法があります.ここで紹介したhashを利用してiframe構造のクロスドメインアクセスを行います.
主にこのような状況に対して:
サイトA:www.aa.com
サイトB:www.bb.com
このうちAは親ページであり、Bはサブページであり、iframe形式でAに埋め込まれている.
ポイント:
①＜script＞のsrc属性はドメインをまたぐことができます.
②window.location.hashとは、urlの中で嚔始と分割のアンカー値パラメータでhashの値を変えたもので、ページが自動的に更新されないので、一つのページの状態が保存されます.親ページでは、JSによって伝達するべき値を文字列としてサブページのhash値を変更し、サブページは時間更新によって自身のhash値の変化を感知し、親ページから渡された値を取得する.
短所:
①hash値が変更されても自動的にページが更新されることはないが、url値が変更されているため、前進・後退などの操作でページが混乱してしまう.
②文字列の種類の値しか渡されません.
ページA: http://domain1/TestCross.html:
1 <html>
2 <head>
3 <script language="javascript" type="text/javascript">
4 var url = "http://domain2/TestCross.html";
5 var oldHash = null;
6 var timer = null;
7 function getHash()
8 {
9 var hash = window.location.hash;
10 if ((hash.length >= 1) && (hash.charAt(0) == '#'))
11 {
12 hash = hash.substring(1);
13 }
14 return hash;
15 }
16 function sendRequest()
17 {
18 var d = document;
19 var t = d.getElementById('request');
20 var f = d.getElementById('alienFrame');
21 f.src = url + "#" + t.value + "<br/>" + new Date();
22 }
23 function setDivHtml(v)
24 {
25 var d = document;
26 var dv = d.getElementById('response');
27 dv.innerHTML = v;
28 }
29 function idle()
30 {
31 var newHash = getHash();
32 if (newHash != oldHash)
33 {
34 setDivHtml(newHash);
35 oldHash = newHash;
36 }
37 timer = window.setTimeout(idle, 100);
38 }
39 function window.onload()
40 {
41 timer = window.setTimeout(idle, 100);
42 }
43 </script>
44 </head>
45 <body>
46 ：<input type="text" id="request"> <input type="button" value=" " onclick="sendRequest()" /><br/>
47 ：<div id="response"></div>
48 <iframe id="alienFrame" src="http://domain2/TestCross.html"></iframe>
49 </body>
50 </html>ページB:http://domain2/TestCross.html:
1 <html>
2 <head>
3 <script language="javascript" type="text/javascript">
4 var url = "http://domain1/TestCross.html";
5 var oldHash = null;
6 var timer = null;
7 function getHash()
8 {
9 var hash = window.location.hash;
10 if ((hash.length >= 1) && (hash.charAt(0) == '#'))
11 {
12 hash = hash.substring(1);
13 }
14 return hash;
15 }
16 function sendRequest()
17 {
18 var d = document;
19 var t = d.getElementById('request');
20 var f = parent;
21 //alert(f.document); // ， “Access is denied”
22 f.location.href = url + "#" + t.value + "<br/>" + new Date();
23 }
24 function setDivHtml(v)
25 {
26 var d = document;
27 var dv = d.getElementById('response');
28 dv.innerHTML = v;
29 }
30 function idle()
31 {
32 var newHash = getHash();
33 if (newHash != oldHash)
34 {
35 setDivHtml(newHash);
36 oldHash = newHash;
37 }
38 timer = window.setTimeout(idle, 100);
39 }
40 function window.onload()
41 {
42 timer = window.setTimeout(idle, 100);
43 }
44 </script>
45 </head>
46 <body>
47 ：<input type="text" id="request"> <input type="button" value=" " onclick="sendRequest()" /><br/>
48 ：<div id="response"></div>
49 </body>
50 </html>