获取url中的参数并传递给iframe中的报表

1. 问题描述

 

用户系统在左边一般有目录树,点击报表节点就会在右侧网页的iframe中显示出报表,同时点击的时候也会传递一些参数给网页,比如时间和用户信息等,希望iframe中集成的报表能够获取到主页面中传递过来的参数,如实现下面的点击网页链接help/page_demo/geturlpara.html?report=doc/Parameter/MultiValue/MultiValue.cpt&area=华东&province=江苏&city=无锡直接可以使报表可以直接使用这些参数:

2. 解决思路

点击节点打开一个网页,网页对应的url如:/工程名/xxx.html?para=paravalue,在网页加载时先通过js获取url中的参数值,嫁接在iframe的src后,形成最终的报表路径。

3. 实现方法

3.1 主页面中获取url中的参数

将报表生成网页时,给网页添加onload事件,首先获取url中的参数,然后嫁接到iframe的src上,或者通过获得的参数拼接出完整的报表url赋给iframe的src。

 

<html>
<head>
<title>FineReport Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<script type="text/javascript" src="/webroot/decision/view/report?op=emb&resource=finereport.js"></script>
<script type="text/javascript">
	function autoLoad(){
		//返回从问号 (?) 开始的 URL(查询部分)
		var paraString = location.search;   
		//多个参数用&分隔,将参数字符串转为数组,使每个参数值存于一个数组元素中
		var paras = paraString.split("&");  
		//每个数组元素中"="后面的值即参数值
		var reportName = paras[0].substr(paras[0].indexOf("=") + 1); 
		var area = paras[1].substr(paras[1].indexOf("=") + 1);
		var province = paras[2].substr(paras[2].indexOf("=") + 1);
		var city = paras[3].substr(paras[3].indexOf("=") + 1);
		//使用获取的参数值拼接出最终的url
		var reportURL = "/webroot/decision/view/report?viewlet=" + reportName + "&area=" + area + "&province=" + province + "&city=" + city;
		//url中可能包含中文或特殊字符因此需要进行编码转换,注意需要先引入finereport.js
		reportURL = encodeURI(reportURL);
		//将新的报表路径赋给报表所在iframe的src
		document.getElementById("reportFrame").src = reportURL; 
	}
	//加载网页时调用autoLoad方法
	window.onload = autoLoad;
</script>
</head>
<body>
<iframe id="reportFrame" width="900" height="400"></iframe>
</body>
</html>

已完成示例请参照%FR_HOME%/WebReport/page_demo/geturlpara.html

 

3.2 决策报表中添加链接

使用管理员登录决策平台,点击管理系统>目录管理,点击添加链接,链接路径为:help/page_demo/geturlpara.html?report=doc/Parameter/MultiValue/MultiValue.cpt&area=华东&province=江苏&city=无锡,名称为:url参数传递给iframe中的报表,如下图:

这样刷新fs,就可以看到左侧目录树中多了一个节点,点击该节点后,就可以在右侧网页的iframe中显示出报表包括传递给网页的参数, 实现所要达到的需求了。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值