js 跨域的几种方法
http://www.cnblogs.com/2050/p/3191744.html
js 同源策略:js 只能与同一域中的页面进行通讯
同源:相同协议(http/https)、相同域名、相同端口
1.jsonp 跨域
页面代码
<script> function doSomething(json){ alert(json) } </script> <script src='http://example.com/a.php?callback=doSomething'></script>
php代码
<?php $callback = $_GET['callback']; $data = array('a','b','c')' echo $callback.'('.json_encode($data).')'; ?>
最终页面输出 a ,b ,c
2.window.name 跨域
页面a.html
<script> windw.name = '我的a.html的数据'; setTimeout(function(){ window.location = 'b.html'; },3000); </script>
页面b.html
<script> alert(window.name) </script>
3.window.postMessage(message,targetOrigin)
html5特性,该方法的第一个参数message为要发送的消息,类型只能为字符串;第二个参数targetOrigin用来限定接收消息的那个window对象所在的域,如果不想限定域,可以使用通配符 * 。
a.html
<iframe id="myIframe" src="test.html" frameborder="0" onload="myload()"></iframe> <script> function myload(){ let f = document.getElementById('myIframe'); let win = f.contentWindow; win.postMessage("我是index.html的数据","*"); } </script>
b.html
<div id='div1'></div> <script> let d = document.getElementById('div1'); window.onmessage = function(e){ e = e || event; d.innerHTML = e.data; } </script>