转载于:http://hi.baidu.com/zhouyazun/blog/item/dcce7695803386007af4807e.html
先说明一点:我说的某某域名在您的控制下的意思是这个域名下的网页由您来负责开发内部的JavaScript
场景一:将bbs.xxx.com的页面用iframe嵌入到www.xxx.com的中,如何在iframe内外使用js通信(转帖请注明出处:http://blog.csdn.net/lenel)
一级域名都是xxx.com 这个域名一定是在您的控制下,所以你只要在两个页面中同时升级域名即可
在父窗口和iframe内部分别加上js语句:document.domain="xxx.com";
之后2个页面就等于在同一域名下,通过window.parent oIframe.contentDocument就可以相互访问,进行无障碍的JS通信
在新浪、淘宝等很多页面都能找到这样的语句。不过document.domain不可以随便指定,只能向上升级,从bbs.xxx.com升级到yyy.com肯定会出错
场景二:将www.yyy.com的页面用iframe嵌入到www.xxx.com的中,两个域名都在您的控制下,如何在iframe内外进行一定的数据交流(转帖请注明出处:http://blog.csdn.net/lenel)
你可以通过相互改变hash值的方式来进行一些数据的通信
这里的实现基于如下技术要点:
1、父窗口通过改变子窗口的src中的hash值把一部分信息传入,如果src只有hash部分改变,那么子窗口是不会重新载入的。
2、子窗口可以重写父窗口的location.href,但是注意这里子窗口无法读取而只能重写location.href所以要求前提是您控制两个域名,知道当前父窗口的location.href是什么并写在子窗口内,这样通过parent.location.href = "已知的父窗口的href"+"#"+hash。这样父窗口只有hash改变也不会重载。
3、上面两步分别做到了两个窗口之间的无刷新数据通知,那么下面的来说如何感知数据变化。标准中没有相关规定,所以当前的任意浏览器遇到location.hash变化都不会触发任何javaScript事件,也就是说您要自己写监听函数来监视loaction.hash的值的变化。做法是通过setTimeout或者setInterval来写一个监听函数每20-100ms查看一下hash是否变化,如果变化了驱动js根据新的数据做想做的事情。
这种实现的一些分析:
1、信息通道是双向的,当然会兼容单向,如果只是父窗口向子窗口通知数据,只需要子窗口写hash监听,反之亦然。
2、局限性也是颇大,因为这种通信的前提是双方知道对方的location.href。如果父窗口带有动态的location.search也就是查询参数,那么子窗口的处理上就比较困难,需要把父窗口的location.search作为传递信息的一部分告知子窗口。
3、另外的困扰会有浏览器带给你,IE之外的浏览器遇到hash的改变会记录历史,这样你在处理前进后退的时候会非常头疼
场景三:将www.yyy.com的页面用iframe嵌入到www.xxx.com的中,只有被嵌入的yyy.com在您的控制下,如何在iframe内外进行一定的交流(转帖请注明出处:http://blog.csdn.net/lenel)
真实场景:google adsence的一个需求,你希望google发现您的页面不能匹配出相关性非常好的按点击付费广告时,你希望google的广告iframe能够隐藏。
google的广告iframe在google域下显然不能把自己隐藏掉,那么怎么办呢?
1、google会提供给你一个html页面
2、您将这个页面放置在您的域名下,并告诉google它的位置
3、当google发现没有很好的广告时,会将子窗口的loaction重定向到您的那个页面下,这样您的页面因为同域名就可以访问父页面来隐藏自己了
是不是很巧的方法?
场景四:您是内容发布商,如何改造接口,让其他域名下的页面可以从浏览器端出发获得您的数据
我们知道ajax的xmlHttpRequest()说到底是一个无刷新请求服务器数据的辅助工具,但是xmlHttpRequest并不能跨域名请求数据,在某些情况下成了极大的限制。
但是我们如果通过其他方式完成无刷新请求数据不也可以么,我们用Dom方法操作动态JS脚本请求来做这件事。
//创建一个脚本节点
var oScript = document.createElement('script');
//指定脚本src src可以指向任意域名
//注意src不再指向静态js,而是带着查询参数指向一个动态脚本广播服务。
oScript.src = "http://yyy.com/query.php?"+yourQueryString;
//如果指定了charset 同时还可以解决xmlHttpRequest另一大困扰 乱码问题
//oScript.charset = "utf-8";
//通过Dom操作把这个新的节点加入到文档当中
document.getElementsByTagName("head")[0].appendChild(oScript);
这样只要query.php的输出是可执行的javaScript脚本,比如:djsCallBack({jsondata});
当他从服务器返回后就会自动执行,你可以方便的用json方式来做数据传递了。
要注意,您的脚本请求最好带上时间戳,避免浏览器缓存造成取回数据实时性下降。
如果您是数据提供者,您可以要求数据索取者在查询参数中提供回调函数名,比如query.php?callback=myDataHandler&key=...?
这样您就可以根据参数来提供给他myDataHandler({jsondata}),这样不同的数据索取者都会得到自定义的正确的异步回调。
进一步发展,可以做一个统一的从xml到动态json的数据转化服务器,脱离数据的实际意义,针对任何xml接口都可以作为转化后提供给客户端直接访问。
这样就不用针对单独xml数据服务,为了跨域名而做各自的后台数据抓取转化服务。
用动态脚本传数据功能非常强大,去年我最先在YAHOO的站点上看到这样的应用,让人眼前一亮。
总结总结:
第一种场景,相应的处理办法有这非常好的效果,可以说完全解决了问题。
第二种场景,相应的处理办法具有一定的跨域数据交流功效,具有相当大的局限,并不适合在复杂业务流程中应用,实际上我也确实也没看到过基于此的大规模应用。
第三种场景,相应的处理办法比较巧妙,虽然redirect之后就不干你什么事了,但如果你是google一样面向众多域名的内容提供商,也是个不错的解决思路。
第四种场景,相应的处理办法非常强大,对比Ajax可以看到,跨域名没问题,无刷新没问题,本身又是异步的,JSON比xml快的多,同时解决乱码问题,只是请求都是Get方式的,不能做Post方式的请求。多一种武器自然可以从容选择了。
------想法:可以通过ajax访问本站的一个页面程序,比如get163Page.aspx,在这个页面程序里面,含下载某个其他域名页面的数据,则通过这种方式间接的AJAX获取其他站点的数据。。呵呵。。欢迎探讨
分享到:
相关推荐
通过HTTPClient界面在JSP中嵌入iframe子界面跨域时,无法获取跨域界面的属性值的问题
框架完美解决了iframe之间的跨域通讯。底层技术采用window.name转换代理实现
jquery跨域调用,js跨域调用,jsonp,跨域调用
NULL 博文链接:https://hqlly.iteye.com/blog/1662337
iframe 跨域访问session问题解决方法
iframe跨域问题:Uncaught DOMException Blocked a frame with origin解决方法
iframe 与主框架相互访问例子,包含同域访问,跨域访问例子。
实现内嵌的iframe跨域调用父页面js方法
这是关于iframe使用过程中出现的问题整理的解决方法,关于使用iframe不用单独写接口打通数据,直接把数据通过ifarme嵌套方法传递过去,使用简单方便。
使用JS调用Window服务,使用WCF技术和WebServiceHost类实现跨域调用。可以用于读取本机MAC地址、获取硬件设备信息等。
该文档介绍了vue和普通web页面中iframe实现跨域的解决方案,解决了主页面中无法调用iframe方法的问题
iframe之间进行控制,这样更有利于程序的编写,希望对大家有所帮助。
JS调用WCF服务实例(WCF服务宿主到控制台),解决Js跨域调用问题 源码实例 wcf宿主到控制台上,并内置js调用服务的源码
解决taro h5在调用接口时出现跨域的情况 修改config下的index.js
主要介绍了解决Vue调用springboot接口403跨域问题,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
完美解决跨域iframe的高度自适应,完美解决跨子域iframe的高度自适应,嵌入几个页面解决跨域iframe的高度自适应。。。
能够完美解决arcgis js跨域解决问题,该文档详细说明了.NET或者java环境下跨域解决
以前在面试的时候经常遇到问关于跨域的事儿,所以自己对跨域有一定的概念性了解,知道什么是跨域以及解决跨域的方法,但是具体实际从来没有操作过,直到最近在公司项目中,遇到了一个需要使iframe跨域进行POST提交的...
通过这个插件,可以实现不同域名的双向通信问题,内含demo 配套文章:http://blog.csdn.net/mycwq/article/details/16344171
layer弹窗:top.layer弹窗到父页面跨域,通过postMessage方法将子页面的配置对象发送到父页面中,父页面再通过子页面的配置对象打开弹窗,对象内不能存在事件。