點擊第一個頁面的標簽,跳轉到第二個頁面,把第一個頁面的值也傳往目標頁面
現在提供兩種實現方式
注意:需要在手機運行才可以,用電腦瀏覽器可能不支持。
第一種方式 頁面已創建,通過自定義事件傳值
first.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>HTML5,MUI方式自定義事件頁面傳值</title>
<script src="js/mui.min.js"></script>
<link href="css/mui.min.css" rel="stylesheet" />
<script type="text/javascript" charset="utf-8">
mui.init({
preloadPages: [{//預加載目標頁面
'url': 'second.html',
'id': 'second.html'
}]
});
window.onload = function() {
var Page = null;
document.getElementById("a1").addEventListener('tap', function() {
if (!Page) {
Page = plus.webview.getWebviewById('second.html');
}
mui.fire(Page, 'show', {
id: 'id1', //傳往second.html的值
name: 'name2' //傳往second.html的值
});
mui.openWindow({ //目標頁面
id: 'second.html',
});
});
}
</script>
</head>
<body>
<a id="a1">跳轉</a>
</body>
</html>
second.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>HTML5,MUI方式自定義事件頁面傳值</title>
<script src="js/mui.min.js"></script>
<link href="css/mui.min.css" rel="stylesheet" />
<script type="text/javascript" charset="utf-8">
//添加newId自定義事件監聽
window.addEventListener('show', function(event) {
//獲得事件參數
var id = event.detail.id;
var name = event.detail.name;
alert(id);
alert(name);
})
</script>
</head>
<body>
</body>
</html>
第二種方式 頁面初始化時,通過擴展參數傳值;
first.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>mui頁面間傳值</title>
<script src="js/mui.min.js"></script>
<link href="css/mui.min.css" rel="stylesheet" />
<script type="text/javascript" charset="utf-8">
mui.init();
var param = { //這是要傳的數據
userId: 'userId11111111111',
toKen: 'toKen',
userRole: 'userRole'
};
function SendPage(pageId, linkUrl, pageParam) {
mui.openWindow({//目標頁面
url: 'second.html',
id: 'second.html',
extras: param
});
}
</script>
</head>
<body>
<a onclick="SendPage()">跳吧</a>
</body>
</html>
second.html 目標頁面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<script src="js/mui.min.js"></script>
<link href="css/mui.min.css" rel="stylesheet" />
<script type="text/javascript" charset="utf-8">
mui.plusReady(function() {
var self = plus.webview.currentWebview();
alert(self.userId);
});
</script>
</head>
<body>
</body>
</html>
