在Internet Explorer中，JavaScript图像查看器无法工作。

Question

我已经为我的网站制作了类似以下网站提到的图像查看器。 http://www.javascriptkit.com/script/script2/backbox/ 该图像查看器在Chrome中运行良好，但在Internet Explorer中无法正常工作; 出于安全原因，我没有提供我的网站详细信息，但您可以通过将以下链接复制粘贴到Chrome和Internet Explorer中来查看问题。 http://www.javascriptkit.com/script/script2/backbox/ 点击上面链接中的图像，查看Internet Explorer中的错误，并查看其他浏览器中的工作情况... 下面是快照 请问为什么在Internet Explorer中无法正常工作？

IE F12开发人员工具控制台区域中的错误消息如下：

SCRIPT5007：无法获取属性“replace”的值：对象为null或未定义 effects.js、第1行，第1747个字符

effects.js = http://www.javascriptkit.com/script/script2/backbox/js/effects.js

如果您需要示例js文件，请从以下链接获取：http://www.javascriptkit.com/script/script2/backbox/backboxfiles.zip 使用的HTML是：

<link rel="stylesheet" href="backbox.css" type="text/css" />
<script type="text/javascript" src="js/prototype.compressed.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<script type="text/javascript" src="js/dhtmlHistory.js"></script>
<script type="text/javascript" src="js/customsignsheader.js"></script>

<div onclick="dhtmlHistory.add('location1',{message: 'backbox'});countdown()">
<a href="images/babyhand.jpg" rel="lightbox[slide]" caption="A Bunch of Grapes">
<img src="images/sunset.jpg" alt="lime" width="400" height="300" border="0" /></a>
</div>

<a href="images/desert.jpg" rel="lightbox[slide]" caption="Sunflower"></a>
<a href="images/beech.jpg" rel="lightbox[slide]" caption="Dolphin"></a>
<a href="images/lime.jpg" rel="lightbox[slide]" caption="Waterfall"></a>

<script type="text/javascript" src="js/customsignsfooter.js"></script>

- logan

---

它是否在IE中记录任何错误？ - defau1t

请点击图片，查看以下与编程有关的内容：http://www.javascriptkit.com/script/script2/backbox/ - logan

在我的IE8中运行良好。 - Manse

@ManseUK：我的IE8无法正常工作；我需要设置其他东西吗？请查看下面的错误： SCRIPT5007：无法获取属性“replace”的值：对象为空或未定义 effects.js，第1行第1747个字符 http://www.javascriptkit.com/script/script2/backbox/js/effects.js - logan

Answer 1

关于您关心的为什么在IE中会出现此问题而在Chrome中不会，这是因为出现了这个条件 if(/MSIE/.test(navigator.userAgent) 当您使用IE浏览器时此条件为真。

要纠正此问题，如您在评论中所说，您可以添加一个“undefined”的条件。
只需替换此行：

if(/MSIE/.test(navigator.userAgent)){Element.setStyle(_10,{filter:Element.getStyle(_10,"filter").replace(/alpha\([^\)]*\)/gi,"")+"alpha(opacity="+_11*100+")"});}  

使用:

if(/MSIE/.test(navigator.userAgent)){var filterStyle=Element.getStyle(_10,"filter");if(typeof(filterStyle)!="undefined"){Element.setStyle(_10,{filter:filterStyle.replace(/alpha\([^\)]*\)/gi,"")+"alpha(opacity="+_11*100+")"});}}

and this line:

if(/MSIE/.test(navigator.userAgent)){Element.setStyle(_10,{filter:Element.getStyle(_10,"filter").replace(/alpha\([^\)]*\)/gi,"")});}

使用：

if(/MSIE/.test(navigator.userAgent)){var filterStyle=Element.getStyle(_10,"filter");if(typeof(filterStyle)!="undefined"){Element.setStyle(_10,{filter:filterStyle.replace(/alpha\([^\)]*\)/gi,"")});}}

在 effects.js 文件中

- Mahyar

Answer 2

在IE中打开开发人员工具（按F12），然后点击“控制台”选项卡。你应该能够看到有一个关于effects.js脚本的错误信息。

SCRIPT5007: Unable to get value of the property 'replace': object is null or undefined 
effects.js, line 1 character 1747

这至少可以让你有个开始查找的地方。

如果你真的很懒，导致代码失败的实际行是这个：

Element.getStyle(_10,"filter").replace(/alpha\([^\)]*\)/gi,"")

getStyle调用明显返回null，因此随后调用replace将失败。

- adhocgeek

---

我在replace函数中没有发现任何问题；请在此处找到完整的js文件并告诉我问题所在：http://www.javascriptkit.com/script/script2/backbox/js/effects.js 请尽快回复，因为50个奖励将在几天后过期... - logan

你没有看对问题所在。我不会深入研究这一堆混淆的代码来找到问题，但是你应该能够轻松地发现问题出在这个调用上：Element.getStyle（_10，“filter”）——显然这将返回null，因此随后调用replace就会失败。 - adhocgeek

为什么在Chrome中没有发生这种情况？如果返回null，那么我们可以有一些null的条件来替换一些值。它应该返回什么？还请告诉我为什么在其他浏览器中运行良好？ - logan

@adhocgeek 仅供进一步调查：http://jsbeautifier.org/?without-codemirror ;)。 - Teemu

Answer 3

Internet Explorer目前不支持完整的HTML5。因此，任何与HTML5相关的标签或元素的操作都将失败。值得尝试包含html5shiv库，这会欺骗IE认为这些标签存在。

- MTCoster