颜色框在 IE 中无法正确加载-前端问题

Colorbox not loading properly in IE(颜色框在 IE 中无法正确加载)

本文介绍了颜色框在 IE 中无法正确加载的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

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

问题描述

推荐答案