JavaScript跨域脚本调用，iframe方式
跨域请求，顾名思义，就是一个站点中的资源去访问另外一个不同域名站点上的资源。但在脚本中进行跨域请求是受安全性限制的。
跨域脚本调用有很多种方法，这里介绍的利用hash来进行iframe结构的跨域访问。
主要针对此种情况：
站点A：www.aaa.com
站点B：www.bbb.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" > <input type="button" value="发送" onclick="sendRequest()" /><br/>
47 回复：<div ></div>
48 <iframe 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" > <input type="button" value="发送" onclick="sendRequest()" /><br/>
48 回复：<div ></div>
49 </body>
50 </html>
两个网页基本相同，第一个网页内嵌一个iframe，在点击“发送”按钮后，会将文本框里的内容通过hash fragment传给IFRAME。点击IFRAME里的“发送”按钮后，它会将文本框里的内容通过hash fragment传给父窗口。因为是只改动了hash fragment，浏览器不会重新load网页内容，这里使用了一个计时器来检测URL变化，如果变化了，就更新其中一个div的内容 。
- 上一篇 »Javascript跨域问题
- 下一篇 »PHP 设置响应头来解决跨域问题