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:
分析:
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:
分析:
主页面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:
分析:
正确得到输出,且没有控制台报错