js跨页面传值 JavaScript跨域

产生跨域的情况

1. 同一域名js跨页面传值,不同端口;

2. 同一域名,不同协议;

3. 同一域名,不同二级域名;

4. 主域相同,子域不同;

5. 不同域名;

6. 使用与域名对应的IP;

对于最后一种,判断为跨域是因为:域是通过‘URL的首部’来识别而不会去尝试判断相同的IP地址是否对应同一个域。

URL首部指..+..host

另外,如果是协议和端口造成的跨域问题,前端没有办法解决。

js跨页面传值_js 跨页面刷新_js跨页面获取dom元素

解决方案

1..+:

该方法只能解决上面的第四种情况,在两个不同域的文件中,分别加上:

   document.domain = 'a.com';

然后通过在其中一个文件中创建一个,控制的进行js的交互

//https://www.a.com/a.html    

    var ifr = document.createElement('iframe');
    ifr.src = httpss://Script.a.com/b.html;

js跨页面传值_js跨页面获取dom元素_js 跨页面刷新

document.appendChild(ifr); ifr.onload = function(){ var doc = ifr.contentDocument||ifr.contentWindow.document; //通过doc操作b.html }

js跨页面传值_js跨页面获取dom元素_js 跨页面刷新

备注: 默认等于..。主域名是不带www的域名()。只能设置成主域名。

2.动态创建(jsonp)

浏览器并不禁止页面中引用并执行其他域的js文件,所以可以通过创建节点实现完全跨域通信。

//这里js是引用了其他域的节点。

js. = (){

if(!this.||this.===''){

//执行返回来的

}

}

js跨页面传值_js 跨页面刷新_js跨页面获取dom元素

3..hash

原理是利用.hash来进行传值(在url:#中的#就是.hash)。因为改变hash并不会导致页面刷新js跨页面传值,但是传递的数据容量是有限制的。

4..name

利用 的 name 属性实现跨域的原理是:name属性在不同的页面(甚至不同域名)加载后依旧存在,并且可以支持非常长的 name 值(2MB)。换句话说,name属性不会因为页面的url变化而变化。

在需要请求的目标页面.html中设置.name

//target.html
window.name = '想要获取的信息';

因为name值只对位于同一域下的页面可见。为解决这一限制,在源页面中利用,使加载目标页面,这时源页面中的的.name就会等于.html的.name。

但是,源页面依然无法获取到的.name属性,因为源页面和其中的不同源。所以这时需要把的url重新指向与源页面同域的proxy.html页面。

    iframe = document.createElement('iframe'),

js跨页面获取dom元素_js跨页面传值_js 跨页面刷新

iframe.src = 'https://localhost:8080/data.php'; document.body.appendChild(iframe); iframe.onload = function() { iframe.src = 'https://localhost:81/cross-domain/proxy.html'; console.log(iframe.contentWindow.name) };

这样就能获取到.html中保存于.name的数据了

.name中只能保存字符串类型数据。

5.使用HTML5的

()是HTML5新增的API,具体来看MDN的描述:HTML5 .()

怡然一记
js跨页面传值 JavaScript跨域
https://xsunhua.cn/287.html
THE END
分享
二维码
打赏
海报
js跨页面传值 JavaScript跨域
然后通过在其中一个文件中创建一个,控制的进行js的交互浏览器并不禁止页面中引用并执行其他域的js文件,所以可以通过创建节点实现完全跨域通信。//这里js是引用了其他域的节点。hash来进行传值(在url:#中的#就是.换句话说,name属性不会因为页面的url变化而变化。但是,源页面依然无法获取到的.所以这时需要把的url重新指向与源页面同域的proxy.
<<上一篇
下一篇>>