上燈箱呼叫選擇了iframe BODY元素

Question

這是他們如何在工作中

$(".lightbox873x560").colorbox({width:"845", height:"555", resize:false, iframe:true, scrolling:"no", opacity:"0.65"}); 
$(".lightboxGallery").colorbox({width:"845", height:"555", resize:false, iframe:true, scrolling:"no", opacity:"0.65"}); 

等定義的收藏夾..

的，這是我的建議

$(".lightboxCustom").colorbox({ 
     width: $(this).attr('lWidth'), height: $(this).attr('lHeight'), resize:false, iframe:true, scrolling:"no", opacity:"0.65" 

}); 

這方式的屬性lWidth，lHeight將決定colorbox的尺寸，

問題在於在裝conent，對身體會有另一預先定義將修復燈箱內容寬度類..

因此，如何我可以刪除嗎？

我看到顏色框得到這個額外參數：

$(".lightboxCustom").colorbox({ 
     width: $(this).attr('lWidth'), height: $(this).attr('lHeight'), resize:false, iframe:true, scrolling:"no", opacity:"0.65", 
     onOpen:function(){ alert('onOpen: colorbox is about to open'); }, 
     onLoad:function(){ alert('onLoad: colorbox has started to load the targeted content'); }, 
     onComplete:function(){ alert('onComplete: colorbox has displayed the loaded content'); } 
}); 

所以什麼方法？ onComplete，對不對？以及我如何找到/選擇身體？

與努力：

onComplete:function(){ 
    console.log($('#cboxIframe').length); 
    console.log($('#colorbox #cboxWrapper #cboxLoadedContent iframe').length); 

} 

但兩者日誌0，是具有IFRAME類..

編輯

現在這是最接近我一直：

$(".lightboxCustom").each(function(){ 
     $(this).colorbox({width: $(this).attr('lWidth'), height: $(this).attr('lHeight'), resize:false, iframe:true, scrolling:"no", opacity:"0.65",fastIframe:false, 

      onComplete:function(){ 

       $(document).bind('cbox_complete',function(){ 
         var iframe = $('#colorbox div#cboxWrapper div div#cboxContent div#cboxLoadedContent iframe#cboxIframe'); 
                         var body = iframe.contents().find('body'); 


         console.log(iframe.length); /// ---> 1!! 
              console.log(body.lenght); /// ---> 1 :(
              /*But the problem is that this is empty*/ 
              alert(body.attr('class')); /*when its not*/ 
       }) 
      } 

     }); 
}); 

Answer 1

如建議here，嘗試將您的代碼附加到ifra的加載事件我的內容：

onComplete:function(){ 
    $("#cboxLoadedContent iframe").load(function(){ 
     console.log($(this).length); 
    }); 
} 

編輯：

我做了一些更多的測試，並能得到body.length返回1.首先，請確保您的文檔和iframe滿足Same Origin Policy。有關更多詳細信息，請參閱this question，並在需要時提供解決方法。

其次，我移動綁定（）到$（文件）。就緒（），縮短了選擇，改變的iframe＃cboxIframe到iframe.cboxIframe並加入.contents（）.find之前的iframe：

$(".lightboxCustom").each(function(){ 
    $(this).colorbox({width: $(this).attr('lWidth'), height: $(this).attr('lHeight'), resize:false, iframe:true, scrolling:"no", opacity:"0.65",fastIframe:false}); 
}); 
$(document).bind('cbox_complete',function(){ 
    var iframe = $('iframe.cboxIframe'); 
    var body = iframe.contents().find('body'); 
    console.log(iframe.length); /// ---> 1!! 
    console.log(body.length); /// ---> 1!! :) 
}); 

現在有效嗎？

Answer 2

$(".lightboxCustom").colorbox({ 
     width: $(this).attr('lWidth'), height: $(this).attr('lHeight'), resize:false, iframe:true, scrolling:"no", opacity:"0.65" 

}); 

這個想法很好，這裏對於JavaScript/jQuery中的執行上下文（這個值）的工作原理略有誤解。

試試這個：

$(".lightboxCustom").each(function(){ 
    $(this).colorbox({width: $(this).attr('lWidth'), height: $(this).attr('lHeight'), iframe:true, scrolling:"no", opacity:"0.65"}); 
}); 

Answer 3

他們記錄0的事實表明您正在擷取德權元素，但無論是測量錯誤的事情還是太早測量。我過去處理它的方式是在文檔加載後從iFrame中調用一個函數。因此，使用jQuery：

在iframe中

$(function() { // or you could/should use teh load event, particularly if the lightbox contains images 
    window.parent.yourNamespace.setColorBoxToIframe(yourNameSpace.getDocumentHeight()); 
}); 

在所有網頁加載頁面

var yourNameSpace = { 
    setColorBoxToIframe: function(height) { 
     // do the stuff in here that you were doing in your colorbox onLoad event before 
    }, 
    getDocumentHeight: function() { // Can't remember why this is so hacky, but there must've been some reason I wrote it like this 
     if (document.compatMode == 'CSS1Compat') { 
     return document.body.offsetHeight; 
     } else { 
     if ($.browser.msie) 
      return document.body.scrollHeight; 
     else 
      return Math.max($(document).height(), $(document.body).height()); 
     } 
    } 
    } 

Answer 4

如果IFRAME SRC是同一個域，端口和協議上，你可以訪問它。問題在於你不知道何時可以訪問iframe，也無法修改。

在colorbox中建立的事件不保證任何東西。因此，除非在iframe準備就緒時觸發的colorbox中存在「安全」事件，否則可能需要執行自己的檢查。

瀏覽器有不同的處理方式，但最安全的方式可能是檢查iframe中的BODY，並且BODY中存在元素，然後我們確定它已加載（否則您可以獲取鍍鉻的假身體）。

我做了一個快速原型在這裏：http://jsfiddle.net/pfg3B/

它去是這樣的：

// some local stuff for later use 
var $colorbox = $('#colorbox'), 
    tid, $body, $ibody, 
    find = function() { 
     $ibody = $colorbox.find('iframe').contents().find('body'); 
     // also make sure that there are elements in the body 
     return $ibody.children('*').length ? $ibody : []; 
    }; 

// attach a colorbox complete handler 
$(document).bind('cbox_complete', function(e) { 
    // the iframe doesn’t exist yet, we need to start a loop 
    tid = setInterval(function() { 
     $body = find(); 
     if($body.length) { 
      // the iframe is found, clear the timer and access the body 
      clearInterval(tid); 
      // do something with $body, remove class or whatever 
      $body.html('Yo!'); 
     } 
    },10); 
}); 

// apply the colorbox 
$('.lightbox873x560').colorbox({ 
    ​​​​​​iframe: true, 
    width: 100, // use your own lwidth if you like, this is just a test 
    height: 100 
});​