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>

 

注：请重点注意红色字体

posted on 2017-09-24 23:59  司广孟  阅读(4435)  评论(0)  编辑  收藏  举报

导航