这个办法比较绕,但是可以解决完全跨域情况下的脚步置换问题。原理是利用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中,数据容量和类型都有限等……
相关推荐
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的宽度和高度是不可预知而且会...
利用iframe和location.hash,数据直接暴露在了url中,数据容量和类型都有限 3.Flash LocalConnection, 对象可在一个 SWF 文件中或多个 SWF 文件间进行通信, 只要 在同一客户端就行,跨应用程序, 可以跨域。...
当作为Location对象时,提供了许多属性和方法,可以分别获取和设置URL的不同部分,比如protocol、hostname、port、pathname、search和hash等。 1. location.replace()方法 location.replace()方法用于加载一个新的...
总结,JavaScript提供了多种在`iframe`之间传递值的方法,包括`postMessage()`、`window.name`、`location.hash`、Web存储API以及`window.parent`和`window.frames`。选择哪种方法取决于具体的需求,如是否跨域、...
4. location.hash + iframe 5. window.name + iframe 跨域 6. postMessage 跨域 7. nginx 代理跨域 8. nodejs 中间件代理跨域 9. WebSocket 协议跨域 一、 通过 jsonp 跨域 通常为了减轻 web 服务器的负载,我们把...
篇文章主要探讨了如何使用`location.href`在不同的窗口和iframe之间进行跳转,以及相关的JavaScript属性和方法。`location.href`是JavaScript中的一个重要属性,它允许我们获取当前页面的URL或者设置新的URL来实现...
location.hash.substring(1) : ''; if (console.log) { console.log('Now the data is ' + data); } } catch (e) {} } setInterval(checkHash, 2000); ``` **`cs2.html`代码示例:** ```javascript //...
iObjH = parent.parent.frames["infoFrame"].frames["agentFrame"].location.hash; iObj.style.height = iObjH.split("#")[1]+"px"; } window.onload=pseth(); ``` 在上面的代码中,我们使用 js 来获取 iframe...
window.parent.location.hash = '/newActivity'; // 这里写你自己要回退的Vue页面路径 }); } window.history.pushState('forward', null, '#'); // 在IE中必须得有这两行 window.history.forward(1); }); ``` ...
父页面可以通过修改`iframe`的`src`属性,添加查询参数或hash,`iframe`内部通过`window.location`获取这些信息。 4. `postMessage`的跨域代理 对于跨域的`iframe`,可以设置一个中间代理页面,通过这个代理页面...
- 当子窗体内部页面发生变化时,可以通过JavaScript获取新的`src`值,并使用`window.history.pushState`或`window.location.hash`更新父窗体的URL。 - 例如: ```javascript function updateUrl() { var iframe...
console.log(window.location.hash.substr(1)); // 输出传入的数据 }; ``` 综上所述,解决跨域问题的方法多样,每种方法都有其适用场景和局限性。在实际开发中,应根据项目需求选择最合适的解决方案。同时需要...
JavaScript与iframe的交互操作和安全问题 ...在使用iframe时,开发者需要特别注意防止潜在的安全风险,合理利用同域和跨域操作技术,在确保网站安全的前提下,有效地利用iframe进行页面开发和内容展示。
3. **利用URL查询参数**:子页面可以修改自身`window.location.hash`或`window.location.search`,父页面通过监听`hashchange`或`popstate`事件来获取这些变化。 4. **使用`localStorage`或`sessionStorage`**:当...
分享转载:前端常见跨域解决...3、 location.hash + iframe 4、 window.name + iframe跨域 5、 postMessage跨域 6、 跨域资源共享(CORS) 7、 nginx代理跨域 8、 nodejs中间件代理跨域 9、 WebSocket协议跨域
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"; // 防止点击其他...
var data = iframeB.location.hash.slice(1); // 处理接收到的数据 handleReceivedData(data); clearInterval(loop); // 停止定时器 } else { setTimeout(loop, 100); // 检查间隔 } })(); ``` ### 需求二:...
var hash_url = window.location.hash; var hash_height = hash_url.split("#")[1] + "px"; a_iframe.height = hash_height; ``` 这段JavaScript代码会读取URL的哈希值,并将高度信息赋值给IFrame的height...