JS四种跨域方式
1.JSONP
script标签是不受同源策略限制的,它可以载入任意地方的javascript文件,而不要求同源
jsonp的理念是:我和服务器端约定好一个函数名,当我请求文件的时候,服务端返回一段JavaScript,这段JavaScript调用这个约定好的函数,并且将数据当做参数传入
demo:
index.htmlhttp://x.y.com/xx.js
getWeather({
"城市": “北京”,
"天气":大雾“”
})
2.document.domain
使用条件:
1.有其他页面window 对象的引用
2.二级域名相同
3.协议相同,
4.端口相同
document.domain默认的值是整个域名,所有即使两个域名的二级域名一样,那么他们的document.domain也不一样
demo
两个网站: http://wenku.baidu.comhttp://zhidao.baidu.com
这两个网站都是 http协议, 端口都是80, 二级域名都是 baidu.com
打开http://wenku.baidu.com/,在 console 中输入代码:
document.domain ='baidu.com';
varotherWindow =window.open('http://zhidao.baidu.com/');
我们现在已经发现百度知道的网页已经打开了,在百度知道网页的 console 中输入以下代码:
document.domain ='baidu.com';
现在回到百度文库的网页,我们就可以使用百度知道网页的window对象来操作百度知道的网页了。例如:
vardivs = otherWindow.document.getElementsByTagName('div');
这种方法主要用在控制
我们在 iframe.html 中使用 JavaScript 将document.domain设置好,也就是 example.com。
在 index.html 执行以下脚本:
variframe =document.getElementById('iframe'); document.domain ='example.com'; iframe.contentDocument; // 框架的 document 对象
iframe.contentWindow; // 框架的 window 对象
这样,我们就可以获得对框架的完全控制权了。
3.window.name
随意打开一个页面,输入以下代码:
window.name ="My window's name"; location.href ="http://www.qq.com/";
再检测window.name:
window.name; // My window's name
可以看到,如果在一个标签里面跳转网页的话,我们的window.name是不会改变的。
基于这个思想,我们可以在某个页面设置好window.name的值,然后跳转到另外一个页面。在这个页面中就可以获取到我们刚刚设置的window.name了。
由于安全原因,浏览器始终会保持window.name是string类型。
【JS四种跨域方式】这种方法与document.domain方法相比,放宽了域名后缀要相同的限制,可以从任意页面获取string类型的数据。
4.html5 postMessage
windowObj.postMessage(message, targetOrigin)windowObj: 接受消息的window对象
message:在最新的浏览器中可以是对象
targetOrigin: 目标的源,*表示任意
message 事件就是用来接收 postMessage发送过来的请求的,函数参数的属性有下几个:
:origin:发送消息的window的源
:data: 数据
:source: 发送消息的window对象
demo:
var windowObj= window; //可以是其他的window对象的引用文章来源: https://segmentfault.com/a/1190000003642057
vardata=https://www.it610.com/article/null;
addEventListener("message", function(e){
if(e.origin == 'http://jasonkid.github.ib/fezone'){
data= https://www.it610.com/article/e.data;
e.source.postMessage('gotit', '*')
}
})
推荐阅读
- 关于QueryWrapper|关于QueryWrapper,实现MybatisPlus多表关联查询方式
- mybatisplus|mybatisplus where QueryWrapper加括号嵌套查询方式
- 10.两种记账方式
- 数据库|SQL行转列方式优化查询性能实践
- 思维导图让你换一种打开方式学数学
- 日更是片段写作训练的好方式
- H5、js调用手机通话|H5、js调用手机通话,短信
- 推荐两种减压方式
- 迫害我们心中的经典,以翻拍的方式
- 低自尊