HTML5，MUI方式页面传值

最新推荐文章于 2021-08-19 17:11:34 发布

小神爷_

最新推荐文章于 2021-08-19 17:11:34 发布

阅读量1.4w

点赞数 3

分类专栏： html

本文链接：https://blog.csdn.net/z88xiaodong/article/details/48341325

版权

html 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

点击第一个页面的标签，跳转到第二个页面，把第一个页面的值也传往目标页面

现在提供两种实现方式

注意：需要在手机运行才可以，用电脑浏览器可能不支持。

第一种方式页面已创建，通过自定义事件传值

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 οnclick="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>

需要在手机运行才可以，用电脑浏览器可能不支持。

小神爷_

关注

3
点赞
踩
10

收藏

觉得还不错? 一键收藏
2
评论
HTML5，MUI方式页面传值

点击第一个页面的标签，跳转到第二个页面，把第一个页面的值也传往目标页面注意：需要在手机运行才可以，用电脑浏览器可能不支持。first.html HTML5，MUI方式自定义事件页面传值 mui.init({ preloadPages: [{//预加载目标页面 'url': 'second.html', 'i
复制链接

扫一扫