js中的几种跨域方法

js跨域指的是通过js在不同域之间进行数据传输或通讯,例如ajax通信技术,或者通过js获取页面中iframe的数据。只要有任意一个不同,则协议、域名、端口中有任意一个不同,则彼此成为不同的域。

请注意:localhost和127.0.0.1虽然都指向本机,但也属于跨域。

浏览器执行javascript脚本时,会检查这个脚本属于哪个页面,如果不是同源页面,就不会被执行。

1. 通过window.name来跨域——这个方法最方便

同一个窗口在其生命周期内都共享一个 window.name,该窗口的每个页面都能获取并修改window.name属性,页面刷新或者发生页面跳转并不会直接引起window.name的改变。
例如:

a.html中

<script>
  window.name="父页面的值";
  setTimeout(function(){
    window.location="b.html";
  },1000);
</script>

b.html中

<script>
  alert(window.name);//输出“父页面的值”;
</script>

a.html页面自动跳转到b.html后弹出窗口显示a页面中设置的window.name

2. 通过document.domain来跨域

浏览器在不同的框架之间能获取到彼此的window对象,但是不能进行js交互操作,也无法获取到window对象的属性和方法,例如无法获取到iframe中的东西。

但是只要把两个页面的document.domain设置成相同的域名,就可以进行js通信了。但是document.domain的设置是有限制的,我们只能把document.domain

设置成自身或者更高一级的父域,

a.html中

<iframe src="http://example.com/b.html" id='ifram' onload="test()"></iframe>
<script>
  document.domain="example.com";
  function test(){
    alert(document.getElementById('iframe').contentWindow);
    }
</script>

b.html页面中

<script>
  document.domain="example.com";
</script>

这样我们就能通过js访问到iframe中的各种对象和属性了。

3. 通过jsonp跨域

原理:不同域的页面可以相互引用js叫本文文件,jsonp就是利用这个特征实现跨域。

比如,有一个a.html页面,他里面的代码需要利用ajax获取一个不同域的json数据,

<script>
  function callbackfunction(){
    alert(jsondata.length);//处理json数据
  }
</script>
<script src="1.php?callback=callbackunction"></script>

因为是当做一个js文件来引入,所以1.php返回的必须是一个能执行的js文件,所以这个页面的php代码可能是这样的:

<?php
  $callback=$_GET['callback'];//得到回调函数名
  $data='["ls1","customername2"]';//json数据
  echo $callback . "(" . $json_data . ")";//输出jsonp格式的数据
 
?>

调用dosomething(),则输出2。
如果用jQuery,则可以用下面的代码:

<script>
  $.getJSON('1.php?callback=?',function(data){
    alert(data.length);
  }
</script>

callback后面的?会自动解析为后面的回调函数。$.getJSON方法会自动判断是否跨域,不跨域的话,就调用普通 ajax方法;跨域 话,就会以异步加载js文件的形式来调用jsonp的回调函数。

4. 使用HTML5中的window.postMessage方法来跨域传送数据

无论是同源的还是不同源的,都可以使用window.postMessage(message,targetOrigin) 方法来传送数据。这里的message只能为string对象,第二个参数targetOrigin用来限定接受消息的window对象所在的域,若不限定域,可以使用通配符*。但是该方法不支持IE6和IE7。

示例如下:

<script>
  function onLoad(){
    var iframe=document.getElementById('iframe');
    var win=iframe.contentWindow;
    win.postMessage('页面a传来消息','*');
</script>
<iframe id='iframe' src="b.html" onload="onLoad()"></iframe>

b.html

<script>
  window.onmessage=function(e){
    e=e | event;//获取事件对象
    alert(e.data);//通过data属性得到传来的消息
  }
</script>

5. 利用WebSocket跨域

web sockets是一种浏览器的API,他的目标是在一个单独的持久连接上提供全双工、双向通信。(同源策略对web socket不适用)

web sockets原理:在js创建了一个web socket之后,会有一个HTTP请求发送到浏览器以发起连接。取得服务器相应后,建立的连接会使用HTTP升级从HTTP协议交换为web socket协议。

该方法只有在支持web socket协议的服务器上才能正常工作。需要在python环境下安装mod_pywebsocket。

<script>
  var ws=new WebSocket("ws://localhost/test.html");//ws:http; wss:https
  ws.send("hello world"):
  ws.onmessage=function(event){
    var data=event.data;
  }
</script>

猜你喜欢

转载自blog.csdn.net/qq_34035425/article/details/85010736