视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
JavaScript跨域问题代码总结
2020-11-27 20:24:30 责编:小采
文档

通过修改document.domain来跨子域

浏览器都有一个同源策略,其之一就是第一种方法中我们说的不能通过ajax的方法去请求不同源中的文档。 它的第二个是浏览器中不同域的框架之间是不能进行js的交互操作的。

不同的框架之间是可以获取window对象的,但却无法获取相应的属性和方法。比如,有一个页面,它的地址是http://www.gxlcms.com/ , 在这个页面里面有一个iframe,它的src是http://www.gxlcms.com/, 很显然,这个页面与它里面的iframe框架是不同域的,所以我们是无法通过在页面中书写js代码来获取iframe中的东西的:

<script type="text/javascript">
 function test(){
 var iframe = document.getElementById('?ifame');
 var win = document.contentWindow;//可以获取到iframe里的window对象,但该window对象的属性和方法几乎是不可用的
 var doc = win.document;//这里获取不到iframe里的document对象
 var name = win.name;//这里同样获取不到window对象的name属性
 }
</script>
<iframe id = "iframe" src="http://example.com/b.html" onload = "test()"></iframe>

这个时候,document.domain就可以派上用场了,我们只要把http://www.gxlcms.com/http://www.gxlcms.com/这两个页面的document.domain都设成相同的域名就可以了。但要注意的是,document.domain的设置是有的,我们只能把document.domain设置成自身或更高一级的父域,且主域必须相同。

1.在页面 http://www.gxlcms.com/ 中设置document.domain:

<iframe id = "iframe" src="http://example.com/b.html" onload = "test()"></iframe>
<script type="text/javascript">
 document.domain = 'example.com';//设置成主域
 function test(){
 alert(document.getElementById('?iframe').contentWindow);//contentWindow 可取得子窗口的 window 对象
 }
</script>

2.在页面 http://www.gxlcms.com/ 中也设置document.domain:

<script type="text/javascript">
 document.domain = 'example.com';//在iframe载入这个页面也设置document.domain,使之与主页面的document.domain相同
</script>

修改document.domain的方法只适用于不同子域的框架间的交互。

使用window.name来进行跨域

window对象有个name属性,该属性有个特征:即在一个窗口(window)的生命周期内,窗口载入的所有的页面都是共享一个window.name的,每个页面对window.name都有读写的权限,window.name是持久存在一个窗口载入过的所有页面中的

使用HTML5的window.postMessage方法跨域

window.postMessage(message,targetOrigin) 方法是html5新引进的特性,可以使用它来向其它的window对象发送消息,无论这个window对象是属于同源或不同源,目前IE8+、FireFox、Chrome、Opera等浏览器都已经支持window.postMessage方法。

下载本文
显示全文
专题