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

2022-01-11 00:00:00 internet-explorer jquery jquery-plugins javascript colorbox

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

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.

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

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!

更新 2 - 我尝试将以下代码插入到我的 JS 中，看看是否能解决问题，但没有:

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

然后是这个:

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

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

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

这是一个令人费解的问题，我会尽力解释.我在第一次访问时会显示灯箱的页面中设置 cookie.它在 FF、Chrome 等中运行良好，但在 IE 中则不行.

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.

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

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.

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

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.

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

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.

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

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

我没有收到来自 IE 的错误.我正在使用 IE 8 进行测试，并且无法在使用 Windows XP 时测试 9.(有人告诉我它在 IE 9 中运行良好，但尚未确认)该脚本位于我文档的 <head> 中.(如果我将脚本移动到 <body> 它将完全破坏页面.)

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

我已经阅读了 DOCTYPE 不正确或缩短的问题以及 IE 中的颜色框问题.我的 DOCTYPE 如下，应该是正确的:

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

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.

要从此页面开始触发此错误，将出现一个灯箱.点击Message Examples(灯箱左下角或菜单中没有灯箱的第一项).

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

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

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

一旦加载了 div，我尝试使用事件处理程序来触发脚本，这甚至根本没有触发脚本.这是代码:

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

推荐答案

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

The reason it goes away when you open developer tools is that IE does not play nice with any console.log statements, until you open the developer tools. There has to be a console.log somewhere. It could be in any plugin file or javascript file you're using. It kills javascript that runs after it for some reason. Opening developer tools recognizes the console.log as a javascript function (my best guess) and so it suddenly works.

相关文章