跨域调用 JS

编辑
  • 文档创建者:文档助手1
  • 浏览次数:7236次
  • 编辑次数:28次
  • 最近更新:Wendy123456 于 2019-09-27
  • 1. 概述

    1.1 问题描述

    用户想要实现在自己的 OA 系统里点击按钮,就能触发我们的报表的提交事件。但是如果报表和他们的 OA 不在一个应用中,会存在 JS 跨域调用的权限问题,这个问题该如何解决呢?

    1.2 实现思路

    如果是谷歌和火狐等支持 HTML5 的浏览器,则可通过 postMessage() 方法即可跨域通信;

    如果是 IE8 之前等不支持 HTML5 的,则通过一个可以跨域的全局属性 window.name,外部应用可以访问并修改 iframe 中的 window.name。然后 iframe 中的页面每隔一段时间检查一下,如果 window.name 的值变化了则做出相应的事件响应。

    本文将这两种方法放在一起,这样不论在 火狐 或者 IE8 等浏览器下都可以实现跨域提交,避开了浏览器的问题。

    注:本文仅能用于 HTML5 浏览器或者子域不同的情况,对于顶级域不同而且不支持 H5 的浏览器的情况不适用。

           比如在 IE8 里面从 www.ttt.com --->org.aaa.com 就不能用。

    2. 示例

    这里使用提交_g().writeReport()做演示,其他 JS 也都支持。

    2.1 模板设置

    在需要进行填报的模板添加「加载结束」事件。

    打开 填报可暂存.cpt 模板,该模板在%FR_HOME%\webapps\webroot\WEB-INF\reportlets\demo\form目录下。

    将该模板另存在%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\分页预览JS实例目录下,重命名为CrossSubmit.cpt。

    点击模板>模板Web属性>填报页面设置,在「事件设置」下添加「加载结束」事件。具体情况如下图所示:

    image.png

    其中代码如下所示:

    if(!window.a){
    function send(val){   
      sendMessage(val);
        }
        (function(win, doc){
          
          var ifr = win.parent;
          
          var cb = function(msg){
            eval(msg);      
          };
          var sendMessage = function(){
            if(win.postMessage){
              if (win.addEventListener) {
                        win.addEventListener("message",function(e){
                cb.call(win,e.data);
              },false);
                    }else if(win.attachEvent) {
                        win.attachEvent("onmessage",function(e){    
                          cb.call(win,e.data);
            });
                    }
              return function(data){
                ifr.postMessage(data,'*');
              };
            }else{
              var hash = '';
              
              setInterval(function(){
                if(win.name!==hash){
                  hash = win.name;
                  cb.call(win,hash);
                }
              },200);
              return function(data){
                ifr.name = data;
              };
            }
          }
          win.sendMessage = sendMessage();
            })(window, document);
            window.a=1;
    }

    2.2 提交页面设置

    1)在本地新建 test.html,此时 test.html 与我们报表模板是两个不同的域,在 test.html 中点跨域提交按钮,调用 send("_g().writeReport()") 则可以实现跨域提交。

    test.html 的代码如下所示:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    </head>
    <script>
    window.name="aaaa";
    function f(){
    }
    </script>
    <body>
     <input type="button" name="aa" value="跨域提交" onclick="send('_g().writeReport()')"/>
    <iframe name="iframeA" id="iframeA" width="900" height="400" src="http://localhost:8075/webroot/decision/view/report?viewlet=doc/JS/分页预览JS实例/CrossSubmit.cpt&op=write"></iframe>
    <script type="text/javascript">
       //document.getElementById('host').innerHTML = location.host;
       function send(msg){
         sendMessage(msg);
       }
       (function(win, doc){
         var ifr = doc.getElementById('iframeA').contentWindow;
         var cb = function(json){
           eval(json);
         };
         var sendMessage = function(){
           if(win.postMessage){
             if (win.addEventListener) {
                       win.addEventListener("message",function(e){
               cb.call(win,e.data);
             },false);
                   }else if(win.attachEvent) {
                       win.attachEvent("onmessage",function(e){
               cb.call(win,e.data);
             });
                   }
             return function(data){
               ifr.postMessage(data,'*');
             };
           }else{
             var hash = '';
             
             setInterval(function(){
             
               if (win.name !== hash) {
                 hash = win.name;
                 cb.call(win, hash);
               }
             }, 200);
             return function(data){
               ifr.name = data;
             };
           }
         };
         win.sendMessage = sendMessage();
       })(window, document);
    </script>
    </body>
    </html>

    2)将新建好的 test.html 放到 %FR_HOME%\webapps\webroot\help\page_demo  路径下,如下图所示:

    6.png

    3)打开数据决策平台,点击管理系统>安全管理>安全防护>Security Headers>高级设置,关闭点击劫持攻击防护按钮。如下图所示:

    12.png

    若不关闭这个按钮,预览时将会出现如下图所示的错误:

    13.png


    3. 效果查看

    双击 test.html 文件,即可在浏览器中查看模板并进行跨域提交,如下图所示:

    66.png

    4. 已完成模板

    已完成模板,请参见: %FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\分页预览JS实例\CrossSubmit.cpt

    点击下载模板:CrossSubmit.cpt

    点击下载 test.html 文件:test.html

    附件列表


    主题: 部署集成
    标签: 暂无标签
    如果您认为本文档还有待完善,请编辑

    文档内容仅供参考,如果你需要获取更多帮助,付费/准付费客户请咨询帆软技术支持
    关于技术问题,您还可以前往帆软社区,点击顶部搜索框旁边的提问按钮
    若您还有其他非技术类问题,可以联系帆软传说哥(qq:1745114201

    此页面有帮助吗?只是浏览 [ 去社区提问 ]