CN105183851A - 克服浏览器同源策略限制的交互方法及设备 - Google Patents
克服浏览器同源策略限制的交互方法及设备 Download PDFInfo
- Publication number
- CN105183851A CN105183851A CN201510566229.6A CN201510566229A CN105183851A CN 105183851 A CN105183851 A CN 105183851A CN 201510566229 A CN201510566229 A CN 201510566229A CN 105183851 A CN105183851 A CN 105183851A
- Authority
- CN
- China
- Prior art keywords
- page
- subpage frame
- hash
- variable
- location
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/955—Retrieval from the web using information identifiers, e.g. uniform resource locators [URL]
- G06F16/9566—URL specific, e.g. using aliases, detecting broken or misspelled links
Landscapes
- Engineering & Computer Science (AREA)
- Databases & Information Systems (AREA)
- Theoretical Computer Science (AREA)
- Data Mining & Analysis (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Information Transfer Between Computers (AREA)
Abstract
本申请提供一种克服浏览器同源策略限制的交互方法及设备,通过统一资源定位符的location.hash携带待传递的数据在不同域的父页面和子页面之间传递数据,或以统一资源定位符的location.hash作为标识触发父页面或子页面DOM操作,完成不同域的父页面和子页面之间的脚本调用,实现以web前端的方式绕开浏览器同源策略的限制进行交互,解决不同域下的网站之间数据交互和DOM控制问题,尤其能够实现不同域的父页面与子页面间的DOM操作和控制。
Description
技术领域
本申请涉及计算机领域,尤其涉及一种克服浏览器同源策略限制的交互方法及设备。
背景技术
同源策略是浏览器的保护机制的一部分,该机制将来自不同域(假设域代表的是始发者)的web应用程序分离开来。也就是说,如果多个窗口或框架中的一些应用程序是从不同的域下载的,那么它们是无法相互访问数据和脚本的。具体来说,相同的ip、相同的网络协议、相同的端口,三者都满足就是同一个域,否则就属于不同域网站间的问题。因为浏览器同源策略的限制,一般情况下是不能直接通过一个域上加载的脚本获取或者操作另一个域上的文档属性。
要进行不同域网页间的信息交互或DOM操作,就要设法绕过或者说克服同源策略的限制。当前主要采用的技术有以下几种:
1)Document.domain的方式,但这种方式只能适用于不同子域的情况;
2)Window.name的方式,但这种方式浏览器兼容的支持有限,只有ie6、ie7支持,而且数据通信量有限;
3)HTML5postMessage的方式,但这种方式支持的浏览器有限,只有支持HTML5的浏览器才可以用这种方式;
4)JSONP的方式,浏览器兼容性好,但是这种方式只支持POST而不支持GET请求,并且只支持数据的交互,并不能解决不同域的页面间脚本调用DOM操作的问题。而且这是一种脚本注入的行为,存在一定的安全隐患。
发明内容
本申请的一个目的是提供一种克服浏览器同源策略限制的交互方法及设备,能够解决因为浏览器同源策略的限制,不同域下的网页之间不能进行数据传递和DOM控制的问题。
根据本申请的一个方面,提供了一种克服浏览器同源策略限制的交互方法,其中,该方法包括:
通过统一资源定位符的location.hash携带待传递的数据在不同域的父页面和子页面之间传递数据;
和/或以统一资源定位符的location.hash作为标识触发父页面或子页面DOM操作,完成不同域的父页面和子页面之间的脚本调用。
进一步的,上述克服浏览器同源策略限制的交互方法中,通过统一资源定位符的location.hash携带待传递的数据在不同域的父页面和子页面之间传递数据中,当子页面获取父页面的待传递数据时,包括:
在父页面设置一个iframe元素,并将所述iframe元素的属性src设置为子页面的链接;
将所述待传递的数据放在属性src的统一资源定位符的location.hash中;
在子页面中定义一个变量,监听location.hash中待传递数据是否有变化,如果有变化,将有变化的待传递数据赋值给所述变量。
进一步的,上述克服浏览器同源策略限制的交互方法中,在子页面中定义一个变量,监听location.hash中待传递数据是否有变化,如果有变化,将有变化的待传递数据赋值给所述变量,包括:
在子页面中定义一个变量,子页面每隔预设时间获取location.hash中的待传递数据,将获取到的待传递数据与所述变量的值进行比较,如果待传递数据与所述变量的值不同,则将所述待传递数据重新赋值给所述变量。
进一步的,上述克服浏览器同源策略限制的交互方法中,在父页面设置一个iframe元素,并将所述iframe元素的属性src设置为子页面的链接之后,还包括:
通过对所述iframe元素的css样式的设置使所述子页面不显示。
进一步的,上述克服浏览器同源策略限制的交互方法中,以统一资源定位符的location.hash作为标识触发子页面DOM操作,完成不同域的父页面和子页面之间的脚本调用,包括:
在父页面设置一个iframe元素,并将所述iframe元素的属性src设置为子页面的链接;
将触发子页面DOM操作的标识放在属性src的统一资源定位符的location.hash中;
在子页面中定义一个变量,监听location.hash中所述标识是否有变化,如果有变化,将有变化的所述标识赋值给所述变量;
子页面根据所述变量的新赋值进行子页面中相关的脚本调用的DOM操作。
进一步的,上述克服浏览器同源策略限制的交互方法中,在子页面中定义一个变量,监听location.hash中所述标识是否有变化,如果有变化,将有变化的所述标识赋值给所述变量,包括:
在子页面中定义一个变量,子页面每隔预设时间获取location.hash中的所述标识,将获取到的标识与所述变量的值进行比较,如果所述标识与所述变量的值不同,则将所述标识重新赋值给所述变量。
进一步的,上述克服浏览器同源策略限制的交互方法中,通过统一资源定位符的location.hash携带待传递的数据在不同域的父页面和子页面之间传递数据中,当父页面获取子页面的待传递数据时,包括:
在父页面设置一个iframe元素,并将所述iframe元素的属性src设置为子页面的链接;
设置一个与所述父页面属于同一域的代理页面,在子页面设置一个隐藏的iframe元素,并将所述隐藏的iframe元素的属性src设置为所述代理页面的链接;
子页面将所述待传递的数据放在所述隐藏的iframe元素的属性src的统一资源定位符的location.hash中;
在代理页面中定义一个变量,监听location.hash中待传递数据是否有变化,如果有变化,将有变化的待传递数据赋值给所述变量;
定位到父页面待变化的元素,将所述变量的值放到所述待变化的元素中。
进一步的,上述克服浏览器同源策略限制的交互方法中,在代理页面中定义一个变量,监听location.hash中待传递数据是否有变化,如果有变化,将有变化的待传递数据赋值给所述变量,包括:
在代理页面中定义一个变量,代理页面每隔预设时间获取location.hash中的待传递数据,将获取到的待传递数据与所述变量的值进行比较,如果所述待传递数据与所述变量的值不同,则将所述待传递数据重新赋值给所述变量;
进一步的,上述克服浏览器同源策略限制的交互方法中,以统一资源定位符的location.hash作为标识触发父页面DOM操作,完成不同域的父页面和子页面之间的脚本调用,包括:
在父页面设置一个iframe元素,并将所述iframe元素的属性src设置为子页面的链接;
设置一个与所述父页面属于同一域的代理页面,在子页面设置一个隐藏的iframe元素,并将所述隐藏的iframe元素的属性src设置为代理页面的链接;
子页面将触发父页面DOM操作的标识放在所述隐藏的iframe元素的属性src的统一资源定位符的location.hash中;
在代理页面中定义一个变量,监听location.hash中所述标识是否有变化,如果有变化,将有变化的标识赋值给所述变量;
代理页面根据所述变量的新赋值进行父页面中相关的脚本调用的DOM操作。
进一步的,上述克服浏览器同源策略限制的交互方法中,在代理页面中定义一个变量,监听location.hash中所述标识是否有变化,如果有变化,将有变化的标识赋值给所述变量,包括:
在代理页面中定义一个变量,代理页面每隔预设时间获取location.hash中的标识,将获取到的标识与所述变量的值进行比较,如果所述标识与所述变量的值不同,则将所述标识重新赋值给所述变量。
根据本申请的另一面还提供一种克服浏览器同源策略限制的交互设备,该设备包括:
第一装置,用于通过统一资源定位符的location.hash携带待传递的数据在不同域的父页面和子页面之间传递数据;
和/或第二装置,用于以统一资源定位符的location.hash作为标识触发父页面或子页面DOM操作,完成不同域的父页面和子页面之间的脚本调用。
进一步的,上述克服浏览器同源策略限制的交互设备中,所述第一装置,用于子页面获取父页面的待传递数据时,包括:
第一一一模块,用于在父页面设置一个iframe元素,并将所述iframe元素的属性src设置为子页面的链接;
第一一二模块,用于将所述待传递的数据放在属性src的统一资源定位符的location.hash中;
第一一三模块,用于在子页面中定义一个变量,监听location.hash中待传递数据是否有变化,如果有变化,将有变化的待传递数据赋值给所述变量。
进一步的,上述克服浏览器同源策略限制的交互设备中,所述第一一三模块,用于在子页面中定义一个变量,子页面每隔预设时间获取location.hash中的待传递数据,将获取到的待传递数据与所述变量的值进行比较,如果待传递数据与所述变量的值不同,则将所述待传递数据重新赋值给所述变量。
进一步的,上述克服浏览器同源策略限制的交互设备中,第一一一模块,还用于通过对所述iframe元素的css样式的设置使所述子页面不显示。
进一步的,上述克服浏览器同源策略限制的交互设备中,所述第二装置,用于以统一资源定位符的location.hash作为标识触发子页面DOM操作,完成不同域的父页面和子页面之间的脚本调用时,包括:
第二一一模块,用于在父页面设置一个iframe元素,并将所述iframe元素的属性src设置为子页面的链接;
第二一二模块,用于将触发子页面DOM操作的标识放在属性src的统一资源定位符的location.hash中;
第二一三模块,用于在子页面中定义一个变量,监听location.hash中所述标识是否有变化,如果有变化,将有变化的所述标识赋值给所述变量;
第二一四模块,用于子页面根据所述变量的新赋值进行子页面中相关的脚本调用的DOM操作。
进一步的,上述克服浏览器同源策略限制的交互设备中,所述第二一三模块,用于在子页面中定义一个变量,子页面每隔预设时间获取location.hash中的所述标识,将获取到的标识与所述变量的值进行比较,如果所述标识与所述变量的值不同,则将所述标识重新赋值给所述变量。
进一步的,上述克服浏览器同源策略限制的交互设备中,所述第一装置,用于父页面获取子页面的待传递数据时,包括:
第一二一模块,用于在父页面设置一个iframe元素,并将所述iframe元素的属性src设置为子页面的链接;
第一二二模块,用于设置一个与所述父页面属于同一域的代理页面,在子页面设置一个隐藏的iframe元素,并将所述隐藏的iframe元素的属性src设置为所述代理页面的链接;
第一二三模块,用于子页面将所述待传递的数据放在所述隐藏的iframe元素的属性src的统一资源定位符的location.hash中;
第一二四模块,用于在代理页面中定义一个变量,监听location.hash中待传递数据是否有变化,如果有变化,将有变化的待传递数据赋值给所述变量;
第一二五模块,用于定位到父页面待变化的元素,将所述变量的值放到所述待变化的元素中。
进一步的,上述克服浏览器同源策略限制的交互设备中,所述第一二四模块,用于在代理页面中定义一个变量,代理页面每隔预设时间获取location.hash中的待传递数据,将获取到的待传递数据与所述变量的值进行比较,如果所述待传递数据与所述变量的值不同,则将所述待传递数据重新赋值给所述变量;
进一步的,上述克服浏览器同源策略限制的交互设备中,所述第二装置,用于以统一资源定位符的location.hash作为标识触发父页面DOM操作,完成不同域的父页面和子页面之间的脚本调用时,包括:
第二二一模块,用于在父页面设置一个iframe元素,并将所述iframe元素的属性src设置为子页面的链接;
第二二二模块,用于设置一个与所述父页面属于同一域的代理页面,在子页面设置一个隐藏的iframe元素,并将所述隐藏的iframe元素的属性src设置为代理页面的链接;
第二二三模块,用于子页面将触发父页面DOM操作的标识放在所述隐藏的iframe元素的属性src的统一资源定位符的location.hash中;
第二二四模块,用于在代理页面中定义一个变量,监听location.hash中所述标识是否有变化,如果有变化,将有变化的标识赋值给所述变量;
第二二五模块,用于代理页面根据所述变量的新赋值进行父页面中相关的脚本调用的DOM操作。
进一步的,上述克服浏览器同源策略限制的交互设备中,所述第二二四模块,用于在代理页面中定义一个变量,代理页面每隔预设时间获取location.hash中的标识,将获取到的标识与所述变量的值进行比较,如果所述标识与所述变量的值不同,则将所述标识重新赋值给所述变量。
与现有技术相比,本申请通过统一资源定位符的location.hash携带待传递的数据在不同域的父页面和子页面之间传递数据,或以统一资源定位符的location.hash作为标识触发父页面或子页面DOM操作,完成不同域的父页面和子页面之间的脚本调用,实现以web前端的方式绕开浏览器同源策略的限制进行交互,解决不同域下的网站之间数据交互和DOM控制问题,尤其能够实现不同域的父页面与子页面间的DOM操作和控制。
附图说明
通过阅读参照以下附图所作的对非限制性实施例所作的详细描述,本申请的其它特征、目的和优点将会变得更明显:
图1示出根据本申请一个方面的克服浏览器同源策略限制的交互方法的流程图;
图2示出本申请一优选的实施例的克服浏览器同源策略限制的交互方法的流程图;
图3示出图1和图2的原理图;
图4示出本申请另一优选的实施例的克服浏览器同源策略限制的交互方法的流程图;
图5示出本申请再一优选的实施例的克服浏览器同源策略限制的交互方法的流程图;
图6示出图4和图5的原理图;
图7示出根据本申请另一个方面的克服浏览器同源策略限制的交互设备的结构图;
图8示出本申请一优选的实施例的克服浏览器同源策略限制的交互设备的结构图;
图9示出本申请另一优选的实施例的克服浏览器同源策略限制的交互设备的结构图;
图10示出本申请再一优选的实施例的克服浏览器同源策略限制的交互设备的结构图。
附图中相同或相似的附图标记代表相同或相似的部件。
具体实施方式
下面结合附图对本申请作进一步详细描述。
在本申请一个典型的配置中,终端、服务网络的设备和可信方均包括一个或多个处理器(CPU)、输入/输出接口、网络接口和内存。
内存可能包括计算机可读介质中的非永久性存储器,随机存取存储器(RAM)和/或非易失性内存等形式,如只读存储器(ROM)或闪存(flashRAM)。内存是计算机可读介质的示例。
计算机可读介质包括永久性和非永久性、可移动和非可移动媒体可以由任何方法或技术来实现信息存储。信息可以是计算机可读指令、数据结构、程序的模块或其他数据。计算机的存储介质的例子包括,但不限于相变内存(PRAM)、静态随机存取存储器(SRAM)、动态随机存取存储器(DRAM)、其他类型的随机存取存储器(RAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、快闪记忆体或其他内存技术、只读光盘只读存储器(CD-ROM)、数字多功能光盘(DVD)或其他光学存储、磁盒式磁带,磁带磁盘存储或其他磁性存储设备或任何其他非传输介质,可用于存储可以被计算设备访问的信息。按照本文中的界定,计算机可读介质不包括非暂存电脑可读媒体(transitorymedia),如调制的数据信号和载波。
根据本申请的一个方面,提供一种克服浏览器同源策略限制的交互方法,该方法包括:
步骤S1,通过统一资源定位符(URL)的location.hash携带待传递的数据在不同域的父页面和子页面之间传递数据;
和/或步骤S2,以统一资源定位符的location.hash作为标识触发父页面或子页面DOM操作,完成不同域的父页面和子页面之间的脚本调用。具体的,在网站的URL中,如“http://123.com#value123”,#value123就是location.hash,其中location.hash值的变化并不会引起页面的刷新和变化。在一个页面可以通过javascript获取到其URL的location.hash。所以可以联想到通过location.hash传递数据或以改变location.hash作为标识触发某DOM操作,完成不同域间的脚本调用。本实施例可以解决因为浏览器同源策略的限制,不同域下的网页之间不能进行数据传递和文档操作的问题,运用web前端的技术方式,在保证浏览器兼容性的基础上,能够准实时的克服浏览器同源策略限制,实现不同域的父页面与子页面间的数据调用和DOM操作。
具体的,不同域之间的父页面和子页面之间传递数据或DOM操作,常见的应用场景有四种情况:
第一种,子页面获取父页面的数据;
第二种,父页面触发子页面的DOM操作,调用子页面脚本执行;
第三种,父页面获取子页面的数据;
第四种,子页面触发父页面的DOM操作,调用父页面的脚本执行。下面通过各优选实施例,对上述四种情况作详细阐述。
先阐述第一种场景的实现,子页面获取父页面的数据,本申请克服浏览器同源策略限制的交互方法一优选的实施例中,如图1和3所示,步骤S11,通过统一资源定位符的location.hash携带待传递的数据在不同域的父页面和子页面之间传递数据中,当子页面获取父页面的待传递数据时,包括:
步骤S111,在父页面设置一个iframe元素,并将所述iframe元素的属性src设置为子页面的链接;
步骤S112,将所述待传递的数据放在属性src的统一资源定位符的location.hash中;
步骤S113,在子页面中定义一个变量,监听location.hash中待传递数据是否有变化,如果有变化,将有变化的待传递数据赋值给所述变量。在此,子页面需要绕开浏览器同源策略限制获取父页面的数据,假设有两个域,分别为a.com,b.com,域a.com中的yu1.html作为父页面,域b.com中的yu2.html作为子页面,在这个父页面yu1.html内设置一个iframe元素,这个iframe的属性src为b.com中的子页面yu2.html的链接,从而引入子页面yu2.html。这里要从yu1.html向yu2.html中传输数据,因为浏览器同源策略的限制,不能直接用同一个域中的父页面与子页面的交互方式iframe.contentWindow.document或document.frames[id].document来传输数据,如果这样会引起浏览器的报错,进而影响页面脚本的执行。所以在需要父页面往子页面传输数据时,可以通过在父页面yu1.html中设置引用子页面yu2.html的iframe的src属性值,把需要传递的数据信息放在src的URL上,具体的说是改变此URL的location.hash中,在#符号后面接上待传递的数据,此时并不会引起子页面yu2.html页面的重载,所以可以在子页面yu2.html中用javascript闭包的方式写入javascript脚本,监听此页面location.hash的变化。
本申请克服浏览器同源策略限制的交互方法一优选的实施例中,在子页面中定义一个变量,监听location.hash中待传递数据是否有变化,如果有变化,将有变化的待传递数据赋值给所述变量,包括:
在子页面中定义一个变量,子页面每隔预设时间获取location.hash中的待传递数据,将获取到的待传递数据与所述变量的值进行比较,如果待传递数据与所述变量的值不同,则将所述待传递数据重新赋值给所述变量。在此,在子页面yu2.html中定义一个变量,在父页面加载完取到location.hash的值赋值给该变量,该变量的初始值是初始的location.hash的值,设置定时器检测location.hash的值,每次将取到新的location.hash的值与该变量的值对比,当location.hash的值发生变化时,将该新的location.hash的值赋值给这个变量,具体是取这个location.hash(如#value123)的#后面的元素值(如value123)作为location.hash的值,然后根据这个元素值的规则进行解析,取到待传递数据,这样就完成了由父页面向子页面传递数据的过程。
本申请克服浏览器同源策略限制的交互方法一优选的实施例中,在父页面设置一个iframe元素,并将所述iframe元素的属性src设置为子页面的链接之后,还包括:
通过对所述iframe元素的css样式的设置使所述子页面不显示。在此,如果只需要由父页面向子页面传递数据即只是进行传值,而不进行页面DOM操作,可以在父页面yu1.html中,将引用子页面yu2.html的iframe的css样式设置为display:none,这样子页面就不显示出来,只完成传值的过程。
再阐述上述第二种场景的实现,父页面触发子页面的DOM操作,调用子页面脚本执行,本申请克服浏览器同源策略限制的交互方法一优选的实施例中,如图2和3所示,步骤S2中的,以统一资源定位符的location.hash作为标识触发子页面DOM操作,完成不同域的父页面和子页面之间的脚本调用,包括:
步骤S211,在父页面设置一个iframe元素,并将所述iframe元素的属性src设置为子页面的链接;
步骤S212,将触发子页面DOM操作的标识放在属性src的统一资源定位符的location.hash中;
步骤S213,在子页面中定义一个变量,监听location.hash中所述标识是否有变化,如果有变化,将有变化的所述标识赋值给所述变量;
步骤S214,子页面根据所述变量的新赋值进行子页面中相关的javascript脚本调用的DOM操作。在此,父页面需要绕开浏览器同源策略限制触发子页面的DOM操作,调用子页面脚本执行,假设有两个域,分别为a.com,b.com,域a.com中的yu1.html作为父页面,域b.com中的yu2.html作为子页面,在这个父页面yu1.html内设置一个iframe元素,这个iframe的属性src为b.com中的子页面yu2.html的链接,从而引入子页面yu2.html。这里要从父页面yu1.html向子页面yu2.html中传输触发子页面DOM操作的标识,因为浏览器同源策略的限制,不能直接用同一个域中的父页面与子页面的交互方式iframe.contentWindow.document或document.frames[id].document来传输触发子页面yu2.html的DOM操作的标识,如果这样会引起浏览器的报错,进而影响页面脚本的执行。所以在需要父页面往子页面传输触发子页面DOM操作的标识时,可以通过在父页面yu1.html中设置引用子页面yu2.html的iframe的src属性值,把需要传的触发子页面DOM操作的标识放在src的URL上,具体的说是改变此URL的location.hash中,在#符号后面接上触发子页面DOM操作的标识,此时并不会引起子页面yu2.html页面的重载,所以可以在子页面yu2.html中用javascript闭包的方式写入javascript脚本,子页面监听此页面location.hash的变化,进行DOM的操作时,在监听到location.hash变化时,进行子页面yu2.html中相关的javascript脚本调用即可。
本申请克服浏览器同源策略限制的交互方法一优选的实施例中,在子页面中定义一个变量,监听location.hash中所述标识是否有变化,如果有变化,将有变化的所述标识赋值给所述变量,包括:
在子页面中定义一个变量,子页面每隔预设时间获取location.hash中的所述标识,将获取到的标识与所述变量的值进行比较,如果所述标识与所述变量的值不同,则将所述标识重新赋值给所述变量。在此,在子页面yu2.html中定义一个变量,在父页面加载完取到location.hash的值,该变量的初始值是初始的location.hash的值,设置定时器检测location.hash的值,每次将取到新的location.hash的值与该变量的值对比,当location.hash的值发生变化时,将该location.hash的值赋值给这个变量,具体是取这个location.hash(如#value123)的#后面的元素值(如value123)作为location.hash的值,然后根据这个元素值的规则进行解析,取到需要的标识,这样就完成了由父页面向子页面传递标识的过程。
上述第一和第二种场景的原理可参见图3。
再阐述上述第三种场景的实现,父页面获取子页面的数据,如图4和6所示,本申请克服浏览器同源策略限制的交互方法一优选的实施例中,步骤S1,通过统一资源定位符的location.hash携带待传递的数据在不同域的父页面和子页面之间传递数据中,当父页面获取子页面的待传递数据时,包括:
步骤S121,在父页面设置一个iframe元素,并将所述iframe元素的属性src设置为子页面的链接,从而形成跨域的环境;
步骤S122,设置一个与所述父页面属于同一域的代理页面,在子页面设置一个隐藏的iframe元素,并将所述隐藏的iframe元素的属性src设置为代理页面的链接;
步骤S123,子页面将所述待传递的数据放在所述隐藏的iframe元素的属性src的统一资源定位符的location.hash中;
步骤S124,在代理页面中定义一个变量,监听location.hash中待传递数据是否有变化,如果有变化,将有变化的待传递数据赋值给所述变量;
步骤S125,定位到父页面待变化的元素,将所述变量的值放到所述待变化的元素中。仍然假设有两个域分别域a.com和域b.com,父页面yu1.html属于域a.com,子页面yu2.html属于域b.com。现在要实现父页面获取子页面的数据,同样因为同源策略的限制,不能直接在yu2.html通过parent.functionName()调用父页面yu1.html中的javascript方法,在此,在父页面设置一个iframe元素,并将所述iframe元素的属性src设置为子页面的链接,从而形成跨域的环境,另外,可设置一个与所述父页面属于同一域的代理页面yu1frame.html,然后可以在域b.com中启用一个“中介”页面即该代理页面yu1frame.html,作为代理去完成父页面yu1.html中DOM操作脚本的调用,因为代理页面yu1frame.html与父页面yu1.html是属于同一个域的,所以是可以进行数据传递的,这样,可以在子页面yu2.html中再设置一个隐藏的iframe,其src属性为代理页面yu1frame.html的链接,当需要在子页面yu2.html中触发父页面yu1.html的脚本调用时,先在子页面yu2.html中改变其中引用代理页面yu1frame.html的iframe的src的统一资源定位符的location.hash,引起代理页面yu1frame.html的location.hash的变化,在代理页面yu1frame.html中用javascript脚本监听location.hash的变化,监听方式可采用定时器循环检测的方式。在代理页面yu1frame.html监测到location.hash变化时,解析location.hash,取得待传递的数据,用parent.parent.去定位到父页面yu1.html中的元素,将待传递的数据放到yu1.html的某个元素的属性中。
本申请克服浏览器同源策略限制的交互方法一优选的实施例中,在代理中定义一个变量,监听location.hash中待传递数据是否有变化,如果有变化,将有变化的待传递数据赋值给所述变量,包括:
在代理页面中定义一个变量,代理页面每隔预设时间获取location.hash中的待传递数据,将获取到的待传递数据与所述变量的值进行比较,如果待传递数据与所述变量的值不同,则将所述待传递数据重新赋值给所述变量。在此,在代理页面yu1frame.html中定义一个变量,在子页面加载完取到location.hash的值,该变量的初始值是初始的location.hash的值,设置定时器检测location.hash的值,每次将取到新的location.hash的值与该变量的值对比,当location.hash的值发生变化时,将该location.hash的值赋值给这个变量,具体是取这个location.hash(如#value123)的#后面的元素值(如value123)作为location.hash的值,然后根据这个元素值的规则进行解析,取到需要的待传递数据。
最后阐述上述第四种场景的实现,子页面触发父页面的DOM操作,调用父页面的脚本执行,如图5和6所示,本申请克服浏览器同源策略限制的交互方法一优选的实施例中,步骤S2中,以统一资源定位符的location.hash作为标识触发父页面DOM操作,完成不同域的父页面和子页面之间的脚本调用,包括:
步骤S221,在父页面设置一个iframe元素,并将所述iframe元素的属性src设置为子页面的链接,以形成跨域的环境;
步骤S222,设置一个与所述父页面属于同一域的代理页面,在子页面设置一个隐藏的iframe元素,并将所述隐藏的iframe元素的属性src设置为代理页面的链接;
步骤S223,子页面将触发父页面DOM操作的标识放在所述隐藏的iframe元素的属性src的统一资源定位符的location.hash中;
步骤S224,在代理页面中定义一个变量,监听location.hash中所述标识是否有变化,如果有变化,将有变化的标识赋值给所述变量;
步骤S225,代理页面根据所述变量的新赋值进行父页面中相关的javascript脚本调用的DOM操作。具体的,仍然假设有两个域分别域a.com和域b.com,父页面yu1.html属于域a.com,子页面yu2.html属于域b.com。现在要在子页面yu2.html中调用父页面yu1.html中的脚本完成页面yu1.html中的DOM操作。同样因为同源策略的限制,不能直接在yu2.html通过parent.functionName()调用父页面yu1.html中的javascript方法。可以在父页面设置一个iframe元素,并将所述iframe元素的属性src设置为子页面的链接,以形成跨域的环境,另外,设置一个与所述父页面属于同一域的代理页面yu1frame.html,这时可以在域b.com中启用一个“中介”页面即所述代理页面yu1frame.html,作为代理去完成父页面yu1.html中DOM操作脚本的调用,因为代理页面yu1frame.html与父页面yu1.html是属于同一个域的,所以是可以进行脚本调用的。这样在子页面yu2.html中再设置一个隐藏的iframe,其src属性为代理页面yu1frame.html的链接,当需要在子页面yu2.html中触发父页面yu1.html的脚本调用时,先在子页面yu2.html中改变其中引用代理页面yu1frame.html的iframe的src的统一资源定位符的location.hash,引起代理页面yu1frame.html的location.hash的变化,在代理页面yu1frame.html中用javascript脚本监听location.hash的变化,监听方式可采用定时器循环检测的方式。在代理页面yu1frame.html监听到location.hash变化时,解析location.hash,取得变化的标识,然后根据变化的标识在代理页面yu1frame.html中通过parent.parent.FunctionName()即可以调用到父页面yu1.html中的javascript方法,完成DOM操作。例如,以点击域2中的链接调用域1的中的弹出框方法去加载为例,首先用域1的页面1的iframe去加载域2页面,域2的页面中再用一个隐藏的iframe去加载域1中专门用于代理的页面3,在点击域2的页面时,将链接值赋予域1页面3的location.hash,域1的页面3监听到location.hash的变化,解析后得到链接值,然后以同域父子页面交互的方式parent.parent.方法名,调用域1页面1的脚本,从而达到克服浏览器同源策略进行脚本调用的效果。
本申请克服浏览器同源策略限制的交互方法一优选的实施例中,在代理中定义一个变量,监听location.hash中所述标识是否有变化,如果有变化,将有变化的待传递数据赋值给所述变量,包括:
在代理页面中定义一个变量,父页面每隔预设时间获取location.hash中的标识,将获取到的标识与所述变量的值进行比较,如果标识与所述变量的值不同,则将所述标识重新赋值给所述变量。在此,在代理页面yu1frame.html中定义一个变量,在子页面加载完代理页面yu1frame.html取到location.hash的值,该变量的初始值是初始的location.hash的值,设置定时器检测location.hash的值,代理页面yu1frame.html每次将取到新的location.hash的值与该变量的值对比,当location.hash的值发生变化时,将该location.hash的值赋值给这个变量,具体是取这个location.hash(如#value123)的#后面的元素值(如value123)作为location.hash的值,然后根据这个元素值的规则进行解析,取到需要的标识。
上述第三和第四种场景的原理可参见图6。
以上即完成了四种场景下绕开浏览器同源策略的交互操作,另外,因为监听location.hash的变化需要用定时器循环检测,所以是一种准实时的方式。具体定时器的频率设置为多少,可以根据具体的应用场景决定。
根据本申请的另一面,还提供一种克服浏览器同源策略限制的交互设备,该设备包括:
第一装置1,用于通过统一资源定位符的location.hash携带待传递的数据在不同域的父页面和子页面之间传递数据;
和/或第二装置2,用于以统一资源定位符的location.hash作为标识触发父页面或子页面DOM操作,完成不同域的父页面和子页面之间的脚本调用。具体的,在网站的URL中,如“http://123.com#value123”,#value123就是location.hash,其中location.hash值的变化并不会引起页面的刷新和变化。在一个页面可以通过javascript获取到其URL的location.hash。所以可以联想到通过location.hash传递数据或以改变location.hash作为标识触发某DOM操作,完成不同域间的脚本调用。本实施例可以解决因为浏览器同源策略的限制,不同域下的网页之间不能进行数据传递和文档操作的问题,运用web前端的技术方式,在保证浏览器兼容性的基础上,能够准实时的克服浏览器同源策略限制,实现不同域的父页面与子页面间的数据调用和DOM操作。
具体的,不同域之间的父页面和子页面之间传递数据或DOM操作,常见的应用场景有四种情况:
第一种,子页面获取父页面的数据;
第二种,父页面触发子页面的DOM操作,调用子页面脚本执行;
第三种,父页面获取子页面的数据;
第四种,子页面触发父页面的DOM操作,调用父页面的脚本执行。下面通过各优选实施例,对上述四种情况作详细阐述。
先阐述第一种场景的实现,子页面获取父页面的数据,本申请的克服浏览器同源策略限制的交互设备一优选的实施例中,如图3和7所示,所述第一装置1,用于子页面获取父页面的待传递数据时,包括:
第一一一模块111,用于在父页面设置一个iframe元素,并将所述iframe元素的属性src设置为子页面的链接;
第一一二模块112,用于将所述待传递的数据放在属性src的统一资源定位符的location.hash中;
第一一三模块113,用于在子页面中定义一个变量,监听location.hash中待传递数据是否有变化,如果有变化,将有变化的待传递数据赋值给所述变量。在此,子页面需要绕开浏览器同源策略限制获取父页面的数据,假设有两个域,分别为a.com,b.com,域a.com中的yu1.html作为父页面,域b.com中的yu2.html作为子页面,在这个父页面yu1.html内设置一个iframe元素,这个iframe的属性src为b.com中的子页面yu2.html的链接,从而引入子页面yu2.html。这里要从yu1.html向yu2.html中传输数据,因为浏览器同源策略的限制,不能直接用同一个域中的父页面与子页面的交互方式iframe.contentWindow.document或document.frames[id].document来传输数据,如果这样会引起浏览器的报错,进而影响页面脚本的执行。所以在需要父页面往子页面传输数据时,可以通过在父页面yu1.html中设置引用子页面yu2.html的iframe的src属性值,把需要传递的数据信息放在src的URL上,具体的说是改变此URL的location.hash中,在#符号后面接上待传递的数据,此时并不会引起子页面yu2.html页面的重载,所以可以在子页面yu2.html中用javascript闭包的方式写入javascript脚本,监听此页面location.hash的变化。
本申请的克服浏览器同源策略限制的交互设备一优选的实施例中,所述第一一三模块113,用于在子页面中定义一个变量,子页面每隔预设时间获取location.hash中的待传递数据,将获取到的待传递数据与所述变量的值进行比较,如果待传递数据与所述变量的值不同,则将所述待传递数据重新赋值给所述变量。在此,在子页面yu2.html中定义一个变量,在父页面加载完取到location.hash的值赋值给该变量,该变量的初始值是初始的location.hash的值,设置定时器检测location.hash的值,每次将取到新的location.hash的值与该变量的值对比,当location.hash的值发生变化时,将该新的location.hash的值赋值给这个变量,具体是取这个location.hash(如#value123)的#后面的元素值(如value123)作为location.hash的值,然后根据这个元素值的规则进行解析,取到待传递数据,这样就完成了由父页面向子页面传递数据的过程。
本申请的克服浏览器同源策略限制的交互设备一优选的实施例中,第一一一模块111,还用于通过对所述iframe元素的css样式的设置使所述子页面不显示。在此,如果只需要由父页面向子页面传递数据即只是进行传值,而不进行页面DOM操作,可以在父页面yu1.html中,将引用子页面yu2.html的iframe的css样式设置为display:none,这样子页面就不显示出来,只完成传值的过程。
再阐述上述第二种场景的实现,父页面触发子页面的DOM操作,调用子页面脚本执行,本申请的克服浏览器同源策略限制的交互设备一优选的实施例中,如图3和8所示,所述第二装置2,用于以统一资源定位符的location.hash作为标识触发子页面DOM操作,完成不同域的父页面和子页面之间的脚本调用时,包括:
第二一一模块211,用于在父页面设置一个iframe元素,并将所述iframe元素的属性src设置为子页面的链接;
第二一二模块212,用于将触发子页面DOM操作的标识放在属性src的统一资源定位符的location.hash中;
第二一三模块213,用于在子页面中定义一个变量,监听location.hash中所述标识是否有变化,如果有变化,将有变化的所述标识赋值给所述变量;
第二一四模块214,用于子页面根据所述变量的新赋值进行子页面中相关的脚本调用的DOM操作。在此,父页面需要绕开浏览器同源策略限制触发子页面的DOM操作,调用子页面脚本执行,假设有两个域,分别为a.com,b.com,域a.com中的yu1.html作为父页面,域b.com中的yu2.html作为子页面,在这个父页面yu1.html内设置一个iframe元素,这个iframe的属性src为b.com中的子页面yu2.html的链接,从而引入子页面yu2.html。这里要从父页面yu1.html向子页面yu2.html中传输触发子页面DOM操作的标识,因为浏览器同源策略的限制,不能直接用同一个域中的父页面与子页面的交互方式iframe.contentWindow.document或document.frames[id].document来传输触发子页面yu2.html的DOM操作的标识,如果这样会引起浏览器的报错,进而影响页面脚本的执行。所以在需要父页面往子页面传输触发子页面DOM操作的标识时,可以通过在父页面yu1.html中设置引用子页面yu2.html的iframe的src属性值,把需要传的触发子页面DOM操作的标识放在src的URL上,具体的说是改变此URL的location.hash中,在#符号后面接上触发子页面DOM操作的标识,此时并不会引起子页面yu2.html页面的重载,所以可以在子页面yu2.html中用javascript闭包的方式写入javascript脚本,子页面监听此页面location.hash的变化,进行DOM的操作时,在监听到location.hash变化时,进行子页面yu2.html中相关的javascript脚本调用即可。
本申请的克服浏览器同源策略限制的交互设备一优选的实施例中,所述第二一三模块213,用于在子页面中定义一个变量,子页面每隔预设时间获取location.hash中的所述标识,将获取到的标识与所述变量的值进行比较,如果所述标识与所述变量的值不同,则将所述标识重新赋值给所述变量。在此,在子页面yu2.html中定义一个变量,在父页面加载完取到location.hash的值,该变量的初始值是初始的location.hash的值,设置定时器检测location.hash的值,每次将取到新的location.hash的值与该变量的值对比,当location.hash的值发生变化时,将该location.hash的值赋值给这个变量,具体是取这个location.hash(如#value123)的#后面的元素值(如value123)作为location.hash的值,然后根据这个元素值的规则进行解析,取到需要的标识,这样就完成了由父页面向子页面传递标识的过程。
上述第一和第二种场景的原理可参见图3。
再阐述上述第三种场景的实现,父页面获取子页面的数据,本申请的克服浏览器同源策略限制的交互设备一优选的实施例中,如图6和9所示,所述第一装置1,用于父页面获取子页面的待传递数据时,包括:
第一二一模块121,用于在父页面设置一个iframe元素,并将所述iframe元素的属性src设置为子页面的链接;
第一二二模块122,用于设置一个与所述父页面属于同一域的代理页面,在子页面设置一个隐藏的iframe元素,并将所述隐藏的iframe元素的属性src设置为所述代理页面的链接;
第一二三模块123,用于子页面将所述待传递的数据放在所述隐藏的iframe元素的属性src的统一资源定位符的location.hash中;
第一二四模块124,用于在代理页面中定义一个变量,监听location.hash中待传递数据是否有变化,如果有变化,将有变化的待传递数据赋值给所述变量;
第一二五模块125,用于定位到父页面待变化的元素,将所述变量的值放到所述待变化的元素中。仍然假设有两个域分别域a.com和域b.com,父页面yu1.html属于域a.com,子页面yu2.html属于域b.com。现在要实现父页面获取子页面的数据,同样因为同源策略的限制,不能直接在yu2.html通过parent.functionName()调用父页面yu1.html中的javascript方法,在此,在父页面设置一个iframe元素,并将所述iframe元素的属性src设置为子页面的链接,从而形成跨域的环境,另外,可设置一个与所述父页面属于同一域的代理页面yu1frame.html,然后可以在域b.com中启用一个“中介”页面即该代理页面yu1frame.html,作为代理去完成父页面yu1.html中DOM操作脚本的调用,因为代理页面yu1frame.html与父页面yu1.html是属于同一个域的,所以是可以进行数据传递的,这样,可以在子页面yu2.html中再设置一个隐藏的iframe,其src属性为代理页面yu1frame.html的链接,当需要在子页面yu2.html中触发父页面yu1.html的脚本调用时,先在子页面yu2.html中改变其中引用代理页面yu1frame.html的iframe的src的统一资源定位符的location.hash,引起代理页面yu1frame.html的location.hash的变化,在代理页面yu1frame.html中用javascript脚本监听location.hash的变化,监听方式可采用定时器循环检测的方式。在代理页面yu1frame.html监测到location.hash变化时,解析location.hash,取得待传递的数据,用parent.parent.去定位到父页面yu1.html中的元素,将待传递的数据放到yu1.html的某个元素的属性中。
本申请的克服浏览器同源策略限制的交互设备一优选的实施例中,所述第一二四模块124,用于在代理页面中定义一个变量,代理页面每隔预设时间获取location.hash中的待传递数据,将获取到的待传递数据与所述变量的值进行比较,如果所述待传递数据与所述变量的值不同,则将所述待传递数据重新赋值给所述变量。在此,在代理页面yu1frame.html中定义一个变量,在子页面加载完取到location.hash的值,该变量的初始值是初始的location.hash的值,设置定时器检测location.hash的值,每次将取到新的location.hash的值与该变量的值对比,当location.hash的值发生变化时,将该location.hash的值赋值给这个变量,具体是取这个location.hash(如#value123)的#后面的元素值(如value123)作为location.hash的值,然后根据这个元素值的规则进行解析,取到需要的待传递数据。
最后阐述上述第四种场景的实现,子页面触发父页面的DOM操作,调用父页面的脚本执行,本申请的克服浏览器同源策略限制的交互设备一优选的实施例中,如图6和10所示,所述第二装置2,用于以统一资源定位符的location.hash作为标识触发父页面DOM操作,完成不同域的父页面和子页面之间的脚本调用时,包括:
第二二一模块221,用于在父页面设置一个iframe元素,并将所述iframe元素的属性src设置为子页面的链接;
第二二二模块222,用于设置一个与所述父页面属于同一域的代理页面,在子页面设置一个隐藏的iframe元素,并将所述隐藏的iframe元素的属性src设置为代理页面的链接;
第二二三模块223,用于子页面将触发父页面DOM操作的标识放在所述隐藏的iframe元素的属性src的统一资源定位符的location.hash中;
第二二四模块225,用于在代理页面中定义一个变量,监听location.hash中所述标识是否有变化,如果有变化,将有变化的标识赋值给所述变量;
第二二五模块225,用于代理页面根据所述变量的新赋值进行父页面中相关的脚本调用的DOM操作。具体的,仍然假设有两个域分别域a.com和域b.com,父页面yu1.html属于域a.com,子页面yu2.html属于域b.com。现在要在子页面yu2.html中调用父页面yu1.html中的脚本完成页面yu1.html中的DOM操作。同样因为同源策略的限制,不能直接在yu2.html通过parent.functionName()调用父页面yu1.html中的javascript方法。可以在父页面设置一个iframe元素,并将所述iframe元素的属性src设置为子页面的链接,以形成跨域的环境,另外,设置一个与所述父页面属于同一域的代理页面yu1frame.html,这时可以在域b.com中启用一个“中介”页面即所述代理页面yu1frame.html,作为代理去完成父页面yu1.html中DOM操作脚本的调用,因为代理页面yu1frame.html与父页面yu1.html是属于同一个域的,所以是可以进行脚本调用的。这样在子页面yu2.html中再设置一个隐藏的iframe,其src属性为代理页面yu1frame.html的链接,当需要在子页面yu2.html中触发父页面yu1.html的脚本调用时,先在子页面yu2.html中改变其中引用代理页面yu1frame.html的iframe的src的统一资源定位符的location.hash,引起代理页面yu1frame.html的location.hash的变化,在代理页面yu1frame.html中用javascript脚本监听location.hash的变化,监听方式可采用定时器循环检测的方式。在代理页面yu1frame.html监听到location.hash变化时,解析location.hash,取得变化的标识,然后根据变化的标识在代理页面yu1frame.html中通过parent.parent.FunctionName()即可以调用到父页面yu1.html中的javascript方法,完成DOM操作。例如,以点击域2中的链接调用域1的中的弹出框方法去加载为例,首先用域1的页面1的iframe去加载域2页面,域2的页面中再用一个隐藏的iframe去加载域1中专门用于代理的页面3,在点击域2的页面时,将链接值赋予域1页面3的location.hash,域1的页面3监听到location.hash的变化,解析后得到链接值,然后以同域父子页面交互的方式parent.parent.方法名,调用域1页面1的脚本,从而达到克服浏览器同源策略进行脚本调用的效果。
本申请的克服浏览器同源策略限制的交互设备一优选的实施例中,所述第二二四模块225,用于在代理页面中定义一个变量,代理页面每隔预设时间获取location.hash中的标识,将获取到的标识与所述变量的值进行比较,如果所述标识与所述变量的值不同,则将所述标识重新赋值给所述变量。在此,在代理页面yu1frame.html中定义一个变量,在子页面加载完代理页面yu1frame.html取到location.hash的值,该变量的初始值是初始的location.hash的值,设置定时器检测location.hash的值,代理页面yu1frame.html每次将取到新的location.hash的值与该变量的值对比,当location.hash的值发生变化时,将该location.hash的值赋值给这个变量,具体是取这个location.hash(如#value123)的#后面的元素值(如value123)作为location.hash的值,然后根据这个元素值的规则进行解析,取到需要的标识。
上述第三和第四种场景的原理可参见图6。
综上所述,本申请涉及web前端开发领域,通过统一资源定位符的location.hash携带待传递的数据在不同域的父页面和子页面之间传递数据,或以统一资源定位符的location.hash作为标识触发父页面或子页面DOM操作,完成不同域的父页面和子页面之间的脚本调用,实现以web前端的方式绕开浏览器同源策略的限制进行交互,解决不同域下的网站之间数据交互和DOM控制问题,尤其能够实现不同域的父页面与子页面间的DOM操作和控制。
显然,本领域的技术人员可以对本申请进行各种改动和变型而不脱离本申请的精神和范围。这样,倘若本申请的这些修改和变型属于本申请权利要求及其等同技术的范围之内,则本申请也意图包含这些改动和变型在内。
需要注意的是,本申请可在软件和/或软件与硬件的组合体中被实施,例如,可采用专用集成电路(ASIC)、通用目的计算机或任何其他类似硬件设备来实现。在一个实施例中,本申请的软件程序可以通过处理器执行以实现上文所述步骤或功能。同样地,本申请的软件程序(包括相关的数据结构)可以被存储到计算机可读记录介质中,例如,RAM存储器,磁或光驱动器或软磁盘及类似设备。另外,本申请的一些步骤或功能可采用硬件来实现,例如,作为与处理器配合从而执行各个步骤或功能的电路。
另外,本申请的一部分可被应用为计算机程序产品,例如计算机程序指令,当其被计算机执行时,通过该计算机的操作,可以调用或提供根据本申请的方法和/或技术方案。而调用本申请的方法的程序指令,可能被存储在固定的或可移动的记录介质中,和/或通过广播或其他信号承载媒体中的数据流而被传输,和/或被存储在根据所述程序指令运行的计算机设备的工作存储器中。在此,根据本申请的一个实施例包括一个装置,该装置包括用于存储计算机程序指令的存储器和用于执行程序指令的处理器,其中,当该计算机程序指令被该处理器执行时,触发该装置运行基于前述根据本申请的多个实施例的方法和/或技术方案。
对于本领域技术人员而言,显然本申请不限于上述示范性实施例的细节,而且在不背离本申请的精神或基本特征的情况下,能够以其他的具体形式实现本申请。因此,无论从哪一点来看,均应将实施例看作是示范性的,而且是非限制性的,本申请的范围由所附权利要求而不是上述说明限定,因此旨在将落在权利要求的等同要件的含义和范围内的所有变化涵括在本申请内。不应将权利要求中的任何附图标记视为限制所涉及的权利要求。此外,显然“包括”一词不排除其他单元或步骤,单数不排除复数。装置权利要求中陈述的多个单元或装置也可以由一个单元或装置通过软件或者硬件来实现。第一,第二等词语用来表示名称,而并不表示任何特定的顺序。
Claims (20)
1.一种克服浏览器同源策略限制的交互方法,其中,该方法包括:
通过统一资源定位符的location.hash携带待传递的数据在不同域的父页面和子页面之间传递数据;
和/或以统一资源定位符的location.hash作为标识触发父页面或子页面DOM操作,完成不同域的父页面和子页面之间的脚本调用。
2.如权利要求1所述的克服浏览器同源策略限制的交互方法,其中,通过统一资源定位符的location.hash携带待传递的数据在不同域的父页面和子页面之间传递数据中,当子页面获取父页面的待传递数据时,包括:
在父页面设置一个iframe元素,并将所述iframe元素的属性src设置为子页面的链接;
将所述待传递的数据放在属性src的统一资源定位符的location.hash中;
在子页面中定义一个变量,监听location.hash中待传递数据是否有变化,如果有变化,将有变化的待传递数据赋值给所述变量。
3.如权利要求2所述的克服浏览器同源策略限制的交互方法,其中,在子页面中定义一个变量,监听location.hash中待传递数据是否有变化,如果有变化,将有变化的待传递数据赋值给所述变量,包括:
在子页面中定义一个变量,子页面每隔预设时间获取location.hash中的待传递数据,将获取到的待传递数据与所述变量的值进行比较,如果待传递数据与所述变量的值不同,则将所述待传递数据重新赋值给所述变量。
4.如权利要求2所述的克服浏览器同源策略限制的交互方法,其中,在父页面设置一个iframe元素,并将所述iframe元素的属性src设置为子页面的链接之后,还包括:
通过对所述iframe元素的css样式的设置使所述子页面不显示。
5.如权利要求1所述的克服浏览器同源策略限制的交互方法,其中,以统一资源定位符的location.hash作为标识触发子页面DOM操作,完成不同域的父页面和子页面之间的脚本调用,包括:
在父页面设置一个iframe元素,并将所述iframe元素的属性src设置为子页面的链接;
将触发子页面DOM操作的标识放在属性src的统一资源定位符的location.hash中;
在子页面中定义一个变量,监听location.hash中所述标识是否有变化,如果有变化,将有变化的所述标识赋值给所述变量;
子页面根据所述变量的新赋值进行子页面中相关的脚本调用的DOM操作。
6.如权利要求5所述的克服浏览器同源策略限制的交互方法,其中,在子页面中定义一个变量,监听location.hash中所述标识是否有变化,如果有变化,将有变化的所述标识赋值给所述变量,包括:
在子页面中定义一个变量,子页面每隔预设时间获取location.hash中的所述标识,将获取到的标识与所述变量的值进行比较,如果所述标识与所述变量的值不同,则将所述标识重新赋值给所述变量。
7.如权利要求1所述的克服浏览器同源策略限制的交互方法,其中,通过统一资源定位符的location.hash携带待传递的数据在不同域的父页面和子页面之间传递数据中,当父页面获取子页面的待传递数据时,包括:
在父页面设置一个iframe元素,并将所述iframe元素的属性src设置为子页面的链接;
设置一个与所述父页面属于同一域的代理页面,在子页面设置一个隐藏的iframe元素,并将所述隐藏的iframe元素的属性src设置为所述代理页面的链接;
子页面将所述待传递的数据放在所述隐藏的iframe元素的属性src的统一资源定位符的location.hash中;
在代理页面中定义一个变量,监听location.hash中待传递数据是否有变化,如果有变化,将有变化的待传递数据赋值给所述变量;
定位到父页面待变化的元素,将所述变量的值放到所述待变化的元素中。
8.如权利要求7所述的克服浏览器同源策略限制的交互方法,其中,在代理页面中定义一个变量,监听location.hash中待传递数据是否有变化,如果有变化,将有变化的待传递数据赋值给所述变量,包括:
在代理页面中定义一个变量,代理页面每隔预设时间获取location.hash中的待传递数据,将获取到的待传递数据与所述变量的值进行比较,如果所述待传递数据与所述变量的值不同,则将所述待传递数据重新赋值给所述变量。
9.如权利要求1所述的克服浏览器同源策略限制的交互方法,其中,以统一资源定位符的location.hash作为标识触发父页面DOM操作,完成不同域的父页面和子页面之间的脚本调用,包括:
在父页面设置一个iframe元素,并将所述iframe元素的属性src设置为子页面的链接;
设置一个与所述父页面属于同一域的代理页面,在子页面设置一个隐藏的iframe元素,并将所述隐藏的iframe元素的属性src设置为代理页面的链接;
子页面将触发父页面DOM操作的标识放在所述隐藏的iframe元素的属性src的统一资源定位符的location.hash中;
在代理页面中定义一个变量,监听location.hash中所述标识是否有变化,如果有变化,将有变化的标识赋值给所述变量;
代理页面根据所述变量的新赋值进行父页面中相关的脚本调用的DOM操作。
10.如权利要求9所述的克服浏览器同源策略限制的交互方法,其中,在代理页面中定义一个变量,监听location.hash中所述标识是否有变化,如果有变化,将有变化的标识赋值给所述变量,包括:
在代理页面中定义一个变量,代理页面每隔预设时间获取location.hash中的标识,将获取到的标识与所述变量的值进行比较,如果所述标识与所述变量的值不同,则将所述标识重新赋值给所述变量。
11.一种克服浏览器同源策略限制的交互设备,其中,该设备包括:
第一装置,用于通过统一资源定位符的location.hash携带待传递的数据在不同域的父页面和子页面之间传递数据;
和/或第二装置,用于以统一资源定位符的location.hash作为标识触发父页面或子页面DOM操作,完成不同域的父页面和子页面之间的脚本调用。
12.如权利要求11所述的克服浏览器同源策略限制的交互设备,其中,所述第一装置,用于子页面获取父页面的待传递数据时,包括:
第一一一模块,用于在父页面设置一个iframe元素,并将所述iframe元素的属性src设置为子页面的链接;
第一一二模块,用于将所述待传递的数据放在属性src的统一资源定位符的location.hash中;
第一一三模块,用于在子页面中定义一个变量,监听location.hash中待传递数据是否有变化,如果有变化,将有变化的待传递数据赋值给所述变量。
13.如权利要求12所述的克服浏览器同源策略限制的交互设备,其中,所述第一一三模块,用于在子页面中定义一个变量,子页面每隔预设时间获取location.hash中的待传递数据,将获取到的待传递数据与所述变量的值进行比较,如果待传递数据与所述变量的值不同,则将所述待传递数据重新赋值给所述变量。
14.如权利要求12所述的克服浏览器同源策略限制的交互设备,其中,第一一一模块,还用于通过对所述iframe元素的css样式的设置使所述子页面不显示。
15.如权利要求11所述的克服浏览器同源策略限制的交互设备,其中,所述第二装置,用于以统一资源定位符的location.hash作为标识触发子页面DOM操作,完成不同域的父页面和子页面之间的脚本调用时,包括:
第二一一模块,用于在父页面设置一个iframe元素,并将所述iframe元素的属性src设置为子页面的链接;
第二一二模块,用于将触发子页面DOM操作的标识放在属性src的统一资源定位符的location.hash中;
第二一三模块,用于在子页面中定义一个变量,监听location.hash中所述标识是否有变化,如果有变化,将有变化的所述标识赋值给所述变量;
第二一四模块,用于子页面根据所述变量的新赋值进行子页面中相关的脚本调用的DOM操作。
16.如权利要求15所述的克服浏览器同源策略限制的交互设备,其中,所述第二一三模块,用于在子页面中定义一个变量,子页面每隔预设时间获取location.hash中的所述标识,将获取到的标识与所述变量的值进行比较,如果所述标识与所述变量的值不同,则将所述标识重新赋值给所述变量。
17.如权利要求11所述的克服浏览器同源策略限制的交互设备,其中,所述第一装置,用于父页面获取子页面的待传递数据时,包括:
第一二一模块,用于在父页面设置一个iframe元素,并将所述iframe元素的属性src设置为子页面的链接;
第一二二模块,用于设置一个与所述父页面属于同一域的代理页面,在子页面设置一个隐藏的iframe元素,并将所述隐藏的iframe元素的属性src设置为所述代理页面的链接;
第一二三模块,用于子页面将所述待传递的数据放在所述隐藏的iframe元素的属性src的统一资源定位符的location.hash中;
第一二四模块,用于在代理页面中定义一个变量,监听location.hash中待传递数据是否有变化,如果有变化,将有变化的待传递数据赋值给所述变量;
第一二五模块,用于定位到父页面待变化的元素,将所述变量的值放到所述待变化的元素中。
18.如权利要求17所述的克服浏览器同源策略限制的交互设备,其中,所述第一二四模块,用于在代理页面中定义一个变量,代理页面每隔预设时间获取location.hash中的待传递数据,将获取到的待传递数据与所述变量的值进行比较,如果所述待传递数据与所述变量的值不同,则将所述待传递数据重新赋值给所述变量。
19.如权利要求11所述的克服浏览器同源策略限制的交互设备,其中,所述第二装置,用于以统一资源定位符的location.hash作为标识触发父页面DOM操作,完成不同域的父页面和子页面之间的脚本调用时,包括:
第二二一模块,用于在父页面设置一个iframe元素,并将所述iframe元素的属性src设置为子页面的链接;
第二二二模块,用于设置一个与所述父页面属于同一域的代理页面,在子页面设置一个隐藏的iframe元素,并将所述隐藏的iframe元素的属性src设置为代理页面的链接;
第二二三模块,用于子页面将触发父页面DOM操作的标识放在所述隐藏的iframe元素的属性src的统一资源定位符的location.hash中;
第二二四模块,用于在代理页面中定义一个变量,监听location.hash中所述标识是否有变化,如果有变化,将有变化的标识赋值给所述变量;
第二二五模块,用于代理页面根据所述变量的新赋值进行父页面中相关的脚本调用的DOM操作。
20.如权利要求19所述的克服浏览器同源策略限制的交互设备,其中,所述第二二四模块,用于在代理页面中定义一个变量,代理页面每隔预设时间获取location.hash中的标识,将获取到的标识与所述变量的值进行比较,如果所述标识与所述变量的值不同,则将所述标识重新赋值给所述变量。
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN201510566229.6A CN105183851A (zh) | 2015-09-08 | 2015-09-08 | 克服浏览器同源策略限制的交互方法及设备 |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN201510566229.6A CN105183851A (zh) | 2015-09-08 | 2015-09-08 | 克服浏览器同源策略限制的交互方法及设备 |
Publications (1)
Publication Number | Publication Date |
---|---|
CN105183851A true CN105183851A (zh) | 2015-12-23 |
Family
ID=54905932
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN201510566229.6A Pending CN105183851A (zh) | 2015-09-08 | 2015-09-08 | 克服浏览器同源策略限制的交互方法及设备 |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN105183851A (zh) |
Cited By (9)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN106201562A (zh) * | 2015-04-30 | 2016-12-07 | 深圳市腾讯计算机系统有限公司 | 一种页面切换方法及装置 |
CN108574709A (zh) * | 2017-03-10 | 2018-09-25 | 北京京东尚科信息技术有限公司 | 跨域操作的实现方法和装置 |
CN109274780A (zh) * | 2018-08-02 | 2019-01-25 | 平安科技(深圳)有限公司 | 跨域名数据传输方法、装置、计算机设备和存储介质 |
CN109302493A (zh) * | 2018-11-15 | 2019-02-01 | 北京金山云网络技术有限公司 | 一种用户信息共享方法、装置、电子设备及存储介质 |
CN109669847A (zh) * | 2017-10-13 | 2019-04-23 | 北京国双科技有限公司 | 信息处理方法及装置 |
CN110321507A (zh) * | 2019-07-09 | 2019-10-11 | 中国工商银行股份有限公司 | 浏览器跨域通信方法及装置 |
CN111125578A (zh) * | 2019-11-22 | 2020-05-08 | 拉扎斯网络科技(上海)有限公司 | 页面显示方法、页面显示装置、存储介质和电子设备 |
CN112069428A (zh) * | 2020-09-15 | 2020-12-11 | 成都知道创宇信息技术有限公司 | 界面显示方法、装置及服务器 |
CN113220396A (zh) * | 2021-05-11 | 2021-08-06 | 北京达佳互联信息技术有限公司 | 一种嵌入页面管理方法和装置、电子设备、存储介质 |
Citations (3)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN101771676A (zh) * | 2008-12-31 | 2010-07-07 | 华为技术有限公司 | 一种跨域授权的设置、鉴权方法、相关装置及系统 |
US20110231240A1 (en) * | 2010-02-08 | 2011-09-22 | Kent Matthew Schoen | Communicating Information in a Social Network System about Activities from Another Domain |
CN103207863A (zh) * | 2012-01-13 | 2013-07-17 | 腾讯科技(深圳)有限公司 | 页面跨域交互方法及终端 |
-
2015
- 2015-09-08 CN CN201510566229.6A patent/CN105183851A/zh active Pending
Patent Citations (3)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN101771676A (zh) * | 2008-12-31 | 2010-07-07 | 华为技术有限公司 | 一种跨域授权的设置、鉴权方法、相关装置及系统 |
US20110231240A1 (en) * | 2010-02-08 | 2011-09-22 | Kent Matthew Schoen | Communicating Information in a Social Network System about Activities from Another Domain |
CN103207863A (zh) * | 2012-01-13 | 2013-07-17 | 腾讯科技(深圳)有限公司 | 页面跨域交互方法及终端 |
Cited By (15)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN106201562A (zh) * | 2015-04-30 | 2016-12-07 | 深圳市腾讯计算机系统有限公司 | 一种页面切换方法及装置 |
CN108574709B (zh) * | 2017-03-10 | 2021-09-07 | 北京京东尚科信息技术有限公司 | 跨域操作的实现方法和装置 |
CN108574709A (zh) * | 2017-03-10 | 2018-09-25 | 北京京东尚科信息技术有限公司 | 跨域操作的实现方法和装置 |
CN109669847A (zh) * | 2017-10-13 | 2019-04-23 | 北京国双科技有限公司 | 信息处理方法及装置 |
CN109274780A (zh) * | 2018-08-02 | 2019-01-25 | 平安科技(深圳)有限公司 | 跨域名数据传输方法、装置、计算机设备和存储介质 |
CN109274780B (zh) * | 2018-08-02 | 2023-01-10 | 平安科技(深圳)有限公司 | 跨域名数据传输方法、装置、计算机设备和存储介质 |
CN109302493A (zh) * | 2018-11-15 | 2019-02-01 | 北京金山云网络技术有限公司 | 一种用户信息共享方法、装置、电子设备及存储介质 |
CN110321507B (zh) * | 2019-07-09 | 2022-01-28 | 中国工商银行股份有限公司 | 浏览器跨域通信方法及装置 |
CN110321507A (zh) * | 2019-07-09 | 2019-10-11 | 中国工商银行股份有限公司 | 浏览器跨域通信方法及装置 |
CN111125578A (zh) * | 2019-11-22 | 2020-05-08 | 拉扎斯网络科技(上海)有限公司 | 页面显示方法、页面显示装置、存储介质和电子设备 |
CN111125578B (zh) * | 2019-11-22 | 2024-03-12 | 拉扎斯网络科技(上海)有限公司 | 页面显示方法、页面显示装置、存储介质和电子设备 |
CN112069428A (zh) * | 2020-09-15 | 2020-12-11 | 成都知道创宇信息技术有限公司 | 界面显示方法、装置及服务器 |
CN112069428B (zh) * | 2020-09-15 | 2023-06-02 | 成都知道创宇信息技术有限公司 | 界面显示方法、装置及服务器 |
CN113220396A (zh) * | 2021-05-11 | 2021-08-06 | 北京达佳互联信息技术有限公司 | 一种嵌入页面管理方法和装置、电子设备、存储介质 |
CN113220396B (zh) * | 2021-05-11 | 2024-04-16 | 北京达佳互联信息技术有限公司 | 一种嵌入页面管理方法和装置、电子设备、存储介质 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
CN105183851A (zh) | 克服浏览器同源策略限制的交互方法及设备 | |
US20160283499A1 (en) | Webpage advertisement interception method, device and browser | |
CN102932197A (zh) | 一种测试方法及测试系统 | |
CN110442815B (zh) | 页面生成方法、系统、装置及计算机可读存储介质 | |
CN107807937B (zh) | 一种网站seo处理方法、装置及系统 | |
WO2014159735A1 (en) | Creating rules for use in third-party tag management systems | |
CN103778365B (zh) | 一种检测网页隐藏内容的方法,及设备 | |
CN104850602A (zh) | 一种基于互联网网页的渲染刷新实现方法及装置 | |
CN102637135A (zh) | 用于编译层叠样式表的方法和设备 | |
CN106126693A (zh) | 一种网页的相关数据的发送方法及装置 | |
CN106909361A (zh) | 基于模版引擎的web开发方法和装置 | |
CN103577427A (zh) | 基于浏览器内核的网页爬取方法、装置及包含该装置的浏览器 | |
WO2015195846A1 (en) | Techniques for focused crawling | |
CN103024036B (zh) | 网页浏览方法及装置 | |
US20220114269A1 (en) | Page processing method, electronic apparatus and non-transitory computer-readable storage medium | |
CN105138675A (zh) | 数据库审计方法及设备 | |
CN111177519A (zh) | 网页内容获取方法、装置、存储介质及设备 | |
CN103577526A (zh) | 一种验证页面是否被修改的方法、系统及浏览器 | |
CN103258058A (zh) | 页面展现方法、系统及浏览器 | |
CN104636396A (zh) | 一种页面定位方法及装置 | |
CN107294918B (zh) | 一种钓鱼网页检测方法及装置 | |
CN109428776A (zh) | 一种网站流量的监控方法及装置 | |
CN104899217B (zh) | 一种自定义功能的实现方法及装置 | |
CN106657422B (zh) | 爬取网站页面的方法、装置、系统和存储介质 | |
CN103905434A (zh) | 一种网络数据处理方法和装置 |
Legal Events
Date | Code | Title | Description |
---|---|---|---|
C06 | Publication | ||
PB01 | Publication | ||
C10 | Entry into substantive examination | ||
SE01 | Entry into force of request for substantive examination | ||
RJ01 | Rejection of invention patent application after publication | ||
RJ01 | Rejection of invention patent application after publication |
Application publication date: 20151223 |