js跨域调用许多种解决方案,有document.domain+iframe、动态创建script和HTML5 postMessage等等。最近遇到了一些案例,需要调用iframe的脚本,而又不能使用document.domain来解决,这有一个比较有趣的解决跨域,原理是利用location.hash来进行传值.
a.com下的1.html文件
<script type="text/javascript">
var url = "http://b.com/2.html";
var iframe = null;
window.onload = function(){
iframe = document.createElement("iframe");
iframe.src = url;
iframe.style.width = "100%";
iframe.style.height = "1px";
iframe.style.border = "none";
document.body.appendChild(iframe);
}
function sendData(data){
try {
if (console.log) {
console.log('Send data '+data);
iframe.src = url + "#" + data;
}
} catch(e) {};
}
</script>
b.com下的2.html文件
<script type="text/javascript">
var url = "http://b.com/2.html";
var iframe = null;
window.onload = function(){
setInterval(receiveData, 2000);
}
function receiveData(){
try {
var data = location.hash ? location.hash.substring(1) : '';
if (console.log) {
console.log('Receive the data is '+data);
}
} catch(e) {};
}
</script>
分享到:
相关推荐
"解决JS跨域访问IFrame的解决方案"这一主题关注的就是如何克服这个限制,使得在JSP页面中嵌入的跨域IFrame能够正常通信。下面我们将详细探讨这个问题以及可能的解决方案。 首先,理解同源策略是关键。同源策略是...
跨域调用虽然方便,但也增加了安全风险,比如XSS(跨站脚本攻击)和CSRF(跨站请求伪造)。因此,开发者在使用跨域调用时应谨慎处理数据,确保只从可信的源获取信息,并采取适当的防护措施。同时,跨域请求可能增加...
6. **实际应用**:跨域iframe常用于广告嵌入、社交分享、用户身份验证、API调用等多种场景。 7. **案例分析**:博文可能会提供具体的代码示例,展示如何在实际项目中设置和使用跨域iframe,以便读者更好地理解和...
然而,由于浏览器的同源策略限制,当`iframe`加载的页面与包含它的页面不在同一个域名下时,就会遇到跨域问题。这篇博客将深入探讨如何解决`iframe`的跨域问题。 首先,理解同源策略是至关重要的。同源策略是浏览器...
jQuery提供了一种解决方案,通过利用`postMessage` API来实现跨域iframe接口方法的调用。 同源策略是浏览器安全策略的一部分,它规定只有相同协议、主机名和端口的页面才能相互访问其资源。但在实际应用中,比如...
标题和描述所提及的是一个关于如何解决layer弹窗在跨域环境下的问题,主要涉及到iframe、跨域以及layer的使用技巧。下面我们将详细探讨这个问题及其解决方案。 首先,我们了解下**iframe**。iframe(Inline Frame)...
同时,开发者需要注意跨域访问可能带来的安全风险,如XSS(跨站脚本攻击)和CSRF(跨站请求伪造)。 综上所述,iframe跨域访问是一个复杂但必要的技术,它涉及浏览器的安全策略和多种解决策略。理解并熟练掌握这些...
4. **IFrame跨域通信**:利用`window.postMessage`方法,可以在属于不同源的两个IFrame之间进行通信。这种方法适用于页面嵌套场景,但不适用于跨域API调用。 5. **WebSocket跨域**:WebSocket协议本身支持跨域,...
"iframe父页面与子页面通信及相互调用方法"是一个重要的主题,涉及到跨域安全、DOM操作以及JavaScript/jQuery的交互技术。下面将详细解释这一知识点。 1. **基本概念** - **父页面(Parent Page)**:包含`iframe`...
这两个页面中可能包含了JavaScript代码,用于初始化iframe,设置通信接口,并调用`FrameMessage.js`和`json2.js`这两个JavaScript库。 `FrameMessage.js`可能是JavaScript实现的通信接口,它可能使用了`window.post...
其中,"js调用-嵌入iframe"是JS在处理页面元素,特别是与IFrame(内联框架)交互时的一个重要技术。IFrame允许在单一网页中嵌入另一个网页,从而实现内容的复用或隔离。下面我们将详细探讨这一主题。 **1. IFrame...
前端跨域解决方案,jsonp和cros...然后客户端就可以通过与调用脚本一模一样的方式,来调用跨域服务器上动态生成的js格式文件。客户端在对JSON文件调用成功之后,也就获得了自己所需的数据。这就形成了JSONP的基本概念。
它基于浏览器的`window.postMessage` API,这是一个安全的方法,允许来自不同源的脚本通过`postMessage`方法发送消息,并通过事件监听接收这些消息。`messenger.js`简化了这个过程,提供了一种更加友好的API,使得...
3. 单页应用(SPA)框架:如React、Vue等框架中的子组件可以通过`iframe`实现跨域API调用,`postMessage`传递数据。 4. 第三方登录:比如使用微信、QQ等社交账号登录,`iframe`加载第三方登录页面,通过`postMessage...
2. **跨域打印解决方案**:对于Finereport,可能需要使用IFrame或者Web服务代理的方式实现跨域打印。IFrame可以将报表加载到一个隐藏的框架中,然后在这个框架内进行打印操作,从而绕过同源策略的限制。Web服务代理...
这样,当`iframe`尝试通过`window.parent.location.href`修改父窗口的URL时,实际上会调用到这个新定义的空对象,从而无效化这个操作。 3. **监听事件并阻止冒泡**:在父窗口中,可以监听`window`对象上的`...
跨域页面访问问题是指在多个系统集成的情况下,主系统以 iframe 或 frameset 的方式将其他子系统的页面嵌进来,导致浏览器阻止 iframe 或 frameset 的 cookie,进而使 SESSION 失效。解决办法是,在子系统的登录代码...
1. **基于iframe实现跨域**:通过在页面中嵌入一个IFrame,IFrame的源可以指向不同的域,但这种方法受到很多限制,比如需要同一基础域、协议和端口,实际应用中并不常用。 2. **基于Script标签实现跨域(JSONP)**...
如果目标服务器支持CORS,我们可以在`showModalDialog`调用时指定该资源,使得浏览器允许跨域请求。 2. **JSONP(JSON with Padding)**:这是一种较旧的跨域解决方案,适用于只支持GET请求的情况。JSONP依赖于动态...
HTML5的`window.postMessage` API 是一种允许不同源的窗口或`iframe`之间安全地进行跨域通信的技术。这一功能的引入解决了之前由于同源策略限制导致的跨域数据交换问题,无需服务器端的额外配合。 `window.post...