一、跨域简介
1. 首先简单介绍一下什么是跨域
当我们在浏览器的地址栏中输入一个地址的时候,这个地址通常包含四部分信息内容。这四部分信息包含:①协议、②域名、③端口、④资源位置。
其中前三部分将会决定是否存在跨域,即:协议、域名、端口。如果其中有一个不一样,浏览器就会认为存在跨域的问题。例如:
域名1 | 域名2 | 是否有跨域 |
不存在跨域 | ||
https://father.moxiao.com/a/a.html | http://father.moxiao.com/b/b.html | 存在跨域,协议不一样 |
http://father.moxiao.com/a/a.html | http://child.moxiao.com/b/b.html | 存在跨域,域名不一样 |
http://child.moxiao.com:8082/b/b.html | 存在跨域,端口不一样 |
2.跨域的种类
一般有两种形式的跨域问题:
XmlHttpRequest(XHR)或者使用AJAX发送的POST或者GET请求。这种形式的跨域是:前端页面与后端进行的跨域请求。这种形式跨域不在本篇文章的讨论范围内。
父子页面之间进行的DOM操作(父子窗口之间的document操作)。这种形式的跨域是:前端页面与前端页面之间的通信或者相互操作的形成跨域。(本文主要讨论就是这个话题)
3.跨域的提示
如果在页面上出现了上面任何一种形式的跨域,一般会在浏览器的控制台(Chrome中按F12键)打印下面一段类似的描述:(一般包含accessing a cross-origin类似的信息就是跨域了)
二、问题描述
1.父子页面之间的DOM操作
在HTML页面中,我们有时候会使用<iframe>标签打开一个子窗口,又或者使用window.open方法打开一个子窗口,但有时想让父子窗口之间进行通信。例如:根据父窗口的大小,对<iframe>子窗口大小进行设置等问题。
同一个域下,可以在子窗口中通过window.parent.document来获取父窗口的DOM对象。亦或父窗口也可以通过contentWindow属性获取子窗口的DOM对象(Iframe情况下)。例如:document.getElementById('iframe标签的ID').contentWindow。两者之间操作不会出现任何跨域的问题,可以自由的获取任意想要的元素信息内容。也就不在本篇文章的讨论范围内。
window.parent.document进行操作的时候,就会提示跨域的问题,就是上面截图的信息内容。又或者使用contentWindow属性也会提示相同的跨域问题。有以下几种解决问题的方法以及这些方法的局限性。
三、解决页面之间跨域问题的方法
着重看第一和第二种方法,在第一种和第二种方法无法使用的时候,可以考虑剩下的方法。
☆☆☆☆☆)
1.1. document.domain的原理
document.domain属性进行对比来判断是否有跨域。
document.domain属性值一样的话,就算两个页面实际上不在同一个域下,JS也会认为他们之间没有跨域操作。这样的话,如果我们将两个页面的document.domain属性值设置为一样的。不同域下的页面之间操作就可以像在一个域名下的页面之间的操作。
document.domain的默认值为:当前域名。
1.2. document.domain的局限性
document.domain也不是你想设置成什么就可以设置成什么的,这个属性的属性值有一定的设置规则,如果不满足设置的规则就不能设置成功。
规则如下:
域名或者IP地址。即:没有协议(http/https),没有端口。
document.domain只能设置为当前域名下的同级或者父级域名,并且不能设置为顶级域名,也不可以设置为其他形式的域名(不是当前域名的父级或同级)。
例如:当前访问地址为:(当前页面)。可以打开Chrome的控制台(F12)找到console的tab。默认情况下,我们输入document.domain会显示‘csdn.net’。其中csdn.net就是的父级域名。我们也可以设置为mp.csdn.net。因为mp.csdn.net是mp.csdn.net的同级域名。
但是我们不能设置顶级域名,即document.domain='net',就会提示错误信息。也不能设置其他的域名形式。即document.domain='csdn1.net'或者document.domain='baidu.com'。提示也说得很清楚。必须是mp.csdn.net的一个后缀形式。
③如果访问地址是IP的形式,则document.domain只能设置一样的IP地址。
下图就是在当前页面进行的设置。
注意:根据上面的设置规则,在使用document.domain的方式时,页面之间必须有相同的父级域名。否则这种方式将无法进行操作。
- document.domain只配置域名或者IP地址,不需要配置协议、端口。
- 因为document.domain只配置的域名或者IP地址,所以页面之间的协议必须是一样的,要么都是HTTP,要么都是HTTPS。如果是混合的,这种方式也是不行的。但是页面端口可以不一样。
1.3. domian方式的演示示例
https://github.com/1997chang/iframeCrossAccess是一个进行页面操作跨域的显示示例。该项目有两个模块,fathermodule和childmodule。
static/domain文件夹下显示的为document.domain的解决方案的示例。
启动father以及child模块,在地址栏中输入:father.moxiao.com:8081/domain/fatherDomainMethod.html。就可以进行页面之间的相互操作了。
☆☆☆☆☆)
postMessage的方法,使用postMessage方法可以向任何域名发送消息内容(字符串或者对象)。postMessage方法发送的消息将不会受到跨域的影响。
2.1 postMessage不受跨域的影响
window.parent获取父级窗口对象(WIndow),从而向父级窗口发送消息(子->父)。同样也可以使用contentWindow获取Iframe的打开的子窗口对象,从而向子窗口发送消息。(父->子)
获取到的window对象进行任何操作。即可以在跨域的情况下获取其子窗口或者父窗口的window对象,但是不能对获取到的window对象进行任何操作。如果进行了任何的操作,都会提示跨域的问题。但是有两个是例外。即使在跨域的情况下也可以对其进行设置。
①location属性:设置window准备跳转的页面。后面两种解决方法使用该属性。
②postMessage方法,H5之后添加的。
无论当前域名是什么,获取到的window对象的域名是什么。即使这两个域名之间存在跨域问题,在window对象中有一个属性location的设置和一个方法postMessage的调用不会受到跨域的影响。
2.2. postMessage方法的使用
postMessage和addEventListener方法配合使用。postMessage是用来发送消息的,addEventListener是用来接收消息时候的回调。
postMessage方法有两个参数:
①发送的消息:可以是字符串,也可以是对象。
②接收消息的域名:要么是具体值(协议、域名、端口都要设置,且相同),要么是*。如果设置为*:则表示没有任何限制。如果设置为具体值的话,则必须与发送到的窗口域名相同,包含协议、域名、端口,如果有一个不同的话,就会发送不出去。
例如:parent.window.postMessage('父窗口你好','http://father.moxiao.com'),就会提示错误。因为parent.window窗口的域名为:http://father.moxiao.com:8082,而发送配置的域名是:http://father.moxiao.com。就会提示下面的错误信息:
例如:
parent.window.postMessage(content, 'http://father.moxiao.com:8081');
addEventListener方法有两个参数:
①监听的时间类型:对于发送消息而言,固定为message。
②回调函数:在回调函数中一个参数event,event其中包含三个重要的属性:
1.data:表示接受到的消息内容,可能是字符串,可能是对象,取决有发送方。
2.origin:String类型,表示发送消息的域名地址
3.source:对象,表示发送消息的窗口对象。
例如:
window.addEventListener('message', (event) => {
$("#child").text($("#child").text() + '由' + event.origin + "发送过来的消息为:"+event.data);
});
2.3. postMessage的演示示例:
https://github.com/1997chang/iframeCrossAccess中static下的postMessage文件夹下。启动项目之后,在地址栏中访问:http://father.moxiao.com:8081/postmessage/fatherPostmessage.html地址,就可以进行父子窗口发送消息。显示如下:
☆☆☆)
window.name用于表示当前窗口的名称。可以容纳2M的大小内容。注意:在跨域的情况下,不能设置window.name的属性值,也不能获取其中的属性值。一般window.name属性要配合window.location属性进行操作。
3.1. window.name属性进行消息传递的原理
window.name表示当前窗口的名称。一个窗口在没有关闭之前,可以在地址栏中进行多次地址改变。但是他们都共享同一个window.name属性值。即只要当前窗口不关闭,无论进行多少次地址跳转,这些地址是否存在跨域都没有关系,window.name将保存最后一次窗口的设置的值。
你也可以自行体验一把:打开Chrome的控制台,当前地址为:www.baidu.com。你在console的控制台中输入window.name='moxiao',然后将当前页面的地址栏的地址改为:mai.qq.com,然后在console的控制台中打印window.name将会显示:‘moxiao’。
window.name的值可以在多个跨域地址中持久化,这也就是跨域父子窗口可以进行消息传递的基石。但是window.name属性的设置和获取是不能跨域进行操作的。如果父窗口想设置子窗口的window.name的属性值,必须在同一个域下。父窗口向获取子窗口的window.name的属性值,也必须在同一个域名下。
当知道window.name属性可以在多个页面之间进行持久化的这个机制后,我们就会想象一下如何进行跨域的父子窗口传递消息。
父窗口想向子窗口传递消息时:我们在父窗口的项目中添加一个代理页面(proxy.html),因为父窗口和代理页面在同一个项目下,所以不存在跨域的问题,这时候就可以在父窗口对代理窗口的window.name设置要传递的消息内容,设置完成之后,让代理页面进行window.location跳转到子窗口中,因为是同一个窗口,所以window.name属性将会持久化到子窗口中。这样就可以在子窗口获取当前窗口的window.name属性值,也就是父窗口想要传递的消息。
3.2. window.name的演示示例
https://github.com/1997chang/iframeCrossAccess中static下的name文件夹下。启动项目之后,在地址栏中访问:http://father.moxiao.com:8081/name/fatherName.html地址,就可以看到父窗口向子窗口发送的”moxiao“的消息内容了。
☆☆☆)
4.1. hashtag介绍以及原理
hashtag是地址栏中#之后的部分。注意:hash是地址栏的最后一部分。地址栏中传递的参数必须在#之前,否则会将他们当成是hashtag的一部分,而不是传递的参数了。
hashtag的一个显著的特征就是:hashtag的改变不会对页面进行重新加载。即不会发送一个HTTP请求。当我们在地址栏中输入一个地址时,会向服务器发送HTTP请求。当改变地址栏传递的参数时(?后面的参数),会重新发送HTTP请求。但是设置或者改变hashtag不会重新发送HTTP请求。给人直观的印象就是地址栏中的地址改变了,然后就没有任何其他的操作了。
window.location.hash的方式获取。注意:获取到的hash值是包含#号的。
window.onhashchange事件监听hash值的改变。
4.2. hashtag的演示示例
https://github.com/1997chang/iframeCrossAccess中static下的hash文件夹下。启动项目之后,在地址栏中访问:http://father.moxiao.com:8081/hash/fatherHash.html地址,就可以通过父窗口向子窗口发送消息了。
不会进行任何的页面刷新,重新加载、发送HTTP请求什么的。
四、总结
本篇文章主要介绍父子页面DOM操作造成的跨域问题,讲述了四种解决方法。其中第一种和第二种方法最为常见。最后再考虑使用window.name和hashtag的方式进行消息的传递。