您的位置: 首页  >  IT文章  >  跨域

跨域

分类: IT文章 • 2023-12-04 22:20:49

同源策略：端口　域名　协议

1 Jsonp

跨域
 <script>
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = 'www.baidu.comn&callback=showMessage';
    document.head.appendChild(script);
    function showMessage(res) {
        ...
    }
 </script>
跨域

动态的创建script，设置一个带参数的网址，通过callback接受返回数据

2 document.domain + iframe跨域

此时有一个限制：主域相同：
例如： http://www.baidu.com 和 http://a.baiud.com,
那么设置:
doncument.domain = 'baidu.comn'

跨域
 1 1.）父窗口：(http://a.domain.com/a.html)
 2     首先获取 子窗口的数据iframe，然后设置document.domain,
 3 
 4 <iframe ></iframe>
 5 <script>
 6     document.domain = 'domain.com';
 7     var iframe  = document.getElementById("iframe")
 8     var win = iframe.contentWindow(获取到了子窗口：window)
 9 </script>
10 2.）子窗口：(http://b.domain.com/b.html)
11 
12 <script>
13     document.domain = 'domain.com';
14     // 获取父窗口中变量
15   </script>
跨域

3 windows.name + iframe

window都有一个name属性，这个属性：在一个窗口(window)的生命周期内,窗口载入的所有的页面都是共享一个window.name的，而且每个页面对window.name都有读写的权限。

A页面：设置 windows.name = "Monday" 
B页面：console.log(windows.name) // Monday
  1. 加入A页面需要获取B页面的数据，通过中间iframe实现数据的共享,
  2. A页面使用iframe想要获取到B.html，通过window.name设置的数据，需要将iframe的src设置为www.cnblogs.com/B.html即可.
  3. 然后A.html想要得到iframe所获取到的数据，还必须把这个iframe的src设置成跟A.html页面同一个域才行.
  4. 不然根据同源策略，A.html是不能访问到iframe中的window.name属性的。 B.html
    跨域
     1 <script> 
 2 window.name = "message come from B.html"
 3 </script>
 4 A.html
 5 <iframe > 
 6 <script>
 7 function getData(){
 8 var iframe = document.getElementById('proxy);
 9 iframe.onload = function(){
10 var data = iframe.contentWindow.name;
11 }
12 iframe.src = 'b.html';
13 }
14 </script>
    跨域

4 psotMessage

这个功能是h5中新增加的，接受两个参数，第一个：传递的数据，第二个： 协议+主机+端口号

跨域
 1 A.html
 2 <iframe ></iframe>
 3 <script>       
 4     var iframe = document.getElementById('iframe');
 5     iframe.onload = function() {
 6         var data = {
 7             name: 'Monday'
 8         };
 9         // 向B页面传送跨域数据
10         iframe.contentWindow.postMessage(JSON.stringify(data), 'http://B.html');
11     };
12 </script>
13 B.html ，如果B发送会A
14 <script>
15     // 接收A的数据，
16     window.addEventListener('message', function(e) {
17         alert('data from domain1 ---> ' + e.data);
18 </script>
跨域

5 CORS

普通跨域请求：浏览器端写正常的AJAX代码即可，只服务端设置Access-Control-Allow-Origin即可，前端无须设置。

 
  • 相关阅读:
    libv4l 库【转】
    Leap Motion颠覆操控体验的超精致手势追踪技术【转】
    嵌入式Linux下Camera编程--V4L2【转】
    C语言高级应用---操作linux下V4L2摄像头应用程序【转】
    通过摄像头设备采集一帧数据的例子程序（完整版）【转】
    V4L2 camera 驱动 capture测试程序【转】
    v4l2 spec 中文 Ch01【转】
    Video for Linux Two API Specification Revision 2.6.32【转】
    Video for Linux Two API Specification revision0.24【转】
    OpenCV实践之路——人脸检测（C++/Python) 【转】
  • 原文地址：https://www.cnblogs.com/asasas/p/9471404.html

    • 1 Jsonp

    跨域
     <script>
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = 'www.baidu.comn&callback=showMessage';
    document.head.appendChild(script);
    function showMessage(res) {
        ...
    }
 </script>
    跨域

    动态的创建script，设置一个带参数的网址，通过callback接受返回数据

    2 document.domain + iframe跨域

    此时有一个限制：主域相同：
    例如： http://www.baidu.com 和 http://a.baiud.com,
    那么设置:
    doncument.domain = 'baidu.comn'

    跨域
     1 1.）父窗口：(http://a.domain.com/a.html)
 2     首先获取 子窗口的数据iframe，然后设置document.domain,
 3 
 4 <iframe ></iframe>
 5 <script>
 6     document.domain = 'domain.com';
 7     var iframe  = document.getElementById("iframe")
 8     var win = iframe.contentWindow(获取到了子窗口：window)
 9 </script>
10 2.）子窗口：(http://b.domain.com/b.html)
11 
12 <script>
13     document.domain = 'domain.com';
14     // 获取父窗口中变量
15   </script>
    跨域

    3 windows.name + iframe

    window都有一个name属性，这个属性：在一个窗口(window)的生命周期内,窗口载入的所有的页面都是共享一个window.name的，而且每个页面对window.name都有读写的权限。

    A页面：设置 windows.name = "Monday" 
B页面：console.log(windows.name) // Monday
    1. 加入A页面需要获取B页面的数据，通过中间iframe实现数据的共享,
    2. A页面使用iframe想要获取到B.html，通过window.name设置的数据，需要将iframe的src设置为www.cnblogs.com/B.html即可.
    3. 然后A.html想要得到iframe所获取到的数据，还必须把这个iframe的src设置成跟A.html页面同一个域才行.
    4. 不然根据同源策略，A.html是不能访问到iframe中的window.name属性的。 B.html
      跨域
       1 <script> 
 2 window.name = "message come from B.html"
 3 </script>
 4 A.html
 5 <iframe > 
 6 <script>
 7 function getData(){
 8 var iframe = document.getElementById('proxy);
 9 iframe.onload = function(){
10 var data = iframe.contentWindow.name;
11 }
12 iframe.src = 'b.html';
13 }
14 </script>
      跨域

    4 psotMessage

    这个功能是h5中新增加的，接受两个参数，第一个：传递的数据，第二个： 协议+主机+端口号

    跨域
     1 A.html
 2 <iframe ></iframe>
 3 <script>       
 4     var iframe = document.getElementById('iframe');
 5     iframe.onload = function() {
 6         var data = {
 7             name: 'Monday'
 8         };
 9         // 向B页面传送跨域数据
10         iframe.contentWindow.postMessage(JSON.stringify(data), 'http://B.html');
11     };
12 </script>
13 B.html ，如果B发送会A
14 <script>
15     // 接收A的数据，
16     window.addEventListener('message', function(e) {
17         alert('data from domain1 ---> ' + e.data);
18 </script>
    跨域

    5 CORS

    普通跨域请求：浏览器端写正常的AJAX代码即可，只服务端设置Access-Control-Allow-Origin即可，前端无须设置。

    相关推荐