Hacker News Reader

Hacker News

Comment by technion | Hacker News Reader

Full thread

technion

It's annoying that none of these end up parsing quite like the HTML inside a website.

For example, on google.com, you can find:

<img class="lnXdpd" alt="Google" height="92" src="/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"

But open the console and run this, and it will throw:

let x = new URL("/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png");

You're supposed to address this by adding the base URL on the end, but then correctly obtaining that can be brittle. If you're browsing a folder, the whole document.location is the baseURL, but if you are browsing a file (ie ends in .php or .html) it isn't. If you're taking user URLs, your browser's URL bar will add https:// automatically so people don't think about it, but they'll leave it out of an absolute URL and now you need to detect and add it if needed.

View on HN

I actually like that it does this. In your example where you’d want it to infer relative URLs, what happens when that code is executed in Node?

> If you're browsing a folder, the whole document.location is the baseURL, but if you are browsing a file (ie ends in .php or .html) it isn't

I’m not sure I understand what you’re saying here. The second argument in the URL constructor works as a “relative to” argument. If your URL starts with / it doesn’t matter if there’s a file or not, it’ll start from the domain root.

There's either 4 or 6 combinations (depending on whether you consider the domain-only case separate from path or not):

   www.example.com                   + /images/foo.jpg -> www.example.com/images/foo.jpg
   www.example.com/static/           + /images/foo.jpg -> www.example.com/images/foo.jpg
   www.example.com/static/index.html + /images/foo.jpg -> www.example.com/images/foo.jpg
   www.example.com                   + images/foo.jpg  -> www.example.com/images/foo.jpg
   www.example.com/static/           + images/foo.jpg  -> www.example.com/static/images/foo.jpg
   www.example.com/static/index.html + images/foo.jpg  -> www.example.com/static/index.htmlimages/foo.jpg (naive and wrong)
                                                       -> www.example.com/static/images/foo.jpg (extra work)

They were referring to the difference between the 5th and 6th (probably didn't notice it was an absolute path), you're referring to the first 3 together vs the others.

Interesting, I’ve never run into that. In the last example I’d just do

   www.example.com/static/index.html + ./images/foo.jpg

`src` takes a path, not a URL.

I think you just misunderstand what a URL is.

I would think of it as a "URI-reference" (a URL or a relative ref), since `src` can be thinks like "https://example.com/test.png" (absolute URI, not a path) or "//example.com/foo.png" (relative, not a path).

The bigger point is yeah, type T isn't a parser for type U.

I guess unfortunately, I'm not sure if there is a URI-ref parser in JS that I know of … but does one ever want to do that, without first normalizing it over a base URI?

Are you saying that is the to string value of a URL object instantiated with the url of a page containing just an image tag, or are you saying it’s the value when you instantiate an object with a url parameter to the png file itself? If it’s the png file itself my 0.02 is that is a logical choice. Obviously the to string ( or whatever it is, I’m not a JS dev ) isn’t the binary data, and I believe in the binary encoded response body there is a meta data signature block that contains that info.

Don't forget to handle the case where the document overrides the base with `<base>`.

> You're supposed to address this by adding the base URL on the end, but then correctly obtaining that can be brittle.

Isn't that what document.baseURI is for? At least that's my understanding:

new URL("/whatever", document.baseURI)

Reply on news.ycombinator.com