Colorbox无法在IE中正确加载 [英] Colorbox not loading properly in IE
问题描述
我找到了解决方案，但这不是最好的解决方案，因此我仍在寻找解决方案.查看我的回答以了解我所做的事情.
更新 -如果打开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 Loader旋转了，内容从不加载.我发现脚本启动得太早了.我使用的是$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> </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>
另一个注意事项:我在页面上使用的是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语句配合使用.某处必须有一个console.log.它可以在您使用的任何插件文件或javascript文件中.由于某种原因，它会杀死运行它的javascript.打开开发人员工具会将console.log识别为javascript函数(我的最佳猜测)，因此突然可用.
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: '/'
});
}
});
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.
这篇关于Colorbox无法在IE中正确加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
