颜色框在 IE 中无法正确加载答案

【问题标题】：Colorbox not loading properly in IE颜色框在 IE 中无法正确加载
【发布时间】：2011-11-14 01:02:05
【问题描述】：

我找到了解决方案，但它不是最好的，所以我仍在寻找解决方案。请参阅我的回答了解我所做的事情。

更新 - 我的错误仍然存在，如下所述，但是如果我打开 IE 的开发者工具，错误就会消失！如果我关闭浏览器并重新打开，错误会再次出现！

更新 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 中发生的情况是调用我的灯箱（颜色箱）触发的脚本，但我看到的只是 AJAX 加载器旋转并且内容永远不会加载。我发现脚本启动得太快了。我正在使用$j(document).ready(function()，我切换到：$j(window).load(function()，一切似乎都很好，它工作正常，直到我从另一个页面开始并来到上面提到的页面。

如果我从任何其他页面开始并单击链接，我也会遇到同样的问题！ cookie 工作正常，不会再次触发该框。

换句话说，如果我清除 cookie 并从有问题的页面开始，那么没有问题。但是如果我从任何其他页面开始（清除了 cookie）并转到上述页面，颜色框将无法正确加载。

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

我没有收到来自 IE 的错误。我正在使用 IE 8 进行测试，并且无法在使用 Windows XP 时测试 9。（我被告知它在 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: '/'
    });
  }
});

HTML

<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 的发布限制。

要从this page 开始触发此错误，将出现一个灯箱。点击Message Examples（灯箱左下角或没有灯箱的菜单中的第一项）。

如果需要，这里是page 的直接链接。（直接进入页面不会触发错误。）

我尝试使用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: '/'
    });
  }
});

【问题讨论】：

我在 IE8 中打开了该页面，它似乎工作正常。 Colorbox 在第一次访问时打开，而不是在第二次访问时打开。
如果您直接链接到该页面，则不会触发错误。我编辑了我的问题以反映如何触发错误。
你能在 jsfiddle.net 上重新创建这个例子，包括 jAlbum 代码吗？我有几个测试环境和相当多的 colorbox 经验。如果我能解决这个问题就好了。
@melihcelik - 我创建了一个小提琴，但专辑根本没有加载，我不知道为什么。这是小提琴的链接 - jsfiddle.net/Lynda333/DurGt/8 - 我在 IE 中看不到错误，但画廊没有加载，所以这可能是错误没有触发的原因？
我检查了小提琴示例并下载了所有文件并重新创建了本地示例，但无法重现错误。我正在使用安装了 IE9 的 Windows 7，我使用兼容模式运行了示例。您在原始 IE7 和 IE8 安装时遇到错误吗？我的笔记本电脑上有带 IE7 的 WinXP，我也会试试。

标签： javascript jquery internet-explorer jquery-plugins colorbox

【解决方案1】：

当你打开开发者工具时它消失的原因是 IE 不能很好地处理任何 console.log 语句，直到你打开开发者工具。某处必须有一个console.log。它可以在您正在使用的任何插件文件或 javascript 文件中。由于某种原因，它会杀死在它之后运行的 javascript。打开开发人员工具将 console.log 识别为 javascript 函数（我的最佳猜测），因此它突然起作用了。

【讨论】：

我尝试添加一些代码来修复 console.log 问题（尽管我在任何地方都没有看到该代码）但它不起作用，我编辑了我的问题以反映我尝试过的内容。还有其他想法吗？
重读我写的，让我重新措辞。我没有看到任何会导致此问题的 console.log（或其他变体）。我仍然尝试添加代码以使我错过的任何 console.log 无效，但错误仍然发生。此外，我将代码添加到页面上的每一段 Javascript 中，而不仅仅是主页。
虽然这并没有解决我的问题，但我继续授予赏金，因为它至少给了我一个可以查看的地方，这可能对其他人有所帮助。请参阅我的回答，了解我选择做什么来解决问题，嘿，为什么要浪费赏金？感谢您的帮助！

【解决方案2】：

我刚遇到这个问题，虽然这个问题很老了，但我还是想把我的答案告诉她未来的访客......

我的颜色框版本 ColorBox v1.3.19.2 似乎返回了某种控制台对象。这可能就是打开开发人员工具栏后问题消失的原因。

我的解决方案是更改彩盒脚本中的最后一条语句（可用于两种开发作为缩小版）。脚本以

结尾

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

我已经替换为

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

现在一切都适合我。

【讨论】：

【解决方案3】：

我似乎已经解决了这个问题，但我仍然对为什么会发生错误感到有些困惑。我将解释我所做的：

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

<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>

最初我的脚本在 head 部分内，如果我将它们放在结束 body 标记之前，它会破坏页面。我所做的是改变了代码的位置。我将 Lightbox HTML 放在 <body> 部分的最顶部，然后在其下方但在正文部分的页面内容上方调用灯箱的脚本，它起作用了！如果有人可以解释为什么会起作用并且可以帮助我理解为什么它在头脑中不起作用，请告诉。

【讨论】：

【解决方案4】：

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

创建一个新函数setCookieAfterFirstView 并在该函数内部调用$j.cookie
在颜色框的onComplete回调上调用setCookieAfterFirstView函数。

这样，您可以确保没有其他调用会与打开颜色框发生冲突。也许有一个关于不同插件相互冲突的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(); }
        });
    }
});

您可以试试这个并对此答案写评论，无论它是否解决了问题？

【讨论】：

我试过了，该方法仍然存在问题。可能只是与 jAlbum Gallery 的冲突导致了这个奇怪的问题。感谢您的帮助。