blocks|key|2061573|text|如果url不以“/”开头|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2061574|获取当前页面的url，去掉最后一个‘/’之后的所有内容；然后附加相对的url。|2061575|否则，如果url以“/”开头|2061576|取下当前页面的url，去掉单个‘/’右边的所有内容，然后追加url。|2061577|否则，如果url以#或？|2061578|获取当前页面的url并简单地附加url|2061579|2061580|希望它能为你工作|2061581|entityMap^0|2|3|0|0|5|3|0|0|5|3|0|G|3|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|X|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|Y|8|@$9|Z|A|10|B|C]]|D|@]|E|$]]|$1|J|3|K|5|6|7|11|8|@]|D|@]|E|$]]|$1|L|3|M|5|6|7|12|8|@$9|13|A|14|B|C]]|D|@]|E|$]]|$1|N|3|O|5|6|7|15|8|@$9|16|A|17|B|C]]|D|@]|E|$]]|$1|P|3|-4|5|6|7|18|8|@]|D|@]|E|$]]|$1|Q|3|R|5|6|7|19|8|@]|D|@]|E|$]]|$1|S|3|-4|5|6|7|1A|8|@]|D|@]|E|$]]]|T|$]]

If <code>url</code> does not begin with '/'

Take the current page's url, chop off everything past the last '/'; then append the relative url.

Else if <code>url</code> begins with '/'

Take the current page's url and chop off everything to the right of the single '/'; then append the url.

Else if <code>url</code> starts with # or ?

Take the current page's url and simply append <code>url</code>

<hr>

Hope it works for you

blocks|key|1847599|text|太奇怪了！但是，当您使用innerHTML而不是DOM方法时，IE可以理解它。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1847600|function+escapeHTML(s)+{
++++return+s.split('&').join('&amp;').split('<').join('&lt;').split('"').join('&quot;');
}
function+qualifyURL(url)+{
++++var+el=+document.createElement('div');
++++el.innerHTML=+'<a+href="'%2BescapeHTML(url)%2B'">x</a>';
++++return+el.firstChild.href;
}|code-block|syntax|javascript|1847601|有点难看，但比自己做要简洁得多。|1847602|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

How strange! IE does, however, understand it when you use innerHTML instead of DOM methods.

<pre><code>function escapeHTML(s) {
 return s.split('&amp;').join('&amp;amp;').split('&lt;').join('&amp;lt;').split('"').join('&amp;quot;');
}
function qualifyURL(url) {
 var el= document.createElement('div');
 el.innerHTML= '&lt;a href="'+escapeHTML(url)+'"&gt;x&lt;/a&gt;';
 return el.firstChild.href;
}
</code></pre>

A bit ugly, but more concise than Doing It Yourself.

blocks|key|1847690|text|我发现这篇博客文章建议使用图像元素而不是锚点：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1847691|http://james.padolsey.com/javascript/getting-a-fully-qualified-url/|offset|length|1847692|这可以可靠地扩展网址，即使在IE6中也是如此。但问题是，我测试过的浏览器会在设置image+src属性时立即下载资源-即使您在下一行将src设置为null。|1847693|相反，我打算尝试一下博本斯的解决方案。|1847694|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|1V|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@$D|S|E|T|1|U]]|A|$]]|$1|F|3|G|5|6|7|V|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|W|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|X|8|@]|9|@]|A|$]]]|K|$L|$5|M|N|O|A|$P|C]]]]

I found this blog post that suggests using an image element instead of an anchor:

<a href="http://james.padolsey.com/javascript/getting-a-fully-qualified-url/" rel="nofollow">http://james.padolsey.com/javascript/getting-a-fully-qualified-url/</a>

That works to reliably expand a URL, even in IE6. But the problem is that the browsers that I have tested will immediately download the resource upon setting the image src attribute - even if you set the src to null on the next line.

I am going to give bobince's solution a go instead.

blocks|key|1847769|text|只要浏览器正确地实现了标签，浏览器倾向于：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1847770|function+resolve(url,+base_url)+{
++var+doc++++++=+document
++++,+old_base+=+doc.getElementsByTagName('base')[0]
++++,+old_href+=+old_base+&&+old_base.href
++++,+doc_head+=+doc.head+%7C%7C+doc.getElementsByTagName('head')[0]
++++,+our_base+=+old_base+%7C%7C+doc_head.appendChild(doc.createElement('base'))
++++,+resolver+=+doc.createElement('a')
++++,+resolved_url
++++;
++our_base.href+=+base_url+%7C%7C+'';
++resolver.href+=+url;
++resolved_url++=+resolver.href;+//+browser+magic+at+work+here

++if+(old_base)+old_base.href+=+old_href;
++else+doc_head.removeChild(our_base);
++return+resolved_url;
}|code-block|syntax|javascript|1847771|这里有一个jsfiddle，您可以在其中进行实验：http://jsfiddle.net/ecmanaut/RHdnZ/|offset|length|1847772|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/ecmanaut/RHdnZ/^0|0|0|P|Z|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

As long as the browser implements the &lt;base&gt; tag correctly, which browsers tend to:

<pre><code>function resolve(url, base_url) {
 var doc = document
 , old_base = doc.getElementsByTagName('base')[0]
 , old_href = old_base &amp;&amp; old_base.href
 , doc_head = doc.head || doc.getElementsByTagName('head')[0]
 , our_base = old_base || doc_head.appendChild(doc.createElement('base'))
 , resolver = doc.createElement('a')
 , resolved_url
 ;
 our_base.href = base_url || '';
 resolver.href = url;
 resolved_url = resolver.href; // browser magic at work here

 if (old_base) old_base.href = old_href;
 else doc_head.removeChild(our_base);
 return resolved_url;
}
</code></pre>

Here's a jsfiddle where you can experiment with it: <a href="http://jsfiddle.net/ecmanaut/RHdnZ/" rel="nofollow noreferrer">http://jsfiddle.net/ecmanaut/RHdnZ/</a>

blocks|key|2061878|text|如果它在浏览器中运行，这对我来说是可行的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2061879|++function+resolveURL(url,+base){
++++if(/%5Ehttps?:/.test(url))return+url;+//+url+is+absolute
++++//+let's+try+a+simple+hack..
++++var+basea=document.createElement('a'),+urla=document.createElement('a');
++++basea.href=base,+urla.href=url;
++++urla.protocol=basea.protocol;//+"inherit"+the+base's+protocol+and+hostname
++++if(!/%5E\/\//.test(url))urla.hostname=basea.hostname;+//..hostname+only+if+url+is+not+protocol-relative++though
++++if(+/%5E\//.test(url)+)return+urla.href;+//+url+starts+with+/,+we're+done
++++var+urlparts=url.split(/\//);+//+create+arrays+for+the+url+and+base+directory+paths
++++var+baseparts=basea.pathname.split(/\//);+
++++if(+!+/\/$/.test(base)+)baseparts.pop();+//+if+base+has+a+file+name+after+last+/,+pop+it+off
++++while(+urlparts[0]=='..'+){baseparts.pop();urlparts.shift();}+//+remove+..+parts+from+url+and+corresponding+directory+levels+from+base
++++urla.pathname=baseparts.join('/')%2B'/'%2Burlparts.join('/');
++++return+urla.href;
++}|code-block|syntax|javascript|2061880|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

If it runs in the browser, this sort of works for me..

<pre><code> function resolveURL(url, base){
 if(/^https?:/.test(url))return url; // url is absolute
 // let's try a simple hack..
 var basea=document.createElement('a'), urla=document.createElement('a');
 basea.href=base, urla.href=url;
 urla.protocol=basea.protocol;// "inherit" the base's protocol and hostname
 if(!/^\/\//.test(url))urla.hostname=basea.hostname; //..hostname only if url is not protocol-relative though
 if( /^\//.test(url) )return urla.href; // url starts with /, we're done
 var urlparts=url.split(/\//); // create arrays for the url and base directory paths
 var baseparts=basea.pathname.split(/\//); 
 if( ! /\/$/.test(base) )baseparts.pop(); // if base has a file name after last /, pop it off
 while( urlparts[0]=='..' ){baseparts.pop();urlparts.shift();} // remove .. parts from url and corresponding directory levels from base
 urla.pathname=baseparts.join('/')+'/'+urlparts.join('/');
 return urla.href;
 }
</code></pre>

blocks|key|1847928|text|此解决方案适用于所有浏览器。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1847929|/**
+*+Given+a+filename+for+a+static+resource,+returns+the+resource's+absolute
+*+URL.+Supports+file+paths+with+or+without+origin/protocol.
+*/
function+toAbsoluteURL+(url)+{
++//+Handle+absolute+URLs+(with+protocol-relative+prefix)
++//+Example:+//domain.com/file.png
++if+(url.search(/%5E\/\//)+!=+-1)+{
++++return+window.location.protocol+%2B+url
++}

++//+Handle+absolute+URLs+(with+explicit+origin)
++//+Example:+http://domain.com/file.png
++if+(url.search(/:\/\//)+!=+-1)+{
++++return+url
++}

++//+Handle+absolute+URLs+(without+explicit+origin)
++//+Example:+/file.png
++if+(url.search(/%5E\//)+!=+-1)+{
++++return+window.location.origin+%2B+url
++}

++//+Handle+relative+URLs
++//+Example:+file.png
++var+base+=+window.location.href.match(/(.*\/)/)[0]
++return+base+%2B+url|code-block|syntax|javascript|1847930|但是，它不支持带有"..“的相对URL。例如"../file.png“。|1847931|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

This solution works in all browsers.

<pre><code>/**
 * Given a filename for a static resource, returns the resource's absolute
 * URL. Supports file paths with or without origin/protocol.
 */
function toAbsoluteURL (url) {
 // Handle absolute URLs (with protocol-relative prefix)
 // Example: //domain.com/file.png
 if (url.search(/^\/\//) != -1) {
 return window.location.protocol + url
 }

 // Handle absolute URLs (with explicit origin)
 // Example: http://domain.com/file.png
 if (url.search(/:\/\//) != -1) {
 return url
 }

 // Handle absolute URLs (without explicit origin)
 // Example: /file.png
 if (url.search(/^\//) != -1) {
 return window.location.origin + url
 }

 // Handle relative URLs
 // Example: file.png
 var base = window.location.href.match(/(.*\/)/)[0]
 return base + url
</code></pre>

However, it doesn't support relative URLs with ".." in them, like "../file.png".

blocks|key|1847998|text|URI.js似乎解决了这个问题：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1847999|URI("../foobar.html").absoluteTo("http://example.org/hello/world.html").toString()|code-block|syntax|javascript|1848000|另请参阅http://medialize.github.io/URI.js/docs.html#absoluteto|1848001|不是用IE6测试的，但可能对其他搜索一般问题的人有帮助。|1848002|entityMap|0|LINK|mutability|MUTABLE|url|http://medialize.github.io/URI.js/|1|http://medialize.github.io/URI.js/docs.html#absoluteto^0|0|6|0|0|0|4|1I|1|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@$A|X|B|Y|1|Z]]|C|$]]|$1|D|3|E|5|F|7|10|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|11|8|@]|9|@$A|12|B|13|1|14]]|C|$]]|$1|K|3|L|5|6|7|15|8|@]|9|@]|C|$]]|$1|M|3|-4|5|6|7|16|8|@]|9|@]|C|$]]]|N|$O|$5|P|Q|R|C|$S|T]]|U|$5|P|Q|R|C|$S|V]]]]

<a href="http://medialize.github.io/URI.js/">URI.js</a> seems to solve the issue:

<pre><code>URI("../foobar.html").absoluteTo("http://example.org/hello/world.html").toString()
</code></pre>

See also <a href="http://medialize.github.io/URI.js/docs.html#absoluteto">http://medialize.github.io/URI.js/docs.html#absoluteto</a>

Not testeed with IE6, but maybe helpful for others searching to the general issue.

blocks|key|2062418|text|我在这个blog上发现了另一种方法，它看起来真的很像@bobince。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|2062419|function+canonicalize(url)+{
++++var+div+=+document.createElement('div');
++++div.innerHTML+=+"<a></a>";
++++div.firstChild.href+=+url;+//+Ensures+that+the+href+is+properly+escaped
++++div.innerHTML+=+div.innerHTML;+//+Run+the+current+innerHTML+back+through+the+parser
++++return+div.firstChild.href;
}|code-block|syntax|javascript|2062420|我发现它更优雅一点，没什么大不了的。|2062421|entityMap|0|LINK|mutability|MUTABLE|url|http://grack.com/blog/2009/11/17/absolutizing-url-in-javascript/^0|4|4|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@$A|T|B|U|1|V]]|C|$]]|$1|D|3|E|5|F|7|W|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|X|8|@]|9|@]|C|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|C|$]]]|L|$M|$5|N|O|P|C|$Q|R]]]]

I found on this <a href="http://grack.com/blog/2009/11/17/absolutizing-url-in-javascript/">blog</a> another method that really looks like @bobince solution.

<pre><code>function canonicalize(url) {
 var div = document.createElement('div');
 div.innerHTML = "&lt;a&gt;&lt;/a&gt;";
 div.firstChild.href = url; // Ensures that the href is properly escaped
 div.innerHTML = div.innerHTML; // Run the current innerHTML back through the parser
 return div.firstChild.href;
}
</code></pre>

I found it a little more elegant, not a big deal.

blocks|key|1848500|text|这是我用来解析基本相对URL的函数：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1848501|function+resolveRelative(path,+base)+{
++++//+Absolute+URL
++++if+(path.match(/%5E[a-z]*:\/\//))+{
++++++return+path;
++++}
++++//+Protocol+relative+URL
++++if+(path.indexOf("//")+===+0)+{
++++++return+base.replace(/\/\/.*/,+path)
++++}
++++//+Upper+directory
++++if+(path.indexOf("../")+===+0)+{
++++++++return+resolveRelative(path.slice(3),+base.replace(/\/[%5E\/]*$/,+''));
++++}
++++//+Relative+to+the+root
++++if+(path.indexOf('/')+===+0)+{
++++++++var+match+=+base.match(/(\w*:\/\/)?[%5E\/]*\//)+%7C%7C+[base];
++++++++return+match[0]+%2B+path.slice(1);
++++}
++++//relative+to+the+current+directory
++++return+base.replace(/\/[%5E\/]*$/,+"")+%2B+'/'+%2B+path.replace(/%5E\.\//,+'');
}|code-block|syntax|javascript|1848502|在jsfiddle上测试它：https://jsfiddle.net/n11rg255/|offset|length|1848503|它既可以在浏览器中工作，也可以在node.js或其他环境中工作。|1848504|entityMap|0|LINK|mutability|MUTABLE|url|https://jsfiddle.net/n11rg255/^0|0|0|E|U|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|W|8|@]|9|@$I|X|J|Y|1|Z]]|A|$]]|$1|K|3|L|5|6|7|10|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]]]

This is the function I use to resolve basic relative URLs:

<pre><code>function resolveRelative(path, base) {
 // Absolute URL
 if (path.match(/^[a-z]*:\/\//)) {
 return path;
 }
 // Protocol relative URL
 if (path.indexOf("//") === 0) {
 return base.replace(/\/\/.*/, path)
 }
 // Upper directory
 if (path.indexOf("../") === 0) {
 return resolveRelative(path.slice(3), base.replace(/\/[^\/]*$/, ''));
 }
 // Relative to the root
 if (path.indexOf('/') === 0) {
 var match = base.match(/(\w*:\/\/)?[^\/]*\//) || [base];
 return match[0] + path.slice(1);
 }
 //relative to the current directory
 return base.replace(/\/[^\/]*$/, "") + '/' + path.replace(/^\.\//, '');
}
</code></pre>

Test it on jsfiddle: <a href="https://jsfiddle.net/n11rg255/" rel="nofollow">https://jsfiddle.net/n11rg255/</a>

It works both in the browser and in node.js or other environments.

blocks|key|2062593|text|我实际上想要一种不需要修改原始文档(甚至不是临时的)，但仍然使用浏览器内置的url解析等等的方法。此外，我希望能够提供自己的基础(就像ecmanaught的答案一样)。它相当简单，但使用了createHTMLDocument+(可以用createDocument替代，这样可能会更兼容)：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2062594|function+absolutize(base,+url)+{
++++d+=+document.implementation.createHTMLDocument();
++++b+=+d.createElement('base');
++++d.head.appendChild(b);
++++a+=+d.createElement('a');
++++d.body.appendChild(a);
++++b.href+=+base;
++++a.href+=+url;
++++return+a.href;
}|code-block|syntax|javascript|2062595|http://jsfiddle.net/5u6j403k/|offset|length|2062596|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|T|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|S|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|T|8|@]|9|@$I|U|J|V|1|W]]|A|$]]|$1|K|3|-4|5|6|7|X|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|H]]]]

I actually wanted an approach to this that didn't require modifying the original document (not even temporarily) but still used the browser's builtin url parsing and such. Also, I wanted to be able to provide my own base (like ecmanaught's answer). It's rather straightforward, but uses createHTMLDocument (could be replaced with createDocument to be a bit more compatible possibly):

<pre><code>function absolutize(base, url) {
 d = document.implementation.createHTMLDocument();
 b = d.createElement('base');
 d.head.appendChild(b);
 a = d.createElement('a');
 d.body.appendChild(a);
 b.href = base;
 a.href = url;
 return a.href;
}
</code></pre>

<a href="http://jsfiddle.net/5u6j403k/" rel="noreferrer">http://jsfiddle.net/5u6j403k/</a>

I'm currently using the following function to 'convert' a relative URL to an absolute one:

<pre><code>function qualifyURL(url) {
 var a = document.createElement('a');
 a.href = url;
 return a.href;
}
</code></pre>

This works quite well in most browsers but IE6 insists on returning the relative URL still! It does the same if I use getAttribute('href'). 

The only way I've been able to get a qualified URL out of IE6 is to create an img element and query it's 'src' attribute - the problem with this is that it generates a server request; something I want to avoid.

So my question is: Is there any way to get a fully qualified URL in IE6 from a relative one (without a server request)?

<hr>

Before you recommend a quick regex/string fix I assure you it's not that simple. Base elements + double period relative urls + a tonne of other potential variables really make it hell! 

There must be a way to do it without having to create a mammoth of a regex'y solution??

Getting an absolute URL from a relative one. (IE6 issue)

服务器

我目前正在使用以下函数将相对URL‘转换’为绝对URL：function qualifyURL(url) {    var a = document.createElement('a');    a.href = url;    return a.href;}这在大多数浏览器中都工作得很好，但是IE6仍然坚持返回相对网...

问从相对URL获取绝对URL。(IE6问题)
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问从相对URL获取绝对URL。(IE6问题)EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问从相对URL获取绝对URL。(IE6问题)
EN