在IE中Colorbox不能正确加载

Colorbox not loading properly in IE

本文关键字:加载 不能 Colorbox IE      更新时间:2023-09-26

我已经找到了一个解决方案,但它不是最好的,所以我仍然在寻找一个解决方案。请看我所做的回答。


UPDATE -我的错误持续如下所述,但如果我打开IE的开发人员工具错误消失!如果我关闭浏览器并重新打开该错误再次出现!

UPDATE 2 -我试图将以下代码插入到我的JS中,看看是否会解决问题,它没有:

if (!("console" in window) || !("firebug" in console)) {
  var names = ["log", "debug", "info", "warn", "error", "assert", "dir", "dirxml", "group", "groupEnd", "time", "timeEnd", "count", "trace", "profile", "profileEnd"];
  window.console = {};
  for (var i = 0, len = names.length; i < len; ++i) {
    window.console[names[i]] = function(){};
  }
}

然后这个:

var console = {};
console.log = function(){};

我还扫描了我的JS文件,从未遇到会导致错误的console.log函数。


这是一个令人费解的问题,我将尽力解释清楚。我在一个页面中设置cookie,将在第一次访问时显示一个灯箱。它在FF, Chrome等中工作得很好,但在IE中不行。

在IE中发生的事情是调用我的lightbox (colorbox)火灾的脚本,但我所看到的是AJAX加载器旋转和内容从未加载。我发现剧本开得太快了。我使用的是$j(document).ready(function(),我切换到:$j(window).load(function(),一切似乎都很好,它正常工作,直到我从另一个页面开始,来到上面提到的页面。

如果我开始在任何其他页面上点击链接,我有同样的问题!饼干工作正常,不会再次点燃盒子。

换句话说,如果我清除cookie并从有问题的页面开始,那么就没有问题了。但是如果我从任何其他页面(清除cookie)开始,然后转到上面的页面,colorbox不能正确加载。

据我所知,$j(window).load(function()不能正常工作。

我没有收到来自IE的错误。我使用ie8进行测试,无法测试9,因为我使用的是Windows XP。(我被告知它在IE 9中工作正常,但尚未证实这一点)脚本在我的文档的<head>。(如果我把脚本移动到<body>,它完全打破了页面。)

我读过DOCTYPE在IE中不正确或缩短和色框问题的问题。我的DOCTYPE如下,应该是正确的:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

任何想法或想法都非常感谢!

下面是我使用的代码:

Javascript

var $j = jQuery.noConflict();
$j(window).load(function() {
  //window.onload = function() does not function properly either...
  if(!$j.cookie('gallerycookie')){
    $j.colorbox({
      inline:true, 
      href:"#gallery-nav-instruct"
    });
    $j.cookie("gallerycookie", 1, {
      expires: 30, 
      path: '/'
    });
  }
});

<div style="display:none">
  <div id="gallery-nav-instruct">
    <h2>Gallery Navigation Instructions - Step 1</h2><h2 style="text-align:right">
      <a style="text-align:right;" class="inline cw" href="
         #gallery-enlarge-instruct">Step 2</a></h2>
    <p>&nbsp;</p>
    <p class="white"><img src="/Images/Pages/gallery-navigation.jpg" width="890" height="450" alt="Gallery Navigation Instructions" /></p>
  </div>
</div>
<div style="display:none">
  <div id="gallery-enlarge-instruct">
    <h2>Gallery Navigation Instructions - Step 2</h2>
    <p>&nbsp;</p>
    <h2><a class="inline cw" href="#gallery-nav-instruct">Step 1</a> </h2>
    <p class="white"><img src="/Images/Pages/gallery-enlarge.jpg" width="890" height="510" alt="Gallery -Enlarged View Instructions" /></p>
  </div>
</div>

另一个注意事项:我在页面上使用jAlbum,我没有看到任何冲突,但可能有问题吗?我不能在这里发布代码,因为它超过了SO的发布限制。

要在该页触发此错误,将出现一个灯箱。点击Message Examples(灯箱左下角或菜单中没有灯箱的第一项)

如果需要,这里有一个到该页面的直接链接。(直接进入页面不会触发错误)

我尝试使用window.onload = function(),同样的问题发生了。

我尝试使用事件处理程序来触发脚本,一旦div被加载,甚至没有触发脚本。下面是代码:

var $j = jQuery.noConflict();
$j('#gallery-nav-instruct').load(function() {
  if(!$j.cookie('gallerycookie')){
    $j.colorbox({
      inline:true, 
      href:"#gallery-nav-instruct"
    });
    $j.cookie("gallerycookie", 1, {
      expires: 30, 
      path: '/'
    });
  }
}); 

当您打开开发人员工具时,它消失的原因是IE不能很好地处理任何console.log语句,直到您打开开发人员工具。某处一定有控制台。日志。它可以在你使用的任何插件文件或javascript文件中。出于某种原因,它会杀死在它后面运行的javascript。打开开发人员工具将console.log识别为javascript函数(我的最佳猜测),因此它突然工作了。

我刚刚遇到这个问题,虽然这个问题很老了,但我还是想把我的答案放在她身上,供将来的访问者使用。

我的colorbox版本,colorbox v1.3.19.2,似乎返回某种控制台对象。这可能就是为什么一旦你打开开发者工具栏,这个问题就会消失。

我的解决方案是改变colorbox脚本中的最后一条语句(可以用于开发和缩小版本)。脚本以

结尾

}(jQuery, document, this, console));

我用

替换了

}(jQuery, document, this, null));

,现在一切都为我工作。

我似乎已经解决了这个问题,虽然我仍然有点困惑,为什么错误正在发生。我将解释我所做的事情:

首先,我使用Dreamweaver teamplate来创建我的网页。所以我的代码最终看起来像这样

<head> 
Template Content for head section then
<!-- TemplateBeginEditable name="head" -->
Content outside of template that goes in head section.
<!-- TemplateEndEditable -->
</head>
<body>
Template Content for Body
<!-- TemplateBeginEditable name="ContentArea" -->
Page or body content not inside template.
<!-- TemplateEndEditable -->
More Template Content for Body
</body>

最初我的脚本在头部部分,如果我把它们放在结束体标签之前,它打破了页面。我所做的只是改变了代码的位置。我把Lightbox HTML放在<body>部分的顶部,然后脚本调用Lightbox就在它的下方,但在body部分的页面内容上方,它工作了!如果有人能解释为什么它工作,并能帮助我理解为什么它不能在头部工作,请告诉。

我开始写这篇文章作为对这个问题的评论,但它太长了,所以我决定把它作为一个答案。我不知道那是否能解决问题,但我认为值得一试。

  • 创建一个新的函数setCookieAfterFirstView,并在该函数中调用$j.cookie调用
  • 在colorbox的onComplete回调时调用setCookieAfterFirstView函数

这样,您可以确保没有其他调用将与colorbox打开冲突。也许有一个问题的jQuery关于不同的插件相互冲突,我只是猜测现在…

var $j = jQuery.noConflict();
var setCookieAfterFirstView: function() {
    $j.cookie("gallerycookie", 1, {
        expires: 30,
        path: '/'
    });
};
$j(window).load(function() {
    //window.onload = function() does not function properly either...
    if (!$j.cookie('gallerycookie')) {
        $j.colorbox({
            inline: true,
            href: "#gallery-nav-instruct",
            onComplete:function() { setCookieAfterFirstView(); }
        });
    }
});

你能试着给这个答案写一个评论吗,不管它是否解决了问题?