layer.js使用心得-向彈出框傳值問題
阿新 • • 發佈:2019-02-19
問題背景:
實現彈出對話方塊載入頁面,所以我選擇了獨立元件layer.js。基於layer.js元件彈出了一個新的iframe的視窗(假設name為LayerFrame,方便後面稱呼),但需要從之前的頁面傳入引數
注:'#sayHello'元素是在主視窗下的 HomeFram(HomeFrame是主視窗下的子 iframe) 裡
程式碼如下:
[javascript] view plain copy- $('#sayHello').click(function () {
- top.layer.open({
-
id: "layer_say_hello"
- type: 2,
- title: '打招呼',
- shadeClose: true,
- shade: 0.8,
- area: ['500px', '400px'],
- content: '/Findfriend/Part_SayHello', //iframe的url
- success: function (layero, index) {
- //傳入引數,並賦值給iframe的元素
-
}
- });
- })
問題描述:
在success回撥函式中使用jquery選取不到彈出的 ifram 的元素
問題分析:
經過下午的頭破血流,終於被我給分析出來了,功夫不負有心人啊。廢話少說,重點來了。
原因是:success回撥函式的上下文並不是 主視窗的上下文, 而是 HomeFrame 的上下文。所以在success回撥函式中是可以直接找到 HomeFrame 中的元素。如果要找到 LayerFrame 的元素,就必須先找到 LayerFrame 的Dom物件,然後方可找到 LayerFrame 的 document ,最後再去找 LayerFrame 的元素
正確程式碼如下:
[javascript] view plain copy- $('#sayHello').click(function () {
- top.layer.open({
- id: "layer_say_hello",
- type: 2,
- title: '打招呼',
- shadeClose: true,
- shade: 0.8,
- area: ['500px', '400px'],
- content: '/Findfriend/Part_SayHello', //iframe的url
- success: function (layero, index) {
- var her_uli_id = $("#headico").attr("data-uli-id"); //headico 是 HomeFrame的元素
- var her_nickname = $("#nickname").text(); //nickname 是 HomeFrame的元素
- // layero.find("iframe") 找到iframe的jquery物件
- // layero.find("iframe")[0] 將jqeruy物件轉化為Dom物件
- // contentWindow 獲取當前 iframe 的 內容 window物件(Dom物件)
- //.send-hello 是 LayerFrame 的元素
- var jquerySendHelloButton = $(".send-hello", layero.find("iframe")[0].contentWindow.document);
- jquerySendHelloButton.attr("data-her-uli-id", her_uli_id);
- jquerySendHelloButton.attr("data-her-nick-name", her_nickname);
- }
- });
- })