I am developing an RSS-Reader with PhoneGap. Everything is working out great so far, but now I want to download linked article pages in advance, so the user doesn’t have to wait for a slow connection.
Getting the HTML is easy via AJAX using JQuery, but I also want the images and CSS. I could get the URLs for the images and CSS from the resulting HTML, but the paths are relative. I thought that would be no problem since I have the base URL. Unfortunately it doesn’t really work as simple as I thought:
One example article would be http://www.golem.de/news/sicherheit-ecall-soll-motorradfahrern-das-leben-retten-1210-94854.html. A containing CSS file has the relative URL /staticrl/styles/golem_main_47-min.css. I tried using the last slash in the URL of the page for finding the base for relative pasths (W3C says that’s the way it sould work). So it would be http://www.golem.de/news/staticrl/styles/golem_main_47-min.css, but the actual file is found at http://www.golem.de/staticrl/styles/golem_main_47-min.css. I could also use the first slash after http:// and that would work for the first three examples I tried, but I’m pretty shure that’s not always working since that’s not how relative URLs work. But how can I be sure what the base is?
Maybe I’m missing a very easy way to do this? I also tried using an IFrame, but JavaScript doesn’t allow acces to cross domain IFrame contents.
Does anybody have any experience with something like this? I’m quite stuck at the moment.
I think you have misunderstood how a relative url works.
A relative url gets the resource from the host name (http://www.golem.de).
Not from the host name + last directory path (http://www.golem.de/news).
You need to parse the article url and get the host name, then append the resource path to the host url. Here is an example function to get the host name:
You might want to modify the regex to keep the protocol (http://), or find some other way to parse the host name from a url.