zoukankan      html  css  js  c++  java
  • 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>  

    注:请重点注意红色字体

  • 相关阅读:
    JS实现菜单滚动到一定高度后固定
    原生js如何获取某一元素的高度
    在Vue项目中,添加的背景图片在服务器上不显示,如何处理
    单行文本截断 text-overflow
    使用line-height垂直居中在安卓手机上效果不好
    css 苹方字体
    十二. for of 示例 (可以解决大多数应用场景)
    npm详解
    webpack搭建服务器,随时修改刷新
    探讨弹性布局Flexible Box
  • 原文地址:https://www.cnblogs.com/sigm/p/iframe_cros.html
Copyright © 2011-2022 走看看