javascript - 在 src 属性中设置图像的 url 是否可以使图像在互联网上更改时发生更改

Question

形成我的问题标题真的很难...我正在编写自己的 Windows 侧边栏小工具，我想显示当前的月相，所以我在互联网上搜索了这一点，我得到了一个显示该内容的网站:

http://www.iceinspace.com.au/moonphase.html

如果我获取图像网址(http://www.iceinspace.com.au/moon/images/phase_150_095.jpg)并将其设置在图像src中属性:

<img id="CurrentMoon" src="http://www.iceinspace.com.au/moon/images/phase_150_095.jpg"></img>

当 html 文档在 javascript 中加载时，我再次设置它:

              function showFlyout(event)
            {
document.getElementById("CurrentMoon").src = "http://www.iceinspace.com.au/moon/images/phase_150_095.jpg";
            }

如果在互联网上改变图片会改变吗？？

Answer 1

你说的是正确的，如果/moon/images/phase_150_095.jpg 处的图像被新图像替换，即图像文件已更改但图像的 URL 保持不变，你的小部件将正常工作，但因为它他们通过更改图像 url 来更改图像(例如，现在是phase_150_099.jpg)，因此如果将 img 的 src 属性设置为固定 URL，它将显示相同的图像。正确的解决方案是:

1) 使用 CORS 或 JSONP 向iceinspace 发出跨源请求，假设您的小工具来源与 www.iceinspace.com 不同2) 创建一个文档对象并通过 XPath 查找获取图像元素，如下所示

function showFlyout(event)
{
  url = http://www.iceinspace.com.au/moonphase.html;
  xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  xmlhttp.open('GET', url, true);
  xmlhttp.send(null);
  moonphasedoc = document.implementation.createHTMLDocument("");
  moonphasedoc.open("replace");
  moonphasedoc.write(xmlhttp.responseText);
  moonphasedoc.close(); 
  var element = moonphasedoc.evaluate( '//body/table/tbody/tr/td[3]/p/table/tbody/tr/td/table[1]/tbody/tr/td[1]/img' ,document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null ).singleNodeValue; //just copied the Xpath from element inspector :D
  document.getElementById("CurrentMoon").src = element.src;
 }

附注仅当您在iceinspace上有Access-Control-Allow-Origin: *时，这才有效