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

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


在项目中会经常使用到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跨域问题。



相关文章



最新评论


我要评论



回复:

Copyrights © 2016-2017 高蒙个人博客 www.shuchengxian.com, All rights reserved. 皖ICP备15015490号 皖公网安备 34152302000022号网站地图

关键词:iframe,iframe跨域