我有一个带有外部javascript调用的简单网页,以帮助浏览页面中的图像。该网页在chrome上运行正常,但在Internet Explorer上出现未定义的错误。似乎IE由于某种原因无法找到javascript。
这是我的html:
<!DOCTYPE html>
<html height="100%" lang="en" dir="ltr">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.0/css/all.css" integrity="sha384-Mmxa0mLqhmOeaE8vgOSbKacftZcsNYDjQzuCOm6D02luYSzBG8vpaOykv9lFQ51Y" crossorigin="anonymous">
<script type="text/javascript" src="http://fullpath.com/Scripts/toggle_images.js"></script>
<meta charset="utf-8">
</head>
<body>
<div class="navigation-bar">
<button class="btn btn-light nav-button" onclick="toggle_images('left')">
<i class="fas fa-caret-left"></i>
</div>
</div>
<div class="center-container">
<div class="image-container">
<img src="http://fullpath.com/Main/img1.png" id="simulatorImageTopLeft"></img>
</div>
<div class="image-container">
<img src="http://fullpath.com/Main/img2.png" id="simulatorImageTopRight"></img>
</div>
<div class="image-container">
<img src="http://fullpath.com/Main/img3.png" id="simulatorImageBottomLeft"></img>
</div>
<div class="image-container">
<img src="http://fullpath.com/Main/animation_left.gif" id="simulatorImageBottomRight"></img>
<img src="http://fullpath.com/Main/animation_right.gif" id="simulatorImageBottomRight"></img>
</div>
</div>
<div class="navigation-bar">
<button class="btn btn-light nav-button" onclick="toggle_images('right');">
<i class="fas fa-caret-right"></i>
</div>
</div>
</body>
</html>
这是javascript:
var imageIterator = 0;
function toggle_images(direction='none') {
var IMAGE_SET = [
['img1.png','img2.png','img3.png'],
['img4.png','img5.png','img6.png'],
];
var IMAGE_PATH = 'http:/fullpath.com/Main/'
if (direction == 'right') {
imageIterator = Math.abs(imageIterator + 1) % 4;
} else if (direction == 'left') {
imageIterator = Math.abs(3 + imageIterator) % 4;
}
var IMAGE = document.getElementById("reactor-nav-box").textContent;
document.getElementById("simulatorImageTopRight").src=IMAGE_PATH + IMAGE + '/'+ IMAGE_SET[imageIterator][1];
document.getElementById("simulatorImageTopLeft").src=IMAGE_PATH + IMAGE + '/'+ IMAGE_SET[imageIterator][0];
document.getElementById("simulatorImageBottomLeft").src=IMAGE_PATH + IMAGE + '/'+ IMAGE_SET[imageIterator][2];
}
您使用的是默认参数值:
function toggle_images(direction='none') {
// Here ------------------------^^^^^^^
没有IE版本支持这些功能或大多数其他现代JavaScript功能。
代替:
function toggle_images(direction) {
if (!direction) {
direction = 'none';
}
// ...
要么
function toggle_images(direction) {
direction = direction || 'none';
// ...
或其他各种变化。默认参数值的精确等效项为:
function toggle_images(direction) {
if (typeof direction === "undefined") {
direction = 'none';
}
// ...
但通常情况下,您真正需要的只是虚假支票(除非您希望direction
成为''
)。
那正是问题所在,现在可以了。谢谢!