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

IT技术 javascript url internet-explorer-6
2021-01-24 22:10:35

我目前正在使用以下函数将相对 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(没有服务器请求)?


在你推荐一个快速的正则表达式/字符串修复之前,我向你保证它没有那么简单。基本元素 + 双周期相对 url + 大量其他潜在变量真的很糟糕!

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

6个回答

多奇怪!但是,当您使用 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;
}

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

根据HTML 规范,此方法将 null (U+0000) 替换为 (U+FFFD)
2021-03-21 22:10:35
我在不需要代码转义的博客上找到了这个类似的解决方案:stackoverflow.com/a/22918332/82609
2021-04-09 22:10:35

只要浏览器正确实现了 <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/

好主意,@Oriol – 没有理由不对不传递这两个参数的人提供更友好的默认行为。融合的。
2021-03-18 22:10:35
除了支持任意基本 URL 之外,这与问题中提供的解决方案究竟有何不同?它适用于 IE 6 吗?
2021-03-29 22:10:35
@AndreasDietrich 那是因为你没有将任何参数传递给base_url参数,所以它变成undefined并被字符串化为"undefined". 您应该改为传递空字符串。或者,如果你想第二个参数可选,使用our_base.href = base_url || "",而不是our_base.href = base_url..
2021-04-07 22:10:35
晚会已经晚了三年,因此在没有营销或很多人遇到问题并想要代码保守且准确的解决方案的情况下,需要一段时间才能升到顶峰。
2021-04-10 22:10:35
@AmadeusDrZaius 不应该,但如果你愿意,他们可以。Javascript 只在行尾添加自动分号,这样做不会使下一行成为无效语句。", foo = 1" 是一个语法错误,因此整个 var 语句是批量计算的,没有分号插入。
2021-04-13 22:10:35

您只需克隆元素即可使其在 IE6 上运行:

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

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

我在这个博客上发现了另一种看起来像@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;
}

我发现它更优雅一点,没什么大不了的。

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

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

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

未使用 IE6 进行测试,但可能对其他人搜索一般问题有所帮助。

命名的 npm 包已更改为urijs github.com/medialize/URI.js#using-urijs
2021-03-16 22:10:35
在事物的节点方面(用于爬网等),此处正确的库可通过 获得npm install URIjs,而不是其他具有相似名称的库
2021-04-12 22:10:35