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属性>填报页面设置，在「事件设置」下添加「加载结束」事件。具体情况如下图所示：
其中代码如下所示：
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 路径下，如下图所示：
3）打开数据决策平台，点击管理系统>安全管理>安全防护>Security Headers>高级设置，关闭点击劫持攻击防护按钮。如下图所示：
若不关闭这个按钮，预览时将会出现如下图所示的错误：
3. 效果查看
双击 test.html 文件，即可在浏览器中查看模板并进行跨域提交，如下图所示：
4. 已完成模板
已完成模板，请参见： %FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\分页预览JS实例\CrossSubmit.cpt
点击下载模板：CrossSubmit.cpt
点击下载 test.html 文件：test.html