取得url中的參數並傳遞給iframe中報表的方法介紹-html教學-PHP中文網

首頁

web前端

html教學

取得url中的參數並傳遞給iframe中報表的方法介紹

高洛峰

Mar 16, 2017 am 11:22 AM

使用報表軟體時，使用者係統左邊一般有目錄樹，點選報表節點就會在右邊網頁的iframe中顯示出報表，同時點選的時候也會傳遞有些參數給網頁，例如時間和使用者資訊等。如何使網頁中的報表能夠取得到傳遞過來的參數呢？以下用報表軟體FineReport簡單介紹一些。

具體實作過程

#將報表產生頁面時，為網頁新增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="/WebReport/ReportServer?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 = "/WebReport/ReportServer?reportlet=" + reportName + "&area=" + area + "&province=" + province + "&city=" + city;
		//url中可能包含中文或特殊字符因此需要进行编码转换，注意需要先引入finereport.js
		reportURL = FR.cjkEncode(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>

登入後複製

將程式碼儲存為geturlpara.html，保存在工程下的page_demo資料夾下。

使用管理員登入決策平台，點擊管理系統>報表管理，點擊新增鏈接，連結路徑為：page_demo/geturlpara.html?report=doc/Parameter/MultiValue/MultiValue .cpt&area=華東&province=江蘇&city=無錫，名稱為：url參數傳給iframe中的報表，如下圖：

取得url中的參數並傳遞給iframe中報表的方法介紹

這樣刷新fs，就可以看到左側目錄樹中多了一個節點，點選該節點後，就可以在右側網頁的iframe中顯示出報表包含傳遞給網頁的參數。

效果查看

#如下圖，點擊左側「url參數傳給iframe中的報表」節點時，即打開相對應的鏈接，對應網頁就會在中間區域顯示出來：

取得url中的參數並傳遞給iframe中報表的方法介紹

以上是取得url中的參數並傳遞給iframe中報表的方法介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

7801

Java教學

1644

CakePHP 教程

1402

Laravel 教程

1299

PHP教程

1236

Related knowledge

HTML容易為初學者學習嗎？ Apr 07, 2025 am 12:11 AM

HTML適合初學者學習，因為它簡單易學且能快速看到成果。 1)HTML的學習曲線平緩，易於上手。 2)只需掌握基本標籤即可開始創建網頁。 3)靈活性高，可與CSS和JavaScript結合使用。 4)豐富的學習資源和現代工具支持學習過程。

HTML，CSS和JavaScript的角色：核心職責 Apr 08, 2025 pm 07:05 PM

HTML定義網頁結構，CSS負責樣式和佈局，JavaScript賦予動態交互。三者在網頁開發中各司其職，共同構建豐富多彩的網站。

了解HTML，CSS和JavaScript：初學者指南 Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。

HTML中起始標籤的示例是什麼？ Apr 06, 2025 am 12:04 AM

AnexampleOfAstartingTaginHtmlis，beginSaparagraph.startingTagSareEssentialInhtmlastheyInitiateEllements，defiteTheeTheErtypes，andarecrucialforsstructuringwebpages wepages webpages andConstructingthedom。