`
sean2012
  • 浏览: 44531 次
  • 性别: Icon_minigender_1
  • 来自: 武汉
社区版块
存档分类
最新评论

利用iframe和location.hash

阅读更多

这个办法比较绕,但是可以解决完全跨域情况下的脚步置换问题。原理是利用location.hash来进行传值。在url: http://a.com#helloword中的‘#helloworld’就是location.hash,改变hash并不会导致页面刷新,所以可以利用hash值来进行数据传递,当然数据容量是有限的。假设域名a.com下的文件cs1.html要和cnblogs.com域名下的cs2.html传递信息,cs1.html首先创建自动创建一个隐藏的iframe,iframe的src指向cnblogs.com域名下的cs2.html页面,这时的hash值可以做参数传递用。cs2.html响应请求后再将通过修改cs1.html的hash值来传递数据(由于两个页面不在同一个域下IE、Chrome不允许修改parent.location.hash的值,所以要借助于a.com域名下的一个代理iframe;Firefox可以修改)。同时在cs1.html上加一个定时器,隔一段时间来判断location.hash的值有没有变化,一点有变化则获取获取hash值。

 

 

function startRequest(){
    var ifr = document.createElement('iframe');
    ifr.style.display = 'none';
    ifr.src = 'http://www.cnblogs.com/lab/cscript/cs2.html#paramdo';
    document.body.appendChild(ifr);
}

function checkHash() {
    try {
        var data = location.hash ? location.hash.substring(1) : '';
        if (console.log) {
            console.log('Now the data is '+data);
        }
    } catch(e) {};
}
setInterval(checkHash, 2000);

 

 

 

//模拟一个简单的参数处理操作
switch(location.hash){
    case '#paramdo':
        callBack();
        break;
    case '#paramset':
        //do something……
        break;
}

function callBack(){
    try {
        parent.location.hash = 'somedata';
    } catch (e) {
        // ie、chrome的安全机制无法修改parent.location.hash,
        // 所以要利用一个中间的cnblogs域下的代理iframe
        var ifrproxy = document.createElement('iframe');
        ifrproxy.style.display = 'none';
        ifrproxy.src = 'http://a.com/test/cscript/cs3.html#somedata';    // 注意该文件在"a.com"域下
        document.body.appendChild(ifrproxy);
    }
}

 

 

 

//因为parent.parent和自身属于同一个域,所以可以改变其location.hash的值
parent.parent.location.hash = self.location.hash.substring(1);

 当然这样做也存在很多缺点,诸如数据直接暴露在了url中,数据容量和类型都有限等……

 

分享到:
评论

相关推荐

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

    www.jb51.net 被iframe的页面b.html所属域B:www.baidu.com,假设地址:http://www.baidu.com/b.html 实现效果: A域名下的页面a.html中通过iframe嵌入B域名下的页面b.html,由于b.html的宽度和高度是不可预知而且会...

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

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

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

    分享转载:前端常见跨域解决...3、 location.hash + iframe 4、 window.name + iframe跨域 5、 postMessage跨域 6、 跨域资源共享(CORS) 7、 nginx代理跨域 8、 nodejs中间件代理跨域 9、 WebSocket协议跨域

    layuiAdmin.std-v1.7.1

    layuiAdmin 内部实现了一套基于 location.hash 的路由和模板机制,这使得你可以很轻松地实现界面的跳转与渲染。另外注意的是,接口鉴权不再适用于传统的 session 模式,一般需要采用 JWT。总体来说,刚开始使用会...

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

    (3) iframe+location.hash; (4) flash。 postMessage是HTML5为解决js跨域问题而引入的新的API,允许多个iframe/window跨域通信。 HTML5中提供了在网页文档之间相互接收与发送信息的功能。使用这个功能,只要获取...

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

    (3) iframe+location.hash; (4) flash。 这里不细说这几种方法,记录的是HTML5的window.postMessage。postMessage兼容IE8+、Firefox、Opera、Safari、Chrome。 需要两个异域的服务器来做测试,当然也可以用本地...

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

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

    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 + http-proxy-middleware8.webSocket具体教程见

    JSP 聊天室 chartroom

    window.location.hash="position"; } ()" background="images\4.jpg"> <!-- dataValue.jsp��������Ϣ����ݼ���ҳ��--> <iframe src="dataValue.jsp" id="dataValue" style="visibility:hidden; ...

    让浏览器崩溃的12行JS代码(DoS攻击分析及防御)

    但是,ajax应用也会造成另外的问题,容易导致浏览器无法前进与后退,这是个很头疼的问题,开发人员必须增加工作量(比如通过一个隐藏的iframe,或者改变location.hash值等方法)来解决。 为了解决传统ajax带来的问题,...

    107个常用javascript语句

    常用iframe<iframe id="IFramewindow" width="0" height="0" name='IFramewindow'></iframe> -2.常用 //错误提示 function AlertErrorMeg(meg){ alert(meg); } //提示转向 function AlertRedirect(meg,url){ ...

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

    这有助于找到将location.hash解析为键值的内容,并且只有某些关键字容易受到注入。 “选项”页面包含一个设置,该设置可在每次加载页面时自动触发关键字搜索,这有时会使单页面Web应用程序感到困惑。 目前尚无限制...

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

    03 JS的history对象和location对象 04 JS的DOM节点 05 JS的DOM节点 第43章 01 上节知识回顾 02 js之onsubmit事件与组织事件外延 03 DOM节点的增删改查与属性设值 04 正反选练习 05 js练习之二级联动 06 jquery以及...

Global site tag (gtag.js) - Google Analytics