0

It's really hard to form my question title... I'm writing my own windows sidebar gadget , I want to show current moon phase , so I searched in internet for that and I got a websites that shows that :

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

if I take the image url (http://www.iceinspace.com.au/moon/images/phase_150_095.jpg) and set it in image src attribute:

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

and I set it again when html document loads in javascript:

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

does the picture change if it is changed in internet ??

Jonathan Leffler
  • 730,956
  • 141
  • 904
  • 1,278
Karam Najjar
  • 527
  • 5
  • 21

2 Answers2

1

What you say is correct, if the image at /moon/images/phase_150_095.jpg is replaced by a new image i.e. the image file is changed but the URL of the image remains same your widget would work fine, but as it happens they change the image by changing the image url ( for eg. right now it is phase_150_099.jpg ) , so if you set the src attribute of the img to a fixed URL it will display the same image. The correct solution will be :

1) Make a cross origin request to for the iceinspace using CORS or JSONP, assuming your gadgets origin is not same as www.iceinspace.com 2) Create a document object and get the image element through an XPath lookup like this 

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;
 }

P.S. This would only work if you have Access-Control-Allow-Origin: * on the iceinspace

Shivansh
  • 143
  • 5
  • I think it is the correct way of doing that , but it doesn't work :( , how do i know if i have "Access-Control-Allow-Origin on the iceinspace? – Karam Najjar Aug 25 '14 at 14:56
  • @KaramNajjar you can check it in the response headers from the iceinspace server ( you can can see those in the inspect element of chrome/firefox ), but I am certain that iceinspace would not have opened Access-Control-Allow-Origin to all , in that case you can ask the administrator of the site to set that for you. – Shivansh Aug 27 '14 at 14:33
0

If the image on the server (internet) changes but has the same name and is not cached, then your image will change as well, when you load it by JavaScript.

But, if the image is cached, then it will not change (you will see the old image).

To see the latest image, as present on the server, you need to append a unique string in the URL, every time you make a request. For example,

function showFlyout(event)
{
    var d = new Date();
    var n = d.getTime();
    document.getElementById("CurrentMoon").src = "http://www.iceinspace.com.au/moon/images/phase_150_095.jpg?v="+n;
}
Domain
  • 11,562
  • 3
  • 23
  • 44