頁面傳參終極版

2021-08-10 14:27:33 字數 3649 閱讀 2271

頁面傳引數是一種比較常見的業務需求,根據實現原理及適用環境可以分為兩大類。

在普通瀏覽器端常用的方法有如下幾種:

1.利用url傳參

在頁面跳轉的時候通過設定window.location.href新增引數,在接收引數的頁面通過window.location.search獲取引數字串。

傳送引數的頁面:

window

.location

.href

='new.html?targetid=123'

接收引數的頁面:

// 獲取url中的引數

function

geturlparam

(name

)else

}//獲取url中的targetid引數

vartargetid

=geturlparam

('targetid'

);console

.log

(targetid

);

2.利用本地儲存傳參

可以使用本地儲存的方式,可以使用cookie、sessionstorage和localstorage。

傳送引數的頁面:

localstorage

.setitem

("targetid"

,"123"

);

接收引數的頁面:

localstorage

.getitem

("targetid"

);

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

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

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

varw =

plus

.webview

.create

("new.html"

,"new"

,{},);w.

show

();// 顯示視窗

// 獲取擴充套件引數屬性值

console

.log

("extras:"+w

.targetid

);

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

mui在初始化頁面時,提供了extras配置引數,通過該引數可以設定頁面引數,從而實現頁面間傳值。

mui框架在如下幾種場景下,會執行頁面初始化操作:

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

- 通過mui.init()方法建立子頁面;

- 通過mui.init()方法預載入頁面;

- 通過mui.preload()方法預載入頁面

var

targetid

='123'

;var

baseurl

='new.html'

;var

url

=mui.os

.plus

?baseurl

:baseurl

+'?targetid='

+targetid

;mui

.openwindow

(})

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

mui

.plusready

(function

())

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

webview視窗物件視窗物件webviewobject有乙個evaljs方法,可以將js指令碼傳送到webview視窗中執行,可用於實現webview視窗間的資料通訊。

mui

.fire

(target

,event

,data

)

引數說明:

- target: type: webviewobject 需傳值的目標webview

- event:type: string 自定義事件名稱

- data:type: json json格式的資料

傳送引數的頁面:

id=

"send"

type

="button"

class

="mui-btn mui-btn-blue mui-btn-block"

>

按鈕

接收引數的頁面:

class

="mui-content"

>id=

"text"

>

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

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

傳送引數的頁面:

id=

"send"

type

="button"

class

="mui-btn mui-btn-blue mui-btn-block"

>

按鈕

接收引數的頁面:

// 新增send自定義事件監聽

window

.addeventlistener

('send'

,function

(event

));

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

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

var

ws =

plus

.webview

.getwebviewbyid(id

)ws.addeventlistener

("loaded"

,function(e

),false

);

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

varws=

plus

.webview

.currentwebview

();ws

.addeventlistener

("show"

,function(e

),false

);

excel巨集 終極版

private sub commandbutton1 click sheet1 q20.list sheet2 q20trim.list sheet3 源資料表 副本 新建sheet4 批量合成 刪除空行 變成m 最終資料存於sheet3列pqr 批量合成 dim s as integer s te...

kewin 接小球終極版

import pygame import random 1.loading 初始化 pygame.init 2.視窗 dis分開 play玩 展示 screen width 960screen height 540screen pygame.display.set mode screen width...

六禕 Redis Redis終極版

nosql not only sql 不僅僅是sql,通常指的是非關係型的資料庫。mysql和oracle都是屬於關係型資料庫。redis是乙個開源的使用c語言編寫 支援網路 可基於記憶體亦可持久化的日誌型 key value資料庫,並提供多種語言的api。couchdb 是乙個開源的面向文件的資料...