zoukankan      html  css  js  c++  java
  • 跨域的N种方法之window.name+iframe跨域实践

    一、原理

      1、iframe内联框架的src属性跨域加载资源的能力

      2、window.name 值在不同的页面(甚至不同域名)加载后依旧存在(如果没修改则值不会变化),并且可以支持非常长的 name 值(2MB)或者说 window.name属性值在文档刷新后依旧存在的能力

    二、总体框架及代码

      1、A域中的获取数据页:index.html

    <!DOCTYPE html>
    <html>
    <head>
        <title>A域(window.name+iframe跨域解决方案)</title>
    </head>
    <body>
    
    </body>
    <script type="text/javascript">
        var ifr = document.createElement("iframe");
            ifr.style.display="none";
            ifr.src = "http://top.jiangqi.cn:8081/index2.html";
            document.getElementsByTagName("head")[0].appendChild(ifr);
        var flag = 0;
            ifr.onload = function(){
                if(flag == 0){
                    flag = 1;
                     ifr.contentWindow.location = 'http://www.jiangqi.cn/windowName/proxy.html';
                }else{
                    //获取数据
                    console.log(JSON.parse(ifr.contentWindow.name))
                    //释放内存,销毁iframe
                    ifr.contentWindow.close();
                    document.getElementsByTagName("head")[0].removeChild(ifr);
                }
            }
    </script>
    </html>

      2、A域中的代理页(空文档,只起到window.name转同域作用):proxy.html

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
    </head>
    <body>
    
    </body>
    </html>

      3、B域中的数据源页:index.html

    <!DOCTYPE html>
    <html>
    <head>
        <title>window.name+iframe跨域解决方案)</title>
    </head>
    <body>
    
    </body>
    <script type="text/javascript">
        var person = {
            name:"蒋*",
            age:"26",
            education:"大学本科"
        }
        window.name = JSON.stringify(person)
    </script>
    </html>

    三、参考

      1、https://www.tuicool.com/articles/viMFbqV

      2、https://segmentfault.com/a/1190000011145364

  • 相关阅读:
    LeetCode——Path Sum II
    注解配置 ssh
    冒泡排序深入具体解释
    在web page中使鼠标右击失效的几种方法
    XMPP个人信息展示
    android一个弹出菜单的动画(二)
    MySQL协议分析
    MySQL DBA教程:Mysql性能优化之缓存参数优化
    INSERT DELAYED 句法
    UDP包的最大大小是多少?
  • 原文地址:https://www.cnblogs.com/helloNico/p/10642440.html
Copyright © 2011-2022 走看看