摘要:超详细并且带的跨域指南来了本文基于你了解的同源策略,并且了解使用跨域跨域的理由。使用方法就是将符合上述条件页面的设置为同样的二级域名。这两个网站都是协议,端口都是,且二级域名都是。
超详细并且带 Demo 的 JavaScript 跨域指南来了!
本文基于你了解 JavaScript 的同源策略,并且了解使用跨域跨域的理由。
1. JSONP首先要介绍的跨域方法必然是 JSONP。
现在你想要获取其他网站上的 JavaScript 脚本,你非常高兴的使用 XMLHttpRequest 对象来获取。但是浏览器一点儿也不配合你,无情的弹出了下面的错误信息:
XMLHttpRequest cannot load http://x.com/main.dat. No "Access-Control-Allow-Origin" header is present on the requested resource. Origin "http://y.com" is therefore not allowed access.
你心里肯定会想,我难道要用后台做个爬虫来获取这个数据吗?!(;°○° )
为了避免这种蛋疼的事情发生,JSONP 就派上用场了。
标签是不受同源策略的限制的,它可以载入任意地方的 JavaScript 文件,而并不要求同源。
所以 JSONP 的理念就是,我和服务端约定好一个函数名,当我请求文件的时候,服务端返回一段 JavaScript。这段 JavaScript 调用了我们约定好的函数,并且将数据当做参数传入。
非常巧合的一点(其实并不是),JSON 的数据格式和 JavaScript 语言里对象的格式正好相同。所以在我们约定的函数里面可以直接使用这个对象。
光说不练假把式,让我们来看一个例子:
你需要获取数据的页面 index.html:
http://x.y.com/xx.js 文件内容:
getWeather({ "城市": "北京", "天气": "大雾" });
我们可以看到,在我们定义了 getWeather(data) 这个函数后,直接载入了 xx.js。
在这个脚本中,执行了 getWeather 函数,并传入了一个对象。然后我们在这个函数中将这个对象输出到 console 中。
这就是整个 JSONP 的流程。
2. document.domain使用条件:
有其他页面 window 对象的引用。
二级域名相同。
协议相同。
端口相同。
document.domain 默认的值是整个域名,所以即使两个域名的二级域名一样,那么他们的 document.domain 也不一样。
使用方法就是将符合上述条件页面的 document.domain 设置为同样的二级域名。这样我们就可以使用其他页面的 window 对象引用做我们想做的任何事情了。(╯▔▽▔)╯
补充知识:
x.one.example.com 和 y.one.example.com 可以将 document.domain 设置为 one.example.com,也可以设置为 example.com。
document.domain 只能设置为当前域名的一个后缀,并且包括二级域名或以上(.edu.cn 这种整个算顶级域名)。
我们直接操刀演示,用两个网站 http://wenku.baidu.com/ 和 http://zhidao.baidu.com/。
这两个网站都是 http 协议,端口都是 80, 且二级域名都是 baidu.com。
打开 http://wenku.baidu.com/,在 console 中输入代码:
document.domain = "baidu.com"; var otherWindow = window.open("http://zhidao.baidu.com/");
我们现在已经发现百度知道的网页已经打开了,在百度知道网页的 console 中输入以下代码:
document.domain = "baidu.com";
现在回到百度文库的网页,我们就可以使用百度知道网页的 window 对象来操作百度知道的网页了。例如:
var divs = otherWindow.document.getElementsByTagName("div");
上面这个例子的使用方法并不常见,但是非常详细的说明了这种方法的原理。
这种方法主要用在控制 的情况中。
比如我的页面(http://one.example.com/index.... :
我们在 iframe.html 中使用 JavaScript 将 document.domain 设置好,也就是 example.com。
在 index.html 执行以下脚本:
var iframe = document.getElementById("iframe"); document.domain = "example.com"; iframe.contentDocument; // 框架的 document 对象 iframe.contentWindow; // 框架的 window 对象
这样,我们就可以获得对框架的完全控制权了。
补充知识(绝对干货):
当两个页面不做任何处理,但是使用了框架或者 window.open() 得到了某个页面的 window 对象的引用,我们可以直接访问的属性有哪些?
方法 |
---|
window.blur |
window.close |
window.focus |
window.postMessage |
window.location.replace |
属性 | 权限 |
---|---|
window.closed | 只读 |
window.frames | 只读 |
window.length | 只读 |
window.location.href | 只写 |
window.opener | 只读 |
window.parent | 只读 |
window.self | 只读 |
window.top | 只读 |
window.window | 只读 |
我们来看以下一个场景:
随意打开一个页面,输入以下代码:
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 类型。
这个方法也可以应用到与 的交互上来。
我的页面(http://one.example.com/index.... :
在 iframe.html 中设置好了 window.name 为我们要传递的字符串。
我们在 index.html 中写了下面的代码:
var iframe = document.getElementById("iframe"); var data = ""; iframe.onload = function() { data = iframe.contentWindow.name; };
定睛一看,为毛线报错?
细心的读者们肯定已经发现了,两个页面完全不同源啊!
由于 window.name 不随着 URL 的跳转而改变,所以我们使用一个暗黑技术来解决这个问题:
var iframe = document.getElementById("iframe"); var data = ""; iframe.onload = function() { iframe.onload = function(){ data = iframe.contentWindow.name; } iframe.src = "about:blank"; };
或者将里面的 about:blank 替换成某个同源页面(最好是空页面,减少加载时间)。
补充知识:
about:blank,javascript: 和 data: 中的内容,继承了载入他们的页面的源。
这种方法与 document.domain 方法相比,放宽了域名后缀要相同的限制,可以从任意页面获取 string 类型的数据。
4. [HTML5] postMessage在 HTML5 中, window 对象增加了一个非常有用的方法:
windowObj.postMessage(message, targetOrigin);
windowObj: 接受消息的 Window 对象。
message: 在最新的浏览器中可以是对象。
targetOrigin: 目标的源,* 表示任意。
这个方法非常强大,无视协议,端口,域名的不同。下面是烤熟的栗子:
var windowObj = window; // 可以是其他的 Window 对象的引用 var data = null; addEventListener("message", function(e){ if(e.origin == "http://jasonkid.github.io/fezone") { data = e.data; e.source.postMessage("Got it!", "*"); } });
message 事件就是用来接收 postMessage 发送过来的请求的。函数参数的属性有以下几个:
origin: 发送消息的 window 的源。
data: 数据。
source: 发送消息的 Window 对象。
Demohttps://github.com/JasonKid/f...
两种服务端相关跨域方法「JavaScript」两种服务端相关跨域方法详解 ← 反向代理、CORS方法请点这里
觉得不错的话按顶部的推荐,让更多人看到吧~ㄟ(▔▽▔ㄟ)
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/85931.html
摘要:之前我们讲了一下四种跨域的方式四种跨域方式详解。这四种方式是使用纯来进行跨域的。今天就介绍两种有涉及到服务器的跨域技术。 之前我们讲了一下四种 JavaScript 跨域的方式 - 「JavaScript」四种跨域方式详解。这四种方式是使用纯 JavaScript 来进行跨域的。 今天就介绍两种有涉及到服务器的跨域技术。 一、反向代理服务器 基础思想很简单,将你的服务器配置成 需要跨域...
摘要:页面和页面是没有跨域的一开始我只想到用提交数据来实现,不过一想,是直接提交到页面吗一时之间,我也不知道该如何进行页面跳转之间的数据传递。参考文章利用跨域获取数据详解四种跨域方式详解 先描述一下需求情景有一个生成节日贺卡的页面,a页面最后部分用来填写用户名和贺卡内容,点击提交按钮跳转到贺卡页面b,b页面显示的就是a页面填写的内容和用户名。(a页面和b页面是没有跨域的...) 一开始我只...
摘要:中的跨域请求应该也算是一个重点,具体什么叫跨域,在这里我就不展开了,可以查一下浏览器的同源策略和跨域的定义。再看后台文件文件接收回调函数并把要返回的参数以参数注入的方式注入到回调函数中,再返回给客户端。 js中的跨域请求应该也算是一个重点,具体什么叫跨域,在这里我就不展开了,可以查一下浏览器的同源策略和跨域的定义。原来只知道常用的jsonp和document.domain这两种方式,这...
摘要:四通过跨域一个页面嵌入一个外域的页面虽然两个窗体之前能获取彼此的对象,但是却拿不到上的属性和方法,例如一个页面嵌入一个的我是父窗体的方法嵌入的窗体跟的域名不同,很明显是跨域的,虽然能获取到对象,但是拿不到页面的任何方法和属性。 js跨域是指通过js在不同域之间进行相互通信或者数据传输,只要协议,域名,端口号其中有一个不同,就是跨域。下面总结一下我了解到的常用的跨域方法。 一:通过jso...
阅读 2336·2021-11-24 11:16
阅读 2022·2021-09-30 09:47
阅读 1995·2021-09-10 10:51
阅读 1316·2019-08-30 14:08
阅读 3133·2019-08-30 13:47
阅读 1520·2019-08-30 13:02
阅读 3226·2019-08-29 12:29
阅读 3178·2019-08-26 17:05