For example utexas.edu prepend the path with a /
<link rel="shortcut icon" href="/sites/default/files/webcentral_favicon_0.ico" type="image/x-icon" />
columbia.edu does not, it just starts with the folder name or path
<link rel="shortcut icon" href="sites/all/themes/base/columbia2/images/favicon-crown.png" type="image/x-icon" />
Both of these are relative, but I need a way to differentiate from absolute pahts.
How can I progrmatically tell when I'm working with a relative path or an absolute path?
URLS can be formatted like the following
Absolute:
http://google.com, https://google.com
Scheme relative:
//google.com links use the same scheme that the page was loaded
//en.wikipedia.org/apple-touch-icon.png
Site absolute:
/index.html
Page relative:
index.html, ../index.html, ./index.html
I don't really understand the question, but you seem confused about what a relative/absolute URL is.
If you need to convert a relative URL into an absolute, you can use http://code.google.com/p/js-uri/
If the first character in the href value starts with / then it's relative to the root of the domain. If it starts with . then same directory.. .. is a directory above and these can stack. If it doesnt start with those and not // or a full URL, then it's relative. And actually, . and .. are relative too.
Be aware that it can also start with // or https? and in that case it would be absolute.
You can simply check for the leading slash:
var link = $('link[rel="shortcut icon"]').attr('href');
var start = link.charAt(0); // Returns the leading slash (or not...)
if(start=='/'){
return 'absolute';
}else{
return 'relative';
}
If your "sites" directory is in the root directory of your site then both are equivalent. By the way, are you using Drupal? Drupal allows you to upload the favicon and the path is taken care of by it.
Couldn't you just look for an 'http' at the beginning of the URL? Even if you're connecting securely, if it's a full URL it should start with http.
Related
I have a trouble with the import of my CSS - which is made through the html link tag.
<link rel="stylesheet" href="styles/main.css">
It works well when the url has got a single slash - like http://url/page.
it correctly look for the css at http://url/styles/main.css
but when the URL comports two slashes like http://url/page/1 then the css is looked at:
http://url/page/styles/main.css and so is not found cause path is incorrect.
I am using clojurescript react-js wrapper called re-frame.
How to tell the soft to always look at http://url/styles/main.css whatever the URL.
Thanks in advance for your help
Your <link ...> is using a relative URL. Relative to the current page, that is.
Just change it to an absolute one by adding / at the front - "/styles/main.css".
I have always thought a relative URL was relative to the URL in the browser address bar. But today my beliefs were shaken.
In a webpage that has the URL https://localhost:44372/docs/morpher.ru/ws/3/russian/declension/GET I put an href which looks like this:
выбор формата ответа
When I click the link, the browser takes me to
https://localhost:44372/response-format/index.md
Whereas I would expect to be taken to
https://localhost:44372/docs/morpher.ru/ws/response-format/index.md
Are my expectations incorrect? What is the relative path really relative to?
It's likely the case that there is a <base> tag.
You can change the relative path base like so:
<base href="https://example.com/new-base" />
Then, everything is relative to this, rather than what the page URL is.
I used DOM in order to extract all HREF-s from given html source. But, there's a problem: If i have link like this one:
<LINK rel="alternate" TYPE="application/rss+xml" TITLE="ES: Glavni RSS feed" HREF="/rss.xml">
then "href" element will be presented as /rss.xml, although that "/rss.xml" is just anchor text. Clicking on that link from Chrome's page source view, real link is opened.
I would like to take that href-s LINK, not anchor text. Please, how can i do it with dom?
Get a hold of the link element and get its href property. Suppose you were using an id,
<link id="myLink" rel="alternate" href="/rss.xml" />
var link = document.getElementById("myLink");
link.href; // http://www.example.com/rss.xml
"href" element will be presented as /rss.xml
Yes, that is the value of the attribute
although that "/rss.xml" is just anchor text.
No. <link> elements don't have anchor text. In the following example 'bar' is anchor text.
bar
Clicking on that link from Chrome's page source view, real link is opened.
Browsers know how to resolve relative URIs.
I would like to take that href-s LINK, not anchor text. Please, how can i do it with dom?
You can't use DOM to resolve a URI. You use DOM to get the value of the attribute and then use something else to resolve it as a relative URI.
The article Using and interpreting relative URLs explains how they work, and there are tools that can help resolve them.
You need to know the base URI that the relative URI is relative to (normally the URI of the document containing the link, but things like the base element can throw that off)
In Perl you might:
#!/usr/bin/perl
use strict;
use warnings;
use URI;
my $str = '/rss.xml';
my $base_uri = 'http://example.com/page/with/link/to/rss.xml';
print URI->new_abs( $str, $base_uri );
Which gives:
http://example.com/rss.xml
You can try using document.location.href to get the current URL and append the result you are getting from your example. That should give you an absolute path for the link.
What is the difference between? Thank you.
<img src="images/file.jpg"></img>
between
<img src="/images/file.jpg"></img>
between
<img src="./images/file.jpg"></img>
between
<img src="../images/file.jpg"></img>
You need to learn about relative and absolute paths.
Here are my explanations for your examples, but you realy should read the link in order to understand the concepts.
If the base URL is "http://example.com/resources/" then:
<img src="images/file.jpg"></img>
Will get:
http://example.com/resources/images/file.jpg
It simply adds the src url to the base URL.
<img src="/images/file.jpg"></img>
Will get:
http://example.com/images/file.jpg
Bacuse the image URL is rooted (starts with /) it uses the domain and adds the image src to the domain.
<img src="./images/file.jpg"></img>
Will get:
http://example.com/resource/images/file.jpg
In this case, it uses the relative path for the current directory (.), which is the base directory (resources).
<img src="../images/file.jpg"></img>
Will get:
http://example.com/images/file.jpg
In this case, it uses the relative path for the parent directory (..), which makes it go up a directory and then add the rest of the path.
The first, third and last ones are relative to the current path. In the last one, .. is the parent folder, which means you essentially ascend one level in the hierarchy, and in the second one . is the current folder, making the URI equivalent to the first one. The second one is relative to the root, since it starts with /. Read more about URIs in the HTML4 spec, or in general about Unix-style paths.
Thus, if you're at website.com/folder/folder/index.html, the four URIs would be equivalent to this:
website.com/folder/folder/images/file.jpg
website.com/images/file.jpg
website.com/folder/folder/images/file.jpg
website.com/folder/images/file.jpg
<img src="images/logo.gif" />
is equivalent to
<img src="./images/logo.gif" />
But
<img src="/images/logo.gif" />
is different.
Where is the third item looking for logo.gif?
The third one is looking relative to the root of the site, so if you were on a page at:
http://entrian.com/somewhere/page.html
it would look in:
http://entrian.com/images/logo.gif
ignoring the somewhere piece of the page's address.
images/logo.gif
It's relative and means: Go to a folder called images and then get the resource logo.gif
./images/logo.gif
It's relative and means: From the current folder (the dot means this) go to a folder called images and then get the resource logo.gif
As you can see the first two mean the same, finally the last one
/images/logo.gif
It's absolute and means: From the root of the web server or the file system or whatever (the slash means this) go to a folder called images and then get the resource logo.gif
In the document root. The first two are relative paths, while the last is an absolute path.