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中的错误＆amp;在其他浏览器中查看相同内容以查看其工作状态...... PFB快照

你们中的任何人都可以告诉为什么不在互联网资源管理器中工作吗？

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

  

SCRIPT5007：无法获取属性'replace'的值：object is   null或undefined 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>

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

with：

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

with：

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相信这些标签存在。