在灯箱调用中选择iframe BODY元素

Select the iframe BODY element on the lightbox call

本文关键字：iframe BODY 元素 选择 调用      更新时间：2023-09-26

这就是他们在工作时定义灯箱的方式

$(".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将决定颜色框的尺寸

问题是主体上的加载的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'); }
});

那么用什么方法呢？on完成，对吧？我怎样才能找到/选择尸体？？

尝试使用：

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

但log0和都是具有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*/
                })
            }
        });
});

如这里所建议的，尝试将代码附加到iframe内容的加载事件：

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

编辑：

我做了更多的测试，能够得到body.length返回1。首先，确保您的文档和iframe符合同源政策。请参阅此问题以了解更多详细信息，并在需要时提供解决方法。

其次，我将bind（）移到$（document）.ready（）中，缩短选择器，将iframe#cboxIframe更改为iframe.cboxIframe，并在iframe:的.find之前添加了.contents（）

$(".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!! :)
});

这对你有用吗？

$(".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"});
});

他们记录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());
      }
    } 
  }

如果iframe src在同一个域、端口和协议上，您可以访问它。问题是您不知道iframe何时可以访问，也不知道何时可以修改。

内置在colorbox中的事件不能保证任何东西。因此，除非colorbox中有一个"安全"事件在iframe准备就绪时触发，否则您可能需要自己进行检查。

浏览器有不同的处理方法，但最安全的方法可能是检查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
});​
相关文章：