`
shuaigg.babysky
  • 浏览: 554081 次
  • 性别: Icon_minigender_1
  • 来自: 济南
社区版块
存档分类
最新评论

通过iframe hash 实现跨域

 
阅读更多

<h1>我是A页面</h1>
<iframe name="bpage" frameborder="0" scrolling="no" width="300" height="150" src="http://b.com/kuayu/b/b.html"></iframe>
<script type="text/javascript">
window.crossLoad = function() {
    window.location.reload();
};
window.setBackGroundColor = function(color) {
    if(color){document.body.style.backgroundColor = color};
};
</script>

 

 

测试页面
<div id="colordiv">
    <button action-type="setColor">red</button>
    <button action-type="setColor">green</button>
    <button action-type="setColor">yellow</button>
</div>

<iframe id="testframe" frameborder="0" scrolling="no" width="0" height="0" src="http://a.com/kuayu/a/delegate.html"></iframe>
<script src="http://127.0.0.1/STK/js/gaea_1_19.js"></script>
<script>

var node = STK.E("colordiv");
var testframe = STK.E("testframe");
var delegate = STK.delegatedEvent(node);
delegate.add("setColor" , 'click' , function(spec) {
    var color = spec.el.innerHTML;
    var obj = {
        funcName : "setBackGroundColor",
        args : [color]
    };
    testframe.src = testframe.src.replace(/#[^#]*$/ , "") + "#" + encodeURIComponent(STK.jsonToStr(obj));
});
</script>

 

<script>
window.location.hash = '';
var originHash;
function detectHash() {
    var nowHash = window.location.hash;
    if(nowHash && originHash != nowHash) {
        originHash = nowHash;
        var realHash = eval('(' + decodeURIComponent(nowHash.replace(/^#/ , '')) + ')');
        var funcName = realHash.funcName;
        var args = realHash.args;
        window.top[funcName].apply(window , args);
    }
};
setInterval(detectHash , 500);
</script>

分享到:
评论

相关推荐

    利用location.hash实现跨域iframe自适应

    页面域关系: 主页面a.html所属域A:www.jb51.net 被iframe的页面b.html所属域B:www.baidu.com,假设地址:http://www.baidu.com/b.html 实现效果: A域名下的页面a.html中通过iframe嵌入B域名下的页面b.html,由于b....

    基于iframe实现ajax跨域请求 获取网页中ajax数据

    同时,内嵌的iframe中无法进行跨域通信的,也就是说不同域的iframe是无法互相读取数据的(当然利用hash变化可以从父window传入数据到子iframe,不过并没有什么意义)。iframe跨域通信时,浏览器会报如下错误: 其实这...

    前端常见跨域解决方案(全).mht

    1、 通过jsonp跨域 2、 document.domain + iframe跨域 3、 location.hash + iframe 4、 window.name + iframe跨域 5、 postMessage跨域 6、 跨域资源共享(CORS) 7、 nginx代理跨域 8、 nodejs中间件代理...

    跨域传值即主页面与iframe之间互相传值

    这种方式,是主页面需要给 iframe B 传递数据,然后 iframe B 获得到数据后进行特定的处理 实现方式 实现的技巧就是利用 location 对象的 hash 值,通过它传递通信数据,我们只需要在主页面A中设置 iframe B 的 src...

    使用HTML5中postMessage知识点解决Ajax中POST跨域问题

    由于同源策略的限制,Javascript存在跨域通信的问题,典型的跨域问题有iframe与父级...使用这个功能,只要获取到网页所在窗口对象的实例,不仅仅同源(域+端口号)的web网页之间可以互相通信,甚至可以实现跨域通信。 浏

    HTML5中使用postMessage实现Ajax跨域请求的方法

    由于同源策略的限制,Javascript存在跨域通信的问题,典型的跨域问题有iframe与父级的通信等。 常规的几种解决方法: (1) document.domain+iframe;(2) 动态创建script; (3) iframe+location.hash; (4) flash。 ...

    JavaScript使用HTML5的window.postMessage实现跨域通信例子

    利用iframe和location.hash,数据直接暴露在了url中,数据容量和类型都有限 3.Flash LocalConnection, 对象可在一个 SWF 文件中或多个 SWF 文件间进行通信, 只要 在同一客户端就行,跨应用程序, 可以跨域。...

    cross-demos:多种跨域通信示例

    ##跨域通信demos ...1-5请求都是发送到localhost:3000,为了实现跨域,打开页面时地址请使用127.0.0.1:3000 iframe需要配置hosts 127.0.0.1 www.myapp.com 127.0.0.1 sample.myapp.com 127.0.0.1 www.otherapp.com

    深入分析Javascript跨域问题

    跨域是什么? 假设a.com/get.html需要获取b.com/data.html中的数据,而这里a.com和b.com并不是同一台服务器,这就是跨域跨域会涉及到Javascript的同源策略,简单来说就是为了保护网站的安全,不被外域(非同源)...

    解决前端跨域问题方案汇总

    1.同源策略如下: URL 说明 是否允许通信 http://www.a.com/a.js http://www.a.com/b.js 同一域名下 允许 http://www.a.com/lab/a.js http://www.a.com/script/b.js 同一域名下不同文件夹 ...不

    cross-domain-practice:使用node.js在前端练习各种跨域方法

    本文利用node.js 实现前端各种跨域方式。包含以下几种:1.cors 2.jsonp 3.window.name+iframe 4.location.hash+iframe 5.HTML5 postMessage 6.nginx 反向代理 7.node.js + express + ...

    javascript跨域的方法汇总

    jsonp是利用script标签没有跨域限制的特性,通过在src的url的参数上附加回调函数名字,然后服务器接收回调函数名字并返回一个包含数据的回调函数 function doSomething(data) { // 对data处理 } var script = ...

    js前端解决跨域问题的8种方案(最新最全)

    1.同源策略如下: URL 说明 是否允许通信 http://www.a.com/a.js http://www.a.com/b.js 同一域名下 允许 http://www.a.com/lab/a.js http://www.a.com/script/b.js ...同一域名,不同协议

    最新Python3.5零基础+高级+完整项目(28周全)培训视频学习资料

    ajax操作-伪ajax(iframe) ajax操作-时机选择 文件上传(3种方式)-1 文件上传-时机选择及预览-2 图片验证码 KindEditor基本使用和文件操作 作业 第25周 今日内容概要 博客系统示例预览 组合搜索组件 JSONP跨域...

    ttt-ext:Chrome扩展程序,可通过对字符串值进行简单的污点分析来帮助查找DOMXSS

    污染测试工具简单的Chrome扩展程序... 实际上,限制范围会错过跨域iframe的分析,因此不建议使用“点击时”或“在特定网站上”。 请,请勿在您无权测试安全性问题的网站上使用此扩展名。 该图标由的制作,并获得许可。

    python入门到高级全栈工程师培训 第3期 附课件代码

    07 通过form向server端发送数据 08 form表单之select标签 09 table标签 第38章 01 css的四种引入方式 02 css的四种基本选择器 03 css的组合选择器 04 css的属性选择器 05 css的伪类 06 css的选择器优先级 07 css的...

Global site tag (gtag.js) - Google Analytics