from - open url new window javascript

Obtener una URL absoluta de una relativa.(Problema IE6)

Question

Actualmente estoy usando la siguiente función para ''convertir'' una URL relativa a una absoluta:

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

Esto funciona bastante bien en la mayoría de los navegadores, pero IE6 insiste en devolver la URL relativa. Hace lo mismo si uso getAttribute (''href'').

La única forma en que pude obtener un URL calificado de IE6 es crear un elemento img y consultar su atributo ''src''; el problema es que genera una solicitud de servidor; algo que quiero evitar

Entonces mi pregunta es: ¿hay alguna forma de obtener una URL completamente calificada en IE6 de una relativa (sin una solicitud de servidor)?

Antes de recomendar una reparación rápida de expresiones regulares / cadenas, le aseguro que no es tan simple. Elementos base + urls relativas de período doble + una tonelada de otras variables potenciales realmente lo convierten en el infierno!

Debe haber una forma de hacerlo sin tener que crear un mamut de una solución regular?

Answer 1

¡Que extraño! IE lo entiende, sin embargo, cuando usas innerHTML en lugar de métodos 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 poco feo, pero más conciso que Doing It Yourself.

Answer 2

De hecho, quería un enfoque para esto que no requiriera modificar el documento original (ni siquiera temporalmente) pero aún así usar el análisis url incorporado del navegador y tal. Además, quería poder proporcionar mi propia base (como la respuesta de ecmanaught). Es bastante sencillo, pero usa createHTMLDocument (podría ser reemplazado por createDocument para ser un poco más compatible):

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 3

Encontré en este blog otro método que realmente se parece a la solución @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;
}

Lo encontré un poco más elegante, no es gran cosa.

Answer 4

Encontré esta publicación de blog que sugiere usar un elemento de imagen en lugar de un ancla:

http://james.padolsey.com/javascript/getting-a-fully-qualified-url/

Eso funciona para expandir de manera confiable una URL, incluso en IE6. Pero el problema es que los navegadores que he probado descargarán inmediatamente el recurso al configurar el atributo src de la imagen, incluso si configuras el src como nulo en la siguiente línea.

Voy a darle una solución de Bobince en su lugar.

Answer 5

Esta es la función que uso para resolver URLs básicas relativas:

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(/^/.///, '''');
}

Pruébelo en jsfiddle: https://jsfiddle.net/n11rg255/

Funciona tanto en el navegador como en node.js u otros entornos.

Answer 6

Esta solución funciona en todos los navegadores.

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

Sin embargo, no admite URL relativas con ".." en ellas, como "../file.png".

Answer 7

Puedes hacer que funcione en IE6 simplemente clonando el elemento:

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

^{(Probado usando IETester en modos IE6 e IE5.5)}

Answer 8

Si se ejecuta en el navegador, este tipo de trabajo me funciona ...

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

Answer 9

Siempre que el navegador implemente correctamente la etiqueta <base>, los navegadores tienden a:

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

Aquí hay un jsfiddle donde puedes experimentar con él: http://jsfiddle.net/ecmanaut/RHdnZ/

Answer 10

URI.js parece resolver el problema:

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

Ver también http://medialize.github.io/URI.js/docs.html#absoluteto

No se ha verificado con IE6, pero puede ser útil para otros que buscan el problema general.

Answer 11

Si url no comienza con ''/''

Toma la url de la página actual, corta todo lo que haya pasado el último ''/''; luego añada la URL relativa.

De lo contrario, si url comienza con ''/''

Tome la url de la página actual y recorte todo a la derecha del único ''/''; luego añada la url.

De lo contrario, si la url comienza con # o?

Tome la URL de la página actual y simplemente agregue la url

Espero que funcione para ti