1. 程式人生 > >layer.js使用心得-向彈出框傳值問題

layer.js使用心得-向彈出框傳值問題

問題背景:

實現彈出對話方塊載入頁面,所以我選擇了獨立元件layer.js。基於layer.js元件彈出了一個新的iframe的視窗(假設name為LayerFrame,方便後面稱呼),但需要從之前的頁面傳入引數

注:'#sayHello'元素是在主視窗下的 HomeFram(HomeFrame是主視窗下的子 iframe) 裡

程式碼如下:

[javascript] view plain copy
  1. $('#sayHello').click(function () {  
  2.         top.layer.open({  
  3.             id: "layer_say_hello"
    ,  
  4.             type: 2,  
  5.             title: '打招呼',  
  6.             shadeClose: true,  
  7.             shade: 0.8,  
  8.             area: ['500px''400px'],  
  9.             content: '/Findfriend/Part_SayHello'//iframe的url
  10.             success: function (layero, index) {  
  11.                 //傳入引數,並賦值給iframe的元素
  12.             }  
  13.         });  
  14.     })  

問題描述:

在success回撥函式中使用jquery選取不到彈出的 ifram 的元素

問題分析:

經過下午的頭破血流生氣,終於被我給分析出來了,功夫不負有心人啊。廢話少說,重點來了。

原因是:success回撥函式的上下文並不是 主視窗的上下文, 而是 HomeFrame 的上下文。所以在success回撥函式中是可以直接找到 HomeFrame 中的元素。如果要找到 LayerFrame 的元素,就必須先找到 LayerFrame 的Dom物件,然後方可找到 LayerFrame 的 document ,最後再去找 LayerFrame 的元素

正確程式碼如下:

[javascript] view plain copy
  1. $('#sayHello').click(function () {  
  2.         top.layer.open({  
  3.             id: "layer_say_hello",  
  4.             type: 2,  
  5.             title: '打招呼',  
  6.             shadeClose: true,  
  7.             shade: 0.8,  
  8.             area: ['500px''400px'],  
  9.             content: '/Findfriend/Part_SayHello'//iframe的url
  10.             success: function (layero, index) {  
  11.                 var her_uli_id = $("#headico").attr("data-uli-id"); //headico 是 HomeFrame的元素
  12.                 var her_nickname = $("#nickname").text();   //nickname 是 HomeFrame的元素
  13.                 // layero.find("iframe")        找到iframe的jquery物件
  14.                 // layero.find("iframe")[0]     將jqeruy物件轉化為Dom物件
  15.                 // contentWindow                獲取當前 iframe 的 內容 window物件(Dom物件)
  16.                 //.send-hello 是 LayerFrame 的元素
  17.                 var jquerySendHelloButton = $(".send-hello", layero.find("iframe")[0].contentWindow.document);  
  18.                 jquerySendHelloButton.attr("data-her-uli-id", her_uli_id);  
  19.                 jquerySendHelloButton.attr("data-her-nick-name", her_nickname);  
  20.             }  
  21.         });  
  22.     })