MUI/APP获取外部URL参数

要获取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>


  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值