mui 頁面傳值

時間 2020-08-21

標籤 mui 頁面简体版

原文原文鏈接

點擊第一個頁面的標籤，跳轉到第二個頁面，把第一個頁面的值也傳往目標頁面javascript

如今提供兩種實現方式css

注意：須要在手機運行才能夠，用電腦瀏覽器可能不支持。html

第一種方式頁面已建立，經過自定義事件傳值java

first.htmlweb

<!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是目標頁的自定義事件
                    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>

第二種方式頁面初始化時，經過擴展參數傳值；ui

first.htmlurl

<!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 目標頁面spa

<!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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。