MUI-頁面傳參數


點擊第一個頁面的標簽,跳轉到第二個頁面,把第一個頁面的值也傳往目標頁面

現在提供兩種實現方式

注意:需要在手機運行才可以,用電腦瀏覽器可能不支持。

第一種方式  頁面已創建,通過自定義事件傳值

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>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM