`
sean2012
  • 浏览: 45936 次
  • 性别: 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 文件间进行通信, 只要 在同一客户端就行,跨应用程序, 可以跨域。...

    js location.replace与location.reload的区别

    当作为Location对象时,提供了许多属性和方法,可以分别获取和设置URL的不同部分,比如protocol、hostname、port、pathname、search和hash等。 1. location.replace()方法 location.replace()方法用于加载一个新的...

    js 实现iframe 之间传值

    总结,JavaScript提供了多种在`iframe`之间传递值的方法,包括`postMessage()`、`window.name`、`location.hash`、Web存储API以及`window.parent`和`window.frames`。选择哪种方法取决于具体的需求,如是否跨域、...

    什么是跨域解决方案有哪些.docx

    4. location.hash + iframe 5. window.name + iframe 跨域 6. postMessage 跨域 7. nginx 代理跨域 8. nodejs 中间件代理跨域 9. WebSocket 协议跨域 一、 通过 jsonp 跨域 通常为了减轻 web 服务器的负载,我们把...

    浅析location.href跨窗口调用函数

    篇文章主要探讨了如何使用`location.href`在不同的窗口和iframe之间进行跳转,以及相关的JavaScript属性和方法。`location.href`是JavaScript中的一个重要属性,它允许我们获取当前页面的URL或者设置新的URL来实现...

    前端解决跨域问题的8种方案.docx

    location.hash.substring(1) : ''; if (console.log) { console.log('Now the data is ' + data); } } catch (e) {} } setInterval(checkHash, 2000); ``` **`cs2.html`代码示例:** ```javascript //...

    jsp页面iframe高度自适应的js代码.docx

    iObjH = parent.parent.frames["infoFrame"].frames["agentFrame"].location.hash; iObj.style.height = iObjH.split("#")[1]+"px"; } window.onload=pseth(); ``` 在上面的代码中,我们使用 js 来获取 iframe...

    在vue中实现嵌套页面(iframe)

    window.parent.location.hash = '/newActivity'; // 这里写你自己要回退的Vue页面路径 }); } window.history.pushState('forward', null, '#'); // 在IE中必须得有这两行 window.history.forward(1); }); ``` ...

    iframe与父页面传值

    父页面可以通过修改`iframe`的`src`属性,添加查询参数或hash,`iframe`内部通过`window.location`获取这些信息。 4. `postMessage`的跨域代理 对于跨域的`iframe`,可以设置一个中间代理页面,通过这个代理页面...

    基于iframe的跨域与更新父窗体地址栏的解决方案.docx

    - 当子窗体内部页面发生变化时,可以通过JavaScript获取新的`src`值,并使用`window.history.pushState`或`window.location.hash`更新父窗体的URL。 - 例如: ```javascript function updateUrl() { var iframe...

    JavaScript跨域总结与解决办法

    console.log(window.location.hash.substr(1)); // 输出传入的数据 }; ``` 综上所述,解决跨域问题的方法多样,每种方法都有其适用场景和局限性。在实际开发中,应根据项目需求选择最合适的解决方案。同时需要...

    关于Javascript与iframe的那些事儿

    JavaScript与iframe的交互操作和安全问题 ...在使用iframe时,开发者需要特别注意防止潜在的安全风险,合理利用同域和跨域操作技术,在确保网站安全的前提下,有效地利用iframe进行页面开发和内容展示。

    iframe父页面获取子页面参数的方法.docx

    3. **利用URL查询参数**:子页面可以修改自身`window.location.hash`或`window.location.search`,父页面通过监听`hashchange`或`popstate`事件来获取这些变化。 4. **使用`localStorage`或`sessionStorage`**:当...

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

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

    JS实现iframe自适应高度的方法(兼容IE与FireFox)

    var hash = window.location.hash.slice(1), h; if (hash && /height=/.test(hash)) { h = hash.replace("height=", ""); iframe.style.height = h + "px"; window.location.hash = "#temp"; // 防止点击其他...

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

    var data = iframeB.location.hash.slice(1); // 处理接收到的数据 handleReceivedData(data); clearInterval(loop); // 停止定时器 } else { setTimeout(loop, 100); // 检查间隔 } })(); ``` ### 需求二:...

    IFrame跨域高度自适应实现代码

    var hash_url = window.location.hash; var hash_height = hash_url.split("#")[1] + "px"; a_iframe.height = hash_height; ``` 这段JavaScript代码会读取URL的哈希值,并将高度信息赋值给IFrame的height...

Global site tag (gtag.js) - Google Analytics