如何解决iframe跨域子域名间跨域操作js的问题

 jQuery/js   高蒙   阅读(2217)   评论(0)   2016-12-19 14:22:50    iframe iframe跨域 


在项目中会经常使用到iframe跨域操作js。浏览器在执行Javascript时,出于对安全性的考虑,禁止两个或者多个不同域的页面进行互相操作。 相同域的页面在相互操作的时候不会有任何问题。

如果是子域名之间js也是不认可的,但是我们可以通过document.domain='xxx.com'强制的指定域名,就可以实现同一域名下不同子域名之间的js操作。

下面我们本地来模拟这之间的操作过程。

一、本地配置虚拟主机。

windows主机的hosts文件中配置。分别指向a.html b.html。

127.0.0.1 www.a.com

127.0.0.1 demo.a.com

二、两个文件中的代码分别如下:

a.html

<h4>www.a.com页面</h4>  
<button type="button" onclick="exec_iframe()">点我操作demo.b.com页面</button>  
<iframe src="http://demo.a.com/b.html" name="myframe" width="500" height="100"></iframe> 
<script type="text/javascript">
    // 设置同一域
document.domain = 'a.com';
// 本域名下的方法
    function fMain(){  
        alert('我是www.a.com页面的函数');  
    }
// 调用iframe里面的方法
    function exec_iframe(){  
        window.myframe.fIframe();  
    }
</script>

b.html

<h4>demo.b.com页面</h4>   
<button type="button" onclick="exec_main()">点我操作www.a.com页面</button>
<script type="text/javascript">
    // 设置同一域
    document.domain = 'a.com';
// 本域名下的方法
    function fIframe(){  
        alert('我是demo.b.com页面的函数');  
    }
// 调用父元素
    function exec_main(){  
        parent.fMain();  
    } 
</script>

三、演示的效果。

a.jpgb.jpg

通过设置document.domain就可以轻松解决子域名之间iframe跨域问题。




相关文章



我要评论


站长昵称:(*)

输入内容:


评论列表


高蒙

男,程序猿一枚

 

人生要是没有理想, 那跟一条咸鱼有什么分别。


关于我

  http://www.shuchengxian.com

高蒙个人博客是以PHP技术为主的程序员个人博客。博客主要发布php开发中遇到的问题以及解决办法,同时个人博客也分享网站模板素材,jquery插件等方面素材。


站点声明:相关侵权、举报、投诉及建议等,请发E-mail:936594075#qq.com(#替换成@)。

Copyright © 2018, www.shuchengxian.com, All rights reserved. 个人博客皖公网安备 34152302000022号 皖ICP备15015490号

关键词:个人博客,PHP博客,PHP博客程序,高蒙博客,高蒙个人博客,php程序员博客,程序员个人博客