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>

 

  

 

 

 

posted @ 2022-03-03 17:42  小熊猫君  阅读(240)  评论(0)    收藏  举报