温馨提示:本文翻译自stackoverflow.com,查看原文请点击:html - External Javascript Undefined only on Internet Explorer
html javascript

html - 外部Java脚本仅在Internet Explorer上未定义

发布于 2020-03-27 11:51:17

我有一个带有外部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];
}

查看更多

查看更多

提问者
Mike49
被浏览
19
T.J. Crowder 2019-07-03 23:31

您使用的是默认参数值:

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成为'')。