`
123003473
  • 浏览: 1060304 次
  • 性别: Icon_minigender_1
  • 来自: 南京
社区版块
存档分类
最新评论

中间iframe 解决 js 跨域

 
阅读更多
已知a.html,c.html,其中c页面是a页面的子页面,且a、c不同域,求a,c页面互相访问的方案?
方案如下:
思路:
在a.html中增加与c.html同域的d.html,通过d.html访问c.html
在c.html中增加与a.html同域的b.html,通过b.html访问a.html

代码如下:
a.html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title>a.html</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <script type="text/javascript">
        var aPageContent = "a页面内容";
</script>
    </head>
    <body style="background-color: blue;">
         a页面:<br />
        <iframe name="cIframe" id="cIframe" src="http://www.hck.com:8080/WebTest/c.html"></iframe>
        <br />
        <br />
        <iframe name="dIframe" id="dIframe" src="http://www.hck.com:8080/WebTest/d.html"></iframe>
    </body>
</html>


b.html内容:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>a.html</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
   <script type="text/javascript">
    function test()
    {
        alert(top.aPageContent);
    }
   </script>
  </head>
  <body>
     b页面:a、b同域
     <button onclick="javascript:test();">调用A页面的内容</button>
  </body>
</html>


c.html页面内容:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>a.html</title>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script type="text/javascript">
    var cccc = "c页面的内容";
    </script>
  </head>
  <body>
  c页面:
  <iframe  src="http://www.xu.com:8080/WebTest/b.html"></iframe>
  </body>
</html>


d.html页面内容:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>a.html</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
   <script type="text/javascript">
    function test()
    {
        alert(top.frames[0].cccc);
    }
   </script>
  </head>
  
  <body>
     d页面:c、d同域
     <button onclick="javascript:test();">调用c页面的内容</button>
  </body>
</html>


说明:说明:a、b页面不是在www.hck.com域中的页面
图:



http://blog.csdn.net/lovingprince/article/details/2954675
http://www.cnblogs.com/rainman/archive/2011/12/06/1959325.html
http://www.nowamagic.net/ajax/ajax_KonwHowToCrossDomain.php
分享到:
评论

相关推荐

    Javascript跨域访问解决方案

    JSONP是一种较早的跨域解决方案,它利用了浏览器允许`&lt;script&gt;`标签跨域加载资源的特性。通过动态创建`&lt;script&gt;`标签,并指定其`src`属性为一个返回JSON数据的函数调用,服务器将数据包裹在函数调用中返回,客户端...

    javascript跨域方案总结

    JavaScript跨域方案是Web开发中的一个重要主题,尤其是在构建现代Web应用程序时。由于浏览器的安全策略,JavaScript在不同域名之间默认不允许进行通信,这就是所谓的“同源策略”。然而,开发者经常需要在多个域之间...

    js跨域问题之跨域iframe自适应大小实现代码

    使用上述方法,可以在不违反同源策略的前提下,通过中间代理页面间接获取跨域页面的尺寸信息,并动态调整iframe的尺寸来实现自适应效果。这种方法既保证了安全性,也解决了跨域带来的限制问题。 具体到代码实现,...

    showModalDialog跨域解决例子

    标题"showModalDialog跨域解决例子"表明我们将探讨如何克服这个限制。 首先,理解跨域的原理至关重要。同源策略是浏览器为了安全而实施的一项政策,它禁止了一个源(协议+域名+端口)的文档或脚本请求另一个源的...

    finereport跨域打印文档

    2. **跨域打印解决方案**:对于Finereport,可能需要使用IFrame或者Web服务代理的方式实现跨域打印。IFrame可以将报表加载到一个隐藏的框架中,然后在这个框架内进行打印操作,从而绕过同源策略的限制。Web服务代理...

    跨域访问数据-DEMO

    在这个DEMO中,`iis_envoy_domain_services`和`iis_envoy_domain_main`可能就是配置代理服务的文件,Envoy作为中间层,接收客户端请求,然后转发到目标服务器获取数据,再将结果返回给客户端,这样就实现了跨域访问...

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

    本文将介绍如何利用location.hash属性来解决跨域iframe自适应高度的问题,同时通过这个方法,我们还可以解决其他相似的跨域JS操作问题。 首先,让我们来了解什么是同源策略和跨域。同源策略要求,如果两个页面拥有...

    iframe跨域通信封装详解

    然而,当需要在一个页面(我们称之为`top`页面)中通过iframe嵌入另一个不同源的页面(我们称之为`iframe`页面)时,如果需要这两个页面之间进行通信,就需要解决跨域问题。本文将详细介绍如何封装一个iframe跨域...

    详解iframe跨域的几种常用方法(小结)

    通过设置`document.domain`、使用中间页面或`window.postMessage`方法,我们可以有效地解决`iframe`跨域的问题,实现不同源页面之间的数据传递和交互。在实际应用中,应根据具体场景选择合适的方法,同时注意安全,...

    文件上传,iframe跨域数据提交的实现

    在文件上传的场景中,iframe可以作为一个“中间人”,用于处理跨域提交。这是因为当一个表单(form)的target属性设置为一个iframe的名称时,表单提交的结果会显示在那个iframe中,而不是在当前窗口。这种方式允许...

    完美解决浏览器跨域的几种方法(汇总)

    1. JSONP(JSON with Padding):这是一种较早的跨域解决方案。它利用`&lt;script&gt;`标签没有同源策略限制的特性,由服务器返回一个JavaScript函数调用形式的字符串,客户端预先定义好该函数,当`&lt;script&gt;`标签加载完成后...

    Web应用跨域通信解决方案课件。

    2. **CORS (Cross-Origin Resource Sharing)**:CORS是现代浏览器支持的一种更加安全且强大的跨域解决方案。服务器通过设置HTTP响应头`Access-Control-Allow-Origin`来允许特定或所有源的请求。同时,CORS还提供了...

    jquery 跨iframe拖拽

    1. **引入jQuery和jQuery UI**:在项目中,首先需要引入jQuery库(如jquery-1.3.2.js)和jQuery UI的拖拽组件。在本案例中,我们可能需要将这些脚本链接到iframe.html、right.html和left.html等文件中。 2. **设置...

    iframe与父页面传值

    对于跨域的`iframe`,可以设置一个中间代理页面,通过这个代理页面实现父子页面间的通信。 三、安全与限制 在进行父子页面通信时,必须注意安全问题。`postMessage`提供了验证`origin`的能力,以防止恶意页面注入...

    JS跨域取XML--借助AS的URLLoader

    在介绍知识点之前,首先需要明确“跨域”一词在Web开发中的含义。跨域问题,也称为“同源策略”,是指当一个域(域名、协议或端口)的...随着Web技术的演进,建议在可能的情况下优先考虑标准的跨域解决方案,例如CORS。

    js 關於跨域訪問的問題 unoin 之後排序問題

    在JavaScript(JS)中,跨域访问是一个常见的问题,它涉及到浏览器的安全策略,因为默认情况下,浏览器禁止一个源(域名)的脚本访问另一个源的数据,以防止恶意网站窃取数据。解决跨域问题通常有以下几种方法: 1....

    Web聚合运用跨域通信机制.doc

    同源策略的限制促使了各种跨域通信解决方案的出现,如iframe、中间帧技术和基于值的通信机制。而SCDC系统则在这些基础上,进一步强化了安全性、效率和对象共享能力,为构建安全的Mashup应用提供了重要的理论和技术...

    js中页面的重新加载(当前页面/上级页面)及frame或iframe元素引用介绍

    无论是刷新当前页面、上级页面,还是操作iframe内的内容,都可以通过JavaScript实现,提高了网页的动态性和用户体验。在实际开发中,需要注意兼容性问题,确保在不同浏览器中代码都能正确运行。

Global site tag (gtag.js) - Google Analytics