Javascript 图像查看器在 Internet Explorer 中不起作用

Question

我为我的网站制作了以下网站中提到的类似类型的图像查看器。 http://www.javascriptkit.com/script/script2/backbox/ 图像查看器在 Chrome 中运行良好，但在 Internet Exlporer 中无法运行； 出于安全原因，我没有提供我的网站详细信息，但您可以通过在 Chrome 和 Internet Explorer 中复制粘贴下面的链接来查看问题。 http://www.javascriptkit.com/script/script2/backbox/

点击以上链接中的图片，在 Internet Explorer 中查看错误并在其他浏览器中查看相同以查看其工作状况... PFB 快照

谁能告诉为什么不能在 Internet Explorer 中工作？

来自 IE F12 devolper 工具控制台区域的错误消息是：

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

效果.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>

Answer 1

关于您担心为什么会在 IE 而不是 chrome 中发生这种情况，这是因为if(/MSIE/.test(navigator.userAgent) 当您的浏览器是 IE 时这种情况是正确的

为了纠正问题，正如您在评论中所说，您可以添加“未定义”条件。
只需替换这一行：

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+")"});}}

这一行：

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 文件中

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 将失败。

Answer 3

Internet Explorer 当前不支持完整的 HTML5。因此，对 HTML5 相关标签或元素的任何操作都会失败。值得尝试包含 html5shiv 库，它会诱使 IE 相信这些标签存在。