获取相对URL的绝对URL.(IE6问题)

Question

我目前正在使用以下函数将相对URL"转换"为绝对URL:

function qualifyURL(url) {
    var a = document.createElement('a');
    a.href = url;
    return a.href;
}

这在大多数浏览器中运行良好,但IE6坚持仍然返回相对URL!如果我使用getAttribute('href'),它也会这样做.

我能够从IE6中获取合格的URL的唯一方法是创建一个img元素并查询它的'src'属性 - 这个问题是它生成一个服务器请求; 我想避免的事情.

所以我的问题是:有没有办法从IE6中获取完全限定的URL(没有服务器请求)？

---

在您推荐快速正则表达式/字符串修复之前,我向您保证并非如此简单.基本元素+双周期相对网址+一吨其他潜在变量真的让它变得地狱!

必须有一种方法可以做到这一点,而不必创建一个正则表达式的解决方案？

Answer 1

多么奇怪!但是,当您使用innerHTML而不是DOM方法时,IE确实理解它.

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="'+escapeHTML(url)+'">x</a>';
    return el.firstChild.href;
}

有点难看,但比自己动手更简洁.

Answer 2

只要浏览器正确实现<base>标记,哪些浏览器倾向于:

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

这是一个jsfiddle,您可以在其中进行实验:http://jsfiddle.net/ecmanaut/RHdnZ/

Answer 3

您可以在IE6上使用它来克隆元素:

function qualifyURL(url) {
    var a = document.createElement('a');
    a.href = url;
    return a.cloneNode(false).href;
}

^{(在IE6和IE5.5模式下使用IETester测试)}

Answer 4

我在这个博客上找到了另一种真正看起来像@bobince解决方案的方法.

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

我发现它更优雅,没什么大不了的.

Answer 5

URI.js似乎解决了这个问题:

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

另见http://medialize.github.io/URI.js/docs.html#absoluteto

没有使用IE6进行测试,但对于搜索一般问题的其他人可能会有所帮助.

Answer 6

我实际上想要一种方法,不需要修改原始文档(甚至不是暂时的),但仍然使用浏览器的内置URL解析等.此外,我希望能够提供自己的基础(如ecmanaught的答案).它相当简单,但使用createHTMLDocument(可能会被createDocument替换为可能更兼容):

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

http://jsfiddle.net/5u6j403k/

Answer 7

此解决方案适用于所有浏览器.

/**
 * 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

但是,它不支持带有".."的相对URL,例如"../file.png".

Answer 8

如果url不以“/”开头

获取当前页面的 url，去掉最后一个“/”之后的所有内容；然后附加相对网址。

else ifurl以 '/'开头

获取当前页面的 url 并截掉单个“/”右侧的所有内容；然后附加网址。

否则如果url以 # 或 ? 开头

获取当前页面的 url 并简单附加url

希望对你有帮助