父子页面之间跨域通信的方法

2014-8-12 09:42| 发布者: joejoe0332| 查看: 5514| 评论: 0|原作者: lyndon|来自: 腾讯TID

摘要: 由于同源策略的限制，JavaScript跨域的问题，一直是一个比较棘手的问题，为了解决页面之间的跨域通信，大家煞费苦心，研究了各种跨域方案。之前也有小网同学分享过一篇“跨域，不再纠结” 开始照着尝试时还是有些不 ...

　　每次a.html向b.html发送消息的时候会产生两个请求，其中一个是a.com/proxy.html向b.com/bproxy.html跳转产生的，另一个是b.html重新向a.html发起“连接请求”时产生的：

图6

　　最后简单看一下实测的几个测试页面代码： 代码片段一，a.com/a.html:

01<html xmlns="http://www.w3.org/1999/xhtml">
02<head>
03    <title>a.com</title>
04</head>
05<body>
06    <div id="Div1">
07        A.com/a.html</div>
08    <input id="txt_msg" type="text" />
09    <input id="Button1" type="button" value="向b.com/b.html发送一条消息"onclick="sendMessage(document.getElementById('txt_msg').value)" />
10    <div id="div_msg">
11    </div>
12    <iframe width="800" height="400" id="mainFrame" src="<a href="http://localhost:8091/b.com/b.htm">http://localhost:8091/b.com/b.htm</a>">
13    </iframe>
14    <script type="text/javascript">
15        var proxyWin = null;
16        function showMsg(msg) {
17            document.getElementById("div_msg").innerHTML = msg;
18        }
19        function getMessage(data) {
20            showMsg("messageForm b.html to ProxyWin:" + data);
21        }
22        function sendMessage(data) {
23            if (null != proxyWin) {
24                proxyWin.getMessage(data);
25            }
26        }
27    </script>
28</body>
29</html>

代码片段二，a.com/proxy.html:

01<html xmlns="<a href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>">
02<head>
03    <title>a.com</title>
04</head>
05<body>
06<div id="Div1">A.com/proxy.html</div>
07<div id="div_msg"></div>
08<script type="text/javascript">
09    var topWin = top;
10    function showMsg(msg) {
11        document.getElementById("div_msg").innerHTML = msg;
12    }
13 
14    function getMessage(data) {
15        showMsg("messageForm A.com/a.html:" + data + "<br/>两¢?秒?后¨®将?跳¬?转Áa到Ì?B.com/bproxy.html");
16        window.name = data;
17        setTimeout(function () { location.href = "<a href="http://localhost:8091/b.com/bproxy.htm">http://localhost:8091/b.com/bproxy.htm</a>" }, 2000);// 为了能让大家看到跳转的过程，所以加了个延时
18    }
19 
20    function sendMessage(data) {
21        topWin.proxyWin = window;
22        topWin.getMessage(data);
23    }
24 
25    var search = location.search.substring(1);
26    showMsg("messageForm B.com/b.html:" + search);
27    sendMessage(search);
28    </script>
29</body>
30</html>

代码片段三，b.com/b.html

01<html xmlns="<a href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>">
02<head>
03    <title>b.com</title>
04</head>
05<body>
06    <div id="Div1">
07        B.com/b.html</div>
08    <input id="txt_msg" type="text" />
09    <input id="Button1" type="button" value="向A.com/a.html发送一条消息"onclick="sendMessage(document.getElementById('txt_msg').value)" />
10    <div id="div_msg">
11    </div>
12    <iframe id="proxy" name="proxy" style="width: 600px; height: 300px"></iframe>
13    <script type="text/javascript">
14        function showMsg(msg) {
15            document.getElementById("div_msg").innerHTML = msg;
16        }
17        function sendMessage(data) {
18            var proxy = document.getElementById("proxy");
19            proxy.src="<a href="http://localhost:8090/a.com/proxy.htm?data">http://localhost:8090/a.com/proxy.htm?data</a>=" + data;
20        }
21        function connect() {
22            sendMessage("connect");
23        }
24        function getMessage(data) {
25            showMsg("messageForm a.html to ProxyWin:" + data);
26            connect();
27        }
28 
29        connect(); // 页面一加载，就执行一次连接
30    </script>
31</body>
32</html>

代码片段四，b.com/bproxy.html

01<html xmlns="<a href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>">
02<head>
03    <title>b.com</title>
04</head>
05<body>
06    <div id="Div1">
07        B.com/bproxy.html</div>
08    <div id="div_msg">
09    </div>
10    <script type="text/javascript">
11        var parentWin = parent;
12        var data = null;
13 
14        function getMessage() {
15            if (window.name) {
16                data = window.name;
17                parentWin.getMessage(data);
18            }
19            document.getElementById("div_msg").innerHTML = "messageForm a.com/proxy.html:" + data;
20 
21        }
22        getMessage();        
23    </script>
24</body>
25</html>

1 234 / 4 页下一页在本页阅读全文

酷毙

雷人

鲜花

鸡蛋

漂亮

收藏分享邀请

上一篇：Jansi:让控制台输出彩色字符的方法下一篇：Weinre—Web远程调试工具

快毕业了，没工作经验，
找份工作好难啊？
赶紧去人才芯片公司磨练吧!!

帐号		自动登录	找回密码
密码			注册

父子页面之间跨域通信的方法

最新评论