MUI+html5+javascript 点击事件触发页面间传值
关于如何进行页面转跳,请看 https://www.cnblogs.com/JUNELITTLEPANDA/p/15956176.html,以下跳转方法是采用的其中一种
1- 仅适用于移动端,pc端无法显示传值。不适用于同时在网站和移动端使用的网页/app
初始页面。用MUI官方的方法打开窗口并用extras传递参数值。
<script type="text/javascript">
mui('.mui-content').on('tap', 'img', function() {//当“tap”mui-content类下的所有img图片元素时
mui.openWindow({
url:'index3.html', //跳转路径
id:'index3',
extras: {
name: 123
},
});
})
</script>
跳转页面,并取得了传递函数的值。JavaScript 中没有打印或显示函数。(详见:https://www.w3school.com.cn/js/js_output.asp),用document.write()时注意,不要在页面加载完后,再通过点击等事件的情形下使用,因为此时页面会被write的文本内容刷新占用,只剩下该数据。更一般的方法是document.getElementById(id).innerHTML="....."
<script type="text/javascript">
var wv=plus.webview.currentWebview();//获取当前窗口的WebviewObject对象
//document.write(wv.name);
document.getElementById("myname").innerHTML="我的名字是"+wv.name;
</script>//这是跳转页面,并取得了传递函数的值
2- pc,移动端均合适
初始界面。使用本地缓存来保留数据
<script type="text/javascript">
var username="test";
mui('.mui-content').on('tap', 'img', function() {
localStorage.setItem("username",username);
localStorage.setItem("age","13");
window.location.href="index.html";
//进行真机调试时,这种虽然可以跳转index页面,但是index页面会重复刷新,可能是打开了index页面但没有真正跳转所致
//建议使用以下的方法
//mui.openWindow({
//url:'index.html',
//id:'index'});
});
</script>
跳转页面。
<script type="text/javascript">
var username = localStorage.getItem("username");
alert(username);
document.getElementById("myname").innerHTML="我的名字是"+username;
</script>