MUI/APP获取外部URL参数_mui 获取当前url-CSDN博客

本文链接：https://blog.csdn.net/coreyC/article/details/78548073

要获取APP的外部URL参数。

我们将其分为两个页面一个入口页面：

<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>入口页面</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<h1 class="mui-title">APP嵌套网页</h1>
		</header>
		<div class="mui-content">
			<ul class="mui-table-view">
				<li class="mui-table-view-cell" id="goto_baidu">
					<a class="mui-navigate-right">打开百度，从Url获取自定义参数</a>
				</li>
			</ul>
		</div>
		<script src="js/mui.min.js"></script>
		<script type="text/javascript">
			mui.init();
			mui.plusReady(function() {
				/**
				 * 以百度为例
				 */
				document.getElementById("goto_baidu").addEventListener("tap", function() {
					mui.openWindow({
						url: "target.html",
						id: "target"
					});
				});
			});
		</script>
	</body>

</html>

然后一个目标页面：

<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>目标页面</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-icon mui-icon-left-nav mui-pull-left" id="go_back"></a>
			<a class="mui-icon mui-icon-forward mui-pull-right" id="go_forward"></a>
			<h1 class="mui-title mui-action-back" id="close_page">百度</h1>
		</header>
		<script src="js/mui.min.js"></script>
		<script type="text/javascript">
			mui.init();
			mui.plusReady(function() {
				var self = plus.webview.currentWebview();
				var baiduWV = plus.webview.create("https://www.baidu.com?param=test", "baidu", {
					top: "44px",
					bottom: 0
				});
				/*
				 * 注入自定义js,demo中演示打开百度，传入自定义参数param,然后注入js获取
				 */
				baiduWV.appendJsFile("_www/js/insert.js");
				self.append(baiduWV);
				
				baiduWV.evalJS('alert("evalJS: "+getUrlParam("param"));')
				/**
				 * 重写mui.back()方法
				 * http://dev.dcloud.net.cn/mui/window/#closewindow
				 */
				/**
				 * 监听子窗口对象是否可后退
				 * http://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewObject.canBack
				 */
				document.getElementById("go_back").addEventListener("tap", function() {
					baiduWV.canBack(function(event) {
						var canBack = event.canBack;
						if(canBack) {
							baiduWV.back();
						} else {
							alert("到头了，不能后退了！");
						}
					});
				});

				// 右上角前进icon的事件
				document.getElementById("go_forward").addEventListener("tap", function() {
					/**
					 * 监听子窗口对象是否可前进
					 * http://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewObject.canForward
					 */
					baiduWV.canForward(function(event) {
						var canForward = event.canForward;
						if(canForward) {
							baiduWV.forward();
						} else {
							alert("不能前进！");
						}
					});
				});
			});
		</script>
	</body>

</html>