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