iframe 跨域调用父级方法的方案

一、如果高层域名相同的话,可以通过document.domain来实现跨域访问

例如:

父级域名:localhost:8080

子级域名:localhost:9090

那么可以设置document.domain = ‘localhost‘ 来实现跨域访问

二、如果域名没有相同之处

先来做一个假设:假如

我现在有两个系统,一个是工作流服务平台,其中一个功能就是“代办”;

另一个是OA系统,现在我要在OA系统中直接嵌入工作流服务平台的代办页面,而代办页面的中,点击处理又会打开OA系统提供的审批页面,审批页面中有个按钮“同意”;

工作流程服务平台的代办页面为 db.html,OA系统提供的审批页面为 sp.html,当在sp.html中点击“同意”按钮后,要求代办页面更新数据。

1.工作流服务平台需要的代码:(假设域名为localhost:9090)

db.html:  (子页面是sp.html)

<html>
    <script>
        function refresh(){
            document.getElementById(‘data‘).innerHTML = ‘2222‘;
        }
    </script>
    <body>
         <div id="data">111</div>
    </body>
</html>

execRefresh.html: (这是实现跨域的关键)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <title> exec main function </title>
 </head>  

 <body>
    <script type="text/javascript">
        parent.parent.refresh(); // execute main function
    </script>
 </body>
</html>

2.OA系统需要的代码:(假设域名为 127.0.0.1:9090)

sp.html(是db.html的子页面)

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
     <head>
      <meta http-equiv="content-type" content="text/html; charset=utf-8">
      <title> iframe window </title>  

      <script type="text/javascript">  

      // exec main function
      function exec_main(){
        if(typeof(exec_obj)==‘undefined‘){
            exec_obj = document.createElement(‘iframe‘);
            exec_obj.name = ‘tmp_frame‘;
            exec_obj.src = ‘http://localhost:9090/zz/execRefresh.html‘;
            exec_obj.style.display = ‘none‘;
            document.body.appendChild(exec_obj);
        }else{
            exec_obj.src = ‘http://localhost:9090/zz/execRefresh.html?‘ + Math.random();
        }
      }
      </script>  

     </head>  

     <body>
      <p>B.html iframe</p>
      <p><input type="button" value="同意" onclick="exec_main()"></p>
     </body>
    </html>  

注:请重点注意红色字体

时间: 2024-10-22 04:12:12

iframe 跨域调用父级方法的方案的相关文章

iframe跨域访问父框架js方法

条件 1.不在同一个主域下 2.iframe调用父框架方法 环境说明 父框架有打开TAB页方法,但是子页面嵌入的是其他系统页面,同样需要打开TAB页. 方法描述 原理上就是通过子页面嵌入父框架页面来使用调用方法 父框架桥连页面 1 @{ 2 ViewBag.Title = "跨域桥连"; 3 Layout = "~/Views/Shared/_LayoutCenter.cshtml"; 4 } 5 6 @section Scripts{ 7 <script&g

iframe跨域获取父页面url

iframe在跨域情况下, window.top.location.href 无法访问到. 可通过 document.referrer 访问到url,该属性是当前页面document的一个属性,记录这个页面的来源页面. 关于介绍更多的document.referrer内容: http://driftcloudy.iteye.com/blog/986265

谷歌、火狐浏览器下实现JS跨域iframe高度自适应的完美解决方法,跨域调用JS不再是难题!

谷歌.火狐浏览器下实现JS跨域iframe高度自适应的解决方法 导读:今天开发的时候遇到个iframe自适应高度的问题,相信大家对这个不陌生,但是一般我们都是在同一个项目使用iframe嵌套页面,这个ifame高度自适应网上一搜一大把,今天要讲的如何在不同的网站下进行相互的调用跟在同一个网站下是一个效果:例如我在自己的项目里面Iframe  了第一博客的页面  http://www.diyibk.com/   当第一博客的页面高度变化了怎么通知父页面呢? 这个时候在谷歌下肯定是拿不到 ifram

JS跨域(ajax跨域、iframe跨域)解决方法及原理详解(jsonp)

这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被当作是不同的域. 下表给出了相对 http://store.company.com/dir/page.html 同源检测的结果: 要解决跨域的问题,我们可以使用以下几种方法: 1.通过jsonp跨域[解决ajax跨域] 在js中,我们直接用XMLHttpRequest请求不同域上的数据时,是不可以的

IFrame跨域处理方法-Javascript

在漫长的前端开发旅途上,无可避免的会接触到ajax,而且一般情况下都是用在同一域下的ajax请求:但是如果请求是发生在不同的域下,请求就无法执行,并且会抛出异常提示不允许跨域请求,目前我没有找到明确的资料说明这是为什么,我觉得应该是出于安全性的考虑吧.纵然如此,要实现跨域访问的话,方法还是有的,而且不只一种,在这里介绍其中一种解决方案:如何利用iframe完成ajax的跨域请求. 如下图所示:域a.com的页面request.html(即http://a.com/request.html)里面嵌

iframe子页面调用父页面javascript函数的方法

1.iframe子页面调用 父页面js函数 子页面调用父页面函数只需要写上window.parent就可以了.比如调用a()函数,就写成: window.parent.a(); 2.iframe父页面调用 子页面js函数 这个就稍微复杂一些,下面的方法支持ie和firefox浏览器: document.getElementById('ifrtest').contentWindow.b();

iframe子页面调用父页面javascript函数的方法(支持chrome和IE的通用方法)

iframe子页面调用父页面javascript函数的方法 今天遇到一个iframe子页面调用父页面js函数的需求,解决起来很简单,但是在chrome浏览器遇到一点小问题.顺便写一下iframe的父页面调用子页面javascript函数的方法吧,备用! 1.iframe子页面调用 父页面js函数 子页面调用父页面函数只需要写上window.praent就可以了.比如调用a()函数,就写成: window.praent.a(); 但是我在chrome浏览器下却发现此方法无效了!查了半天才了解,在c

JS访问或设置cookie的方法+跨域调用方法

无意中从163网站获取的JS访问或设置cookie的方法,Log到日志上以防遗忘 //COOKIE功能检查function fCheckCookie(){    if(!navigator.cookieEnabled){        alert("您好,您的浏览器设置禁止使用cookie\n请设置您的浏览器,启用cookie功能,再重新登录.");    }} //获取Cookiefunction fGetCookie(sName){   var sSearch = sName +

iframe 跨域自适应 纯css解决方法

<style type="text/css">body{background:#f00;}body, html,#ifm1{width:100%;height:100%;overflow:hidden;margin:0;}#ifm1{width:100%;height:100%;overflow:hidden;margin:0;}</style><iframe id="ifm1" src='http://www.csdn.net' fr