反饋已提交
網絡繁忙
用户想要实现在自己的 OA 系统里点击按钮,就能触发我们的报表的提交事件。但是如果报表和他们的 OA 不在一个应用中,会存在 JS 跨域调用的权限问题,这个问题该如何解决呢?
如果是谷歌和火狐等支持 HTML5 的浏览器,则可通过 postMessage() 方法即可跨域通信;
如果是 IE8 之前等不支持 HTML5 的,则通过一个可以跨域的全局属性 window.name,外部应用可以访问并修改 iframe 中的 window.name。然后 iframe 中的页面每隔一段时间检查一下,如果 window.name 的值变化了则做出相应的事件响应。
本文将这两种方法放在一起,这样不论在 火狐 或者 IE8 等浏览器下都可以实现跨域提交,避开了浏览器的问题。
注:本文仅能用于 HTML5 浏览器或者子域不同的情况,对于顶级域不同而且不支持 H5 的浏览器的情况不适用。
比如在 IE8 里面从 www.ttt.com --->org.aaa.com 就不能用。
这里使用提交_g().writeReport()做演示,其他 JS 也都支持。
在需要进行填报的模板添加「加载结束」事件。
打开 填报可暂存.cpt 模板,该模板在%FR_HOME%\webapps\webroot\WEB-INF\reportlets\demo\form目录下。
将该模板另存在%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\分页预览JS实例目录下,重命名为CrossSubmit.cpt。
点击模板>模板Web属性>填报页面设置,在「事件设置」下添加「加载结束」事件。具体情况如下图所示:
其中代码如下所示:
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;}
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 路径下,如下图所示:
3)打开数据决策平台,点击管理系统>安全管理>安全防护>Security Headers>高级设置,关闭点击劫持攻击防护按钮。如下图所示:
若不关闭这个按钮,预览时将会出现如下图所示的错误:
双击 test.html 文件,即可在浏览器中查看模板并进行跨域提交,如下图所示:
已完成模板,请参见: %FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\分页预览JS实例\CrossSubmit.cpt
点击下载模板:CrossSubmit.cpt
点击下载 test.html 文件:test.html
文 檔回 饋
滑鼠選中內容,快速回饋問題
滑鼠選中存在疑惑的內容,即可快速回饋問題,我們將會跟進處理。
不再提示
10s後關閉