Obtenir une URL absolue d'un parent. (Numéro IE6)

Question

Je suis actuellement à l'aide de la fonction suivante à "convertir" une URL relative à un droit absolu:

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

Cela fonctionne assez bien dans la plupart des navigateurs, mais IE6 insiste sur le retour à l'URL relative encore! Il fait la même chose si j'utilise getAttribute('href').

La seule façon que j'ai été en mesure d'obtenir une URL de IE6 est de créer un élément img requête et c'est 'src' attribut - le problème, c'est qu'il génère une demande de serveur; quelque chose que je veux éviter.

Donc ma question est: Est-il possible d'obtenir une URL complète dans IE6, à partir d'un rapport (sans serveur demande)?

---

Avant de vous recommander un rapide regex/string fix je vous assure que ce n'est pas simple. Les éléments de Base + double période de relative url + une tonne d'autres variables potentielles rendre vraiment l'enfer!

Il doit y avoir un moyen de le faire sans avoir à créer un mammouth d'une regex y solution??

Answer 1

Comme c'est étrange! Cependant, IE le comprend lorsque vous utilisez innerHTML au lieu des méthodes DOM.

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

Un peu moche, mais plus concis que de le faire soi-même.

Answer 2

Tant que le navigateur implémente correctement la balise <base>, les navigateurs ont tendance à:

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

Voici un jsfiddle où vous pouvez expérimenter: http://jsfiddle.net/ecmanaut/RHdnZ/

Answer 3

URI.js semble résoudre le problème:

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

Voir aussi http://medialize.github.io/URI.js/docs.html#absoluteto

Pas testée avec IE6, mais peut-être utile pour les autres personnes cherchant l’enjeu général.

Answer 4

Vous pouvez utiliser https://gist.github.com/1088850 pour résoudre l'URI relatif en un absolu. C'est simple et pur js.

Answer 5

Cette solution fonctionne dans tous les navigateurs.

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

Cependant, il ne supporte pas les URL relatives avec "..", comme "../file.png".