1. 程式人生 > >頁面傳引數的一些方法

頁面傳引數的一些方法

頁面傳引數是一種比較常見的業務需求,根據實現原理及適用環境可以分為兩大類。 在普通瀏覽器端常用的方法有如下幾種 1.利用URL傳參 在頁面跳轉的時候通過設定window.location.href新增引數,在接收引數的頁面通過window.location.search獲取引數字串。

傳送引數的頁面

window.location.href = 'new.html?targetId=123'

接收引數的頁面:

// 獲取url中的引數
function getUrlParam (name) {
     var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"
); var r = window.location.search.substr(1).match(reg); if (r!= null) { return unescape(r[2]); }else{ return null; } } //獲取url中的targetId引數 var targetId = getUrlParam('targetId'); console.log(targetId);

2.利用本地儲存傳參 可以使用本地儲存的方式,可以使用cookie、sessionStorage和localStorage。 傳送引數的頁面:

localStorage.setItem("targetId","123");

接收引數的頁面:

localStorage.getItem("targetId");

mui框架根據業務場景不同,提供了兩種傳值模式:

1.頁面初始化時,通過擴充套件引數傳值

html5+ webview中在建立新視窗的時候有一個extras引數,用於建立Webview視窗的額外擴充套件引數。

var w = plus.webview.create("new.html","new",{},{
    targetId: '123'
});
w.show(); // 顯示視窗
// 獲取擴充套件引數屬性值
console.
log("extras:" + w.targetId);

注意:id是WebviewObject的一個屬性,所以extras不能使用id作為引數名。

mui在初始化頁面時,提供了extras配置引數,通過該引數可以設定頁面引數,從而實現頁面間傳值。 mui框架在如下幾種場景下,會執行頁面初始化操作:

  • 通過mui.openWindow()開啟新頁面(若目標頁面為已預載入成功的頁面,則在openWindow方法中傳遞的extras引數無效);
  • 通過mui.init()方法建立子頁面;
  • 通過mui.init()方法預載入頁面;
  • 通過mui.preload()方法預載入頁面

以開啟新頁面為例說明瀏覽器和基於5+的APP的相容寫法:

var targetId = '123';
var baseUrl = 'new.html';

var url = mui.os.plus?baseUrl:baseUrl+'?targetId=' + targetId;  
mui.openWindow({
    url: url,
    extras: {
        targetId: targetId
    }
})

想獲取某個webview頁面的拓展引數,可以通過webview物件獲取。例如在new.html頁面可以通過下面的方法獲取拓展引數:

mui.plusReady(function () {
   var self = plus.webview.currentWebview();
   // 或 var self = plus.webview.getWebviewById('new');
   console.log("extras:" + self.targetId);
})

至於瀏覽器和APP相容的寫法自己根據上面的方法和這個方法結合一下就OK了。

2.頁面已建立,通過自定義事件傳值

Webview視窗物件視窗物件WebviewObject有一個evalJS方法,可以將JS指令碼傳送到Webview視窗中執行,可用於實現Webview視窗間的資料通訊。

mui.fire(target, event, data) 引數說明:

  • target: Type: WebviewObject 需傳值的目標webview
  • event:Type: String 自定義事件名稱
  • data:Type: JSON json格式的資料

傳送引數的頁面:

<button id="send" type="button" class="mui-btn mui-btn-blue mui-btn-block">按鈕</button>
<script src="js/mui.js"></script>
<script type="text/javascript">
    var ws = null;
    mui.plusReady(function () {
        ws = plus.webview.create("new.html","new",{top:"0px",bottom:"0px"});
    })
    document.querySelector('#send').addEventListener('tap',function () {
        var targetId = '123';
        ws.evalJS('send('+targetId+')');
        ws.show();
    })
</script>

接收引數的頁面:

<div class="mui-content">
    <div id="text"></div>
</div>
<script src="js/mui.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    mui.init();
    // 接收引數的函式
    function send(param){
        document.getElementById("text").innerHTML = param;
    } 

    mui.back = function(){
        var self = plus.webview.currentWebview();
        self.hide();
    }
</script>

注:這裡要重寫back,不然預設為close,當我們返回的時候再次開啟show的時候需要重新建立。

顯然這樣寫有點複雜,為此mui將evalJS傳值的機制進行了封裝,通過自定義事件實現頁面傳值,可以使用mui.fire()方法可觸發目標視窗的自定義事件。

傳送引數的頁面:

<button id="send" type="button" class="mui-btn mui-btn-blue mui-btn-block">按鈕</button>
<script src="js/mui.js"></script>
<script type="text/javascript">
    var ws = null;
    mui.plusReady(function () {
        ws = plus.webview.create("new.html","new",{top:"0px",bottom:"0px"});
    })
    document.querySelector('#send').addEventListener('tap',function () {
        mui.fire(ws,'send',{
            targetId: '123'
        })
        ws.show();
    })
</script>

接收引數的頁面:

// 新增send自定義事件監聽
window.addEventListener('send',function(event){
  //獲得事件引數
  var targetId = event.detail.targetId;
  document.getElementById("text").innerHTML = targetId;
});

這裡需要特別說明一下的是,很多人在使用mui.fire傳引數的時候會提前預載入接收引數的頁面,結果發現接收不到傳的引數,這是一種非常常見的錯誤,這裡需要說明的是當預載入了頁面後,頁面上的程式碼都已經執行,如果在loaded事件未完成就執行webview.evalJS或mui.fire,此時頁面接收引數失效。此時應該將接受引數的邏輯寫在webview loaded或者show監聽事件中:

驗證一個webview的loaded事件是否完成的方法:

var ws = plus.webview.getWebviewById(id)
ws.addEventListener( "loaded", function(e){
    console.log( "Loaded: "+e.target.getURL() );
}, false );

驗證一個webview的show事件是否完成的方法:

var ws=plus.webview.currentWebview();
ws.addEventListener("show", function(e){
    console.log( "Webview Showed" );
}, false );