通过 javascript 在 Internet Explorer 中更改图像 src

Question

跟进我之前的帖子：enter link description here

我想将其发布在它自己的主题中，以便其他人可以更轻松地找到它，如果它是重复的，我深表歉意。在我之前的帖子中，一位名叫 Ryan 的人为我的问题提供了一个解决方案，当时没有解决，虽然我很累，但已经很晚了，也许我错过了一些东西。无论如何，他建议我在按下每个按钮时更改图像 src，而不是最初加载所有图像，这无疑是一个更优雅的解决方案。他提供了这个代码；

<ul class='imageMenu'>
  <li data-image="dog.jpg">dog</li>
  <li data-image="cat.jpg">cat</li>
  <li data-image="donkey.jpg">donkey</li>
</ul>
<img src="" id='selectedImage' />
<script>
  const img = document.querySelector('#selectedImage');
  document.querySelectorAll('.imageMenu li').forEach(item => {
    item.addEventListener('click', evt => {
      img.setAttribute('src', evt.target.getAttribute('data-image'));
    });
  });
</script>

现在，随着时间的推移和睡眠的恢复，我可以在 Internet Explorer 中正常工作。我的问题是，是否有一些代码可以为 Internet Explorer 添加，比如 if 语句说“如果在 Internet Explorer 中运行此代码。”？再次抱歉，如果我是多余的，我只是迷路了，并且为了记录，Internet Explorer 是我存在的祸根，这是我不得不重新编码页面开始的全部原因。无论如何，任何建议转向哪里将不胜感激。谢谢，Black_Lightning

Answer 1

我发现了一些简单有效的方法！只需几行易于理解的代码！再次感谢所有在这里和我之前的帖子中提供帮助的人。

<script type="text/javascript">
  function change_pic(p) {
  document.images._pimg.src = p;
  // alert('test');
}
</script>

<img name="_pimg" src="image.jpg" >

<a href="javascript:;" onclick="change_pic('image.jpg')">image</a>
<a href="javascript:;" onclick="change_pic('image2.jpg')">image 2</a>

Answer 2

首先const 和箭头函数是 IE 8 不支持的 ECMAScript 6 功能，因此您应该使用 var 而不是箭头函数。

接下来，IE 8 也不支持.forEach() 和.querySelectorAll()。

但是，最重要的是 IE 8 不支持 .addEventListener() 作为将回调函数绑定到事件的一种方式，它使用专有的 attachEvent()。

现在，我们不想检查 IE 本身，我们只需要知道我们想要使用的功能是否可用，称为 "feature detection"。

您绝对应该知道 http://caniuse.com 是一个很好的资源，可以检查哪些地方支持哪些内容。

请参阅下面的跨浏览器版本：

// IE 8 doesn't support .forEach, .querySelectorAll or .addEventListener

var img = document.getElementById('selectedImage');
var menu = document.getElementById('imageMenu');

for(var i = 0; i < menu.childNodes.length; i++){
  
  // We're looping through all the child nodes, but we only care about <li> elements:
  if(menu.childNodes[i].nodeName === "LI"){

    // Check to see if addEventListener is supported
    if(window.addEventListener){
      // Modern, standards-compliant browser
      menu.childNodes[i].addEventListener('click', function(evt) {
        img.setAttribute('src', evt.target.getAttribute("data-image"));
        // Test
        console.log(img.src);
      });
    } else {
      // IE 8 or less
      menu.childNodes[i].attachEvent("onclick", function(evt){
        evt = evt || window.event;
        img.setAttribute('src', evt.srcElement.getAttribute("data-image"));
        // Test
        console.log(img.src);        
      });
    }
  }
}

<ul id='imageMenu'>
  <li data-image="dog.jpg">dog</li>
  <li data-image="cat.jpg">cat</li>
  <li data-image="donkey.jpg">donkey</li>
</ul>
<img src="" id='selectedImage' />

这是在 IE 8 仿真模式下在 IE 11 上运行的代码，您可以看到它产生了正确的结果。