MarchThree

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

现在提供两种实现方式

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

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

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>

 

分类:

技术点:

相关文章:

  • 2021-11-28
  • 2022-01-17
  • 2021-06-28
  • 2021-10-10
  • 2022-01-23
  • 2021-12-08
  • 2021-11-28
  • 2021-11-07
猜你喜欢
  • 2021-04-06
  • 2021-12-08
  • 2021-06-30
  • 2019-09-02
  • 2021-08-11
  • 2021-11-07
相关资源
相似解决方案