Colorbox 在 IE 中无法正确加载

发布于 2024-12-15 01:39:35 字数 3894 浏览 0 评论 0原文

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

更新 - 我的错误仍然存在，如下所述，但如果我打开 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 中发生的情况是调用我的灯箱 (colorbox) 的脚本触发，但我看到的只是 AJAX 加载程序旋转，并且内容从未加载。我发现剧本启动得太早了。我正在使用 $j(document).ready(function() 我切换到： $j(window).load(function() ，一切似乎都很好，它工作正常，直到我从另一个页面开始并进入上述页面，

不会再次触发该框。

如果我从任何其他页面开始并单击链接，我会遇到同样的问题，并且如果我清除 cookie 并从有问题的页面开始的话，那么就不会但是如果我从任何其他页面开始（清除了cookie）并转到上面的页面，

我可以告诉$j(window)。 load(function() 无法正常工作。

我没有收到来自 IE 的错误。我使用 IE 8 进行测试，无法测试 9，因为我使用的是 Windows XP。（有人告诉我它在 IE 9 中工作正常）但尚未证实这一点）该脚本位于我的文档的（如果我将脚本移动到中，它会完全破坏页面。）

我已阅读 的问题。 DOCTYPE 不正确或缩短，以及 IE 中的颜色框问题。我的文档类型如下，应该是正确的：

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

要触发此错误，请从此页面开始，将会出现一个灯箱。单击消息示例（灯箱的左下角或没有灯箱的菜单中的第一项）。

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

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

原文

I have found a solution but it is not the best so I am still looking for a solution. See my answer for what I have done.

UPDATE - My error persists as describe below BUT if I open IE's Developer Tools the error goes away! If I close the browser and re-open the error re-appears!

UPDATE 2 - I have tried to insert the following code into my JS to see if that would solve the issue and it did not:

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(){};
  }
}

And then this:

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

I also scanned through my JS files and never came across a console.log function that would be causing the error.

This is a convoluted issue and I will do my best to explain. I am setting cookies in a page that will show a lightbox on the first visit. It works great in FF, Chrome, etc. but does not in IE.

What happens in IE is the script for calling my lightbox (colorbox) fires but all I see is the AJAX Loader spinning and the content never loads. I figured out that the script was firing too soon. I was using $j(document).ready(function() I switched to: $j(window).load(function() and all seemed to be fine and it worked properly until I start from another page and come to the page mentioned above.

If I start on any other page and click a link I have the same issue! The cookie works properly and does not fire the box a second time.

In other words if I clear cookies and start at the page with an issue then no issue. BUT if I start from any other page (with cookies cleared) and go to the above page the colorbox does not load properly.

From what I can tell the $j(window).load(function() is not working correctly.

I receive no errors from IE. I am using IE 8 for testing and cannot test 9 as I am using Windows XP. (I have been told it works fine in IE 9 but have not confirmed this) The script is in the <head> of my document. (If I move the script into the <body> it completely breaks the page.)

I have read of issues of DOCTYPE not being correct or shortend and colorbox issues in IE. My DOCTYPE is as follow which should be correct:

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

Any thoughts or ideas are greatly appreciated!

Here is my code I am using:

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

One other note: I am using jAlbum on the page and I do not see any conflicts but could there be an issue? I cannot post that code here as it would exceed the post limit for SO.

To trigger this error start at this page, a lightbox will appear. Click Message Examples (lower left hand corner of lightbox or first item in menu without lightbox).

Here is a direct link to the page if needed. (Going to the page directly will not trigger the error.)

I attempted to use window.onload = function() and the same issue happened.

I attempted to use the event handler to trigger the script once the div was loaded, that did not even fire the script at all. here was that code:

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: '/'
    });
  }
});

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

爱已欠费 2024-12-22 01:39:35

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

回复收藏 0 原文

〆凄凉。 2024-12-22 01:39:35

我刚刚遇到这个问题，虽然这个问题很老了，但我仍然想为未来的访客提供我的答案...

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

我的解决方案是更改 colorbox 脚本中的最后一条语句（可用于缩小版本的开发）。该脚本以

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

结束，我已将其替换为

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

现在一切对我有用。

回复收藏 0 原文

错々过的事 2024-12-22 01:39:35

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

首先，我使用 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 部分内，如果我将它们放在结束正文标记之前，则会破坏页面。我所做的是改变代码的位置。我将灯箱 HTML 放在部分的最顶部，然后将调用灯箱的脚本放在它的正下方，但位于正文部分的页面内容之上，它就成功了！如果有人可以解释为什么它有效并且可以帮助我理解为什么它在头脑中不起作用，请告诉我。

I have seemed to solved this issue though I am still a bit confused as to why the error was happening. I will explain what I have done:

First I use Dreamweaver Teamplates to create my webpage. So my code ends up looking like this

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

Originally my scripts where inside the head section, if I put them right before the closing body tag it broke the page. What I have done is changed the placement of the code. I put the Lightbox HTML at the very top of the <body> section and then the script to call the lightbox right below it but above the page content in the body section and it worked! If anyone can to explain why that worked and can help me understand why it did not work in the head please tell.

回复收藏 0 原文

一场春暖 2024-12-22 01:39:35

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

创建一个新函数 setCookieAfterFirstView 并在该函数内调用 $j.cookie 调用
在 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(); }
        });
    }
});

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

I started writing this as a comment to the question but it got very long, so I decided writing it as an answer. I don't know if that will solve the problem but I think it is worth trying.

Create a new function, setCookieAfterFirstView and call the $j.cookie call inside that function
Call setCookieAfterFirstView function on onComplete callback of colorbox.

This way, you can make sure that no other calls will conflict with colorbox opening. Maybe there is an issue of jQuery about different plugin's conflicting with each other, I'm just guessing now..

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

Can you try this and write a comment to this answer, whether it solved the problem or not?

回复收藏 0 原文

~没有更多了~