利用iframe+window.name属性解决跨域问题

1.直接使用跨域iframe + window.name
主页面利用8094端口,跨域调用iframe8091端口
代码如下:

// port 8094主页面
<script type="text/javascript"> 
    iframe = document.createElement('iframe'),
    iframe.src = 'http://****:8091/search/page/index';
    document.body.appendChild(iframe);
    iframe.onload = function() {
      console.log(iframe.contentWindow.name)
    };
</script>

// port 8091 iframe跨域页面
<script type="text/javascript">
    window.name = 'test';
</script>

图如下1:
1
分析:

Uncaught DOMException: Blocked a frame with origin "http://www.test.com:8094" from accessing a cross-origin frame.
    at HTMLIFrameElement.iframe.onload (http://www.test.com:8094/detail2/page/tv:17:47)

存在跨域问题
2.使用代理页面
主页面利用8094端口,跨域调用iframe8091端口,新建与主页面同目录代理页面proxy
代码如下:

// port 8094 主页面
<script type="text/javascript"> 
    iframe = document.createElement('iframe'),
    iframe.src = 'http://****:8091/search/page/index';
    document.body.appendChild(iframe);
    iframe.onload = function() {
      iframe.src = 'http://www.test.com:8094/search/page/index';
      console.log(iframe.contentWindow.name)
    };
</script>

// port 8094 代理页面
<script type="text/javascript">
    console.log('proxy');
</script>

// port 8091 iframe跨域页面
<script type="text/javascript">
    window.name = 'test';
</script>

图如下2:
2
分析:
主页面index能拿到iframe跨域页面的name属性,但是页面会一直刷新。
3.

// port 8094 主页面
<script type="text/javascript"> 
    iframe = document.createElement('iframe');
    iframe.style.display = 'none';
    var state = 0;
    
    iframe.onload = function() {
        if(state === 1) {
            var data = iframe.contentWindow.name;
            console.log(data);
            iframe.contentWindow.document.write('');
            iframe.contentWindow.close();
            document.body.removeChild(iframe);
        } else if(state === 0) {
            state = 1;
            iframe.contentWindow.location = 'http://www.test.com:8094/search/page/index';
        }
    };

    iframe.src = 'http://****:8091/search/page/index';
    document.body.appendChild(iframe);
</script>

// port 8094 代理页面
<script type="text/javascript">
    console.log('proxy');
</script>

// port 8091 iframe跨域页面
<script type="text/javascript">
    window.name = 'test';
</script>

图如下3:
3
分析:
正确得到输出,且没有控制台报错

此条目发表在JavaScript分类目录。将固定链接加入收藏夹。

发表评论

电子邮件地址不会被公开。 必填项已用*标注