javascript iframe跨域详解_javascript技巧

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(); 

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索javascript
iframe跨域
iframe 跨域、js跨域获取iframe内容、iframe跨域访问、iframe 跨域调用js、iframe 跨域获取内容,以便于您获取更多的相关知识。

时间: 2024-08-29 04:22:07

javascript iframe跨域详解_javascript技巧的相关文章

JavaScript数据结构链表知识详解_javascript技巧

最近在看<javascript数据结构和算法>这本书,补一下数据结构和算法部分的知识,觉得自己这块是短板. 链表:存储有序的元素集合,但不同于数组,链表中的元素在内存中不是连续放置的.每个元素由一个存储元素本身的节点和一个指向下一个元素的引用(也称指针或链接)组成. 好处:可以添加或移除任意项,它会按需扩容,且不需要移动其他元素. 与数组的区别:     数组:可以直接访问任何位置的任何元素:     链表:想要访问链表中的一个元素,需要从起点(表头)开始迭代列表直到找到所需的元素. 做点小笔

JavaScript之WebSocket技术详解_javascript技巧

概述 HTTP协议是一种无状态协议,服务器端本身不具有识别客户端的能力,必须借助外部机制,比如session和cookie,才能与特定客户端保持对话.这多多少少带来一些不便,尤其在服务器端与客户端需要持续交换数据的场合(比如网络聊天),更是如此.为了解决这个问题,HTML5提出了浏览器的WebSocket API. WebSocket的主要作用是,允许服务器端与客户端进行全双工(full-duplex)的通信.举例来说,HTTP协议有点像发电子邮件,发出后必须等待对方回信:WebSocket则是

Javascript 引擎工作机制详解_javascript技巧

Javascript 引擎工作机制 javascript从定义到执行,JS引擎在实现层做了很多初始化工作,因此在学习JS引擎工作机制之前,我们需要引入几个相关的概念:执行环境栈.全局对象.执行环境.变量对象.活动对象.作用域和作用域链等,这些概念正是JS引擎工作的核心组件.这篇文章的目的不是孤立的为你讲解每一个概念,而是通过一个简单的demo来展开分析,全局讲解JS引擎从定义到执行的每一个细节,以及这些概念在其中所扮演的角色. var x = 1; //定义一个全局变量 x function A

JavaScript 节流函数 Throttle 详解_javascript技巧

在浏览器 DOM 事件里面,有一些事件会随着用户的操作不间断触发.比如:重新调整浏览器窗口大小(resize),浏览器页面滚动(scroll),鼠标移动(mousemove).也就是说用户在触发这些浏览器操作的时候,如果脚本里面绑定了对应的事件处理方法,这个方法就不停的触发.  这并不是我们想要的,因为有的时候如果事件处理方法比较庞大,DOM 操作比如复杂,还不断的触发此类事件就会造成性能上的损失,导致用户体验下降(UI 反映慢.浏览器卡死等).所以通常来讲我们会给相应事件添加延迟执行的逻辑.

javascript中Function类型详解_javascript技巧

Function 类型 function类型,毋庸置疑是js中相当重要的一个玩意. 1.这玩意首先是一个对象,也就是说它是一个引用类型.陈述:一听说是对象,是不是很有一种它的基类是object对象错觉感,No, 它和object是独立的2个东西.当你typeof function 时,返回的是 funciton 并非 object 2.每个函数都是 Function 对象的一个实例,它与其他引用对象一样具有属性和方法.由于它是对象所以函数名是指向函数对象的指针 关于函数的声明的语法支持: <sc

js中 javascript:void(0) 用法详解_javascript技巧

javascript:void(0)表示不做任何动作.如: 复制代码 代码如下: <a href="javascript:void(0);" onclick="alert('ok');"></a>  这里表示这个链接不做跳转动作,执行onClick事件. 我想使用过ajax的都常见这样的代码: 复制代码 代码如下: <a href="javascript:doTest2();void(0);">here<

javascript中indexOf技术详解_javascript技巧

JavaScript提供了几种技术,来在字符串中搜索一个单词.数字或其他的一串字符.搜索可能很方便,例如,如果你想要知道访问者使用哪种Web浏览器来浏览你的站点.每个Web浏览器在一个字符串中标识关于自己的信息,该字符串包含了很多不同的统计数据.可以通过在一个Web页面中添加下面这段JavaScript,并且在Web浏览器预览,从而看到这个字符串: <script> alert(navigator.userAgent): </script> Navigator是一个Web浏览器对象

JavaScript包装对象使用详解_javascript技巧

JavaScript对象是一种复合值:它是属性和已命名值的集合.通过"."符号来引用属性值.当属性值是一个函数时,称为方法. ①一段你常用但却未必明白其真正底层原理的代码: var s = "hello world!"; var word = s.substring(s.indexOf(" ")+1,s.length); 如前面所说,这里变量s只是一个字符串原始类型,它怎么会有属性(s.length)和方法(s.indexOf().s.subst

JavaScript function函数种类详解_javascript技巧

本篇主要介绍普通函数.匿名函数.闭包函数 目录 普通函数:介绍普通函数的特性:同名覆盖.arguments对象.默认返回值等. 匿名函数:介绍匿名函数的特性:变量匿名函数.无名称匿名函数. 闭包函数:介绍闭包函数的特性.   1. 普通函数1.1 示例 function ShowName(name) { alert(name); } 1.2 Js中同名函数的覆盖 在Js中函数是没有重载,定义相同函数名.不同参数签名的函数,后面的函数会覆盖前面的函数.调用时,只会调用后面的函数. var n1 =