这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要介绍了 javascript iframe 跨域详解的相关资料, 需要的朋友可以参考下
1. 什么引起了 ajax 跨域不能的问题
ajax 本身实际上是通过 XMLHttpRequest 对象来进行数据的交互,而浏览器出于安全考虑,不允许 js 代码进行跨域操作,所以会警告。
2. 有什么完美的解决方案么?
没有。解决方案有不少,但是只能是根据自己的实际情况来选择。
具体情况有:
一、本域和子域的相互访问: www.aa.com 和 book.aa.com 二、本域和其他域的相互访问: www.aa.com 和 www.bb.com 用 iframe 三、本域和其他域的相互访问: www.aa.com 和 www.bb.com 用 XMLHttpRequest 访问代理 四、本域和其他域的相互访问: www.aa.com 和 www.bb.com 用 JS 创建动态脚本
解决方法:
一、如果想做到数据的交互,那么 www.aa.com 和 book.aa.com 必须由你来开发才可以。可以将 book.aa.com 用 iframe 添加到 www.aa.com 的某个页面下, 在 www.aa.com 和 iframe 里面都加上 document.domain = "aa.com",这样就可以统一域了,可以实现跨域访问。就和平时同一个域中镶嵌 iframe 一样,直接调用里面的 JS 就可以了。(这个办法我没有尝试,不过理论可行)
二、当两个域不同时, 如果想相互调用,那么同样需要两个域都是由你来开发才可以。用 iframe 可以实现数据的互相调用。解决方案就是用 window.location 对象的 hash 属性。hash 属性就是 http://domian/web/a.htm#dshakjdhsjka 里面的 #dshakjdhsjka。利用 JS 改变 hash 值网页不会刷新,可以这样实现通过 JS 访问 hash 值来做到通信。不过除了 IE 之外其他大部分浏览器只要改变 hash 就会记录历史,你在前进和后退时就需要处理,非常麻烦。不过再做简单的处理时还是可以用的,具体的代码我再下面有下载。大体的过程是页面 a 和页面 b 在不同域下, b 通过 iframe 添加到 a 里,a 通过 JS 修改 iframe 的 hash 值,b 里面做一个监听(因为 JS 只能修改 hash,数据是否改变只能由 b 自己来判断),检测到 b 的 hash 值被修改了,得到修改的值,经过处理返回 a 需要的值,再来修改 a 的 hash 值(这个地方要注意,如果 a 本身是那种查询页面的话比如 http://domian/web/a.aspx?id=3, 在 b 中直接 parent.window.location 是无法取得数据的,同样报没有权限的错误,需要 a 把这个传过来,所以也比较麻烦),同样 a 里面也要做监听,如果 hash 变化的话就取得返回的数据,再做相应的处理。
三、这种情形是最经常遇到的,也是用的最多的了。就是 www.aa.com 和 www.bb.com 你只能修改一个,也就是另外一个是别人的,人家告诉你你要取得数据就访问某某连接参数是什么样子的,最后返回数据是什么格式的。而你需要做的就是在你的域下新建一个网页,让服务器去别人的网站上取得数据,再返回给你。domain1 下的 a 向同域下的 GetData.aspx 请求数据,GetData.aspx 向 domain2 下的 ResponseData.aspx 发送请求, ResponseData.aspx 返回数据给 GetData.aspx, GetData.aspx 再返回给 a, 这样就完成了一次数据请求。GetData.aspx 在其中充当了代理的作用。具体可以看下我的代码。
四、这个和上个的区别就是请求是使用 <script> 标签来请求的,这个要求也是两个域都是由你来开发才行。原理就是 JS 文件注入,在本域内的 a 内生成一个 JS 标签,它的 SRC 指向请求的另外一个域的某个页面 b,b 返回数据即可,可以直接返回 JS 的代码。因为 script 的 src 属性是可以跨域的。具体看代码,这个也比较简单。
在父窗口中获取 iframe 中的元素
- 格式:window.frames["iframe的name值"].document.getElementById("iframe中控件的ID").click();
- 实例:window.frames["ifm"].document.getElementById("btnOk").click();
格式:
- var obj=document.getElementById("iframe的name").contentWindow;
- var ifmObj=obj.document.getElementById("iframe中控件的ID");
- ifmObj.click();
- 实例:
- var obj=document.getElementById("ifm").contentWindow;
- var ifmObj=obj.document.getElementById("btnOk");
- ifmObj.click();
在 iframe 中获取父窗口的元素
- 格式:window.parent.document.getElementById("父窗口的元素ID").click();
- 实例:window.parent.document.getElementById("btnOk").click();
jquery
在父窗口中获取 iframe 中的元素
- 格式:$("#iframe的ID").contents().find("#iframe中的控件ID").click();//jquery 方法1
- 实例:$("#ifm").contents().find("#btnOk").click();//jquery 方法1
- 格式:$("#iframe中的控件ID",document.frames("frame的name").document).click();//jquery 方法2
- 实例:$("#btnOk",document.frames("ifm").document).click();//jquery 方法2
在 iframe 中获取父窗口的元素
- 格式:$('#父窗口中的元素ID', parent.document).click();
- 实例:$('#btnOk', parent.document).click();
来源: http://www.phperz.com/article/17/0511/330879.html