Obtener la URL actual de IFRAME


Respuestas:


166

Por razones de seguridad, solo puede obtener la URL mientras el contenido del iframe y el javascript de referencia se proporcionen desde el mismo dominio. Siempre que eso sea cierto, algo como esto funcionará:

document.getElementById("iframe_id").contentWindow.location.href

Si los dos dominios no coinciden, se encontrará con restricciones de seguridad de secuencias de comandos de referencia entre sitios.

Consulte también las respuestas a una pregunta similar .


¿Sabes si la solución proporcionada por la respuesta ganadora funciona? No pude hacer que funcione en mi computadora (IE, Windows)
chris

Estaba hablando del enlace que enumeraste a la pregunta similar.
chris

No hay una respuesta ganadora en la pregunta que vinculé ... si te refieres a la respuesta más alta, no es realmente una solución que funcione. Con IE, puede probar el enfoque HTA que se proporciona también en las respuestas a la pregunta antes mencionada.
kkyy

18
Esto no funciona si su iframe src es de un dominio diferente.
confile el

¿Qué pasa si agregamos el atributo sandbox="allow-same-origin"al iFrame?
Roel

26

Si su iframe es de otro dominio, (dominio cruzado), las otras respuestas no lo ayudarán ... simplemente necesitará usar esto:

var currentUrl = document.referrer;

y aquí tienes la URL principal.


28
-1 el OP está buscando la URL actual del iframe, no la referencia de la página principal.
Christophe

15
@Christophe: lo sé, ¡pero puede ayudar a las personas que buscan obtener la URL principal y llegaron a esta pregunta!
ParPar

6
gr8 .. Esto me ayuda
Vikky

1
Esto es exactamente lo que estaba buscando y resuelve mi problema sin darme un error de X-Script. +1 por eso
Ulysses Alves

1
Excelente, necesito la URL del iframe, no el padre :)
speti43

4

Espero que esto ayude de alguna manera, en su caso, sufrí exactamente el mismo problema y solo usé localstorage para compartir los datos entre la ventana principal y el iframe. Entonces, en la ventana principal puede:

localStorage.setItem("url", myUrl);

Y en el código donde la fuente del iframe es simplemente obtener estos datos de localstorage:

localStorage.getItem('url');

Me ahorro mucho tiempo. Por lo que puedo ver, la única condición es el acceso al código de la página principal. Espero que esto ayude a alguien.


4
el almacenamiento local solo funciona en el mismo dominio ... así que, ¿por qué enfrentarse a todos estos problemas? simplemente consulta la ubicación.href
Yuki

3

Si está en el contexto de iframe,

Podrías hacerlo

const currentIframeHref = new URL(document.location.href);
const urlOrigin = currentIframeHref.origin;
const urlFilePath = decodeURIComponent(currentIframeHref.pathname);

Si está en la ventana / marco principal, puede usar la respuesta de https://stackoverflow.com/a/938195/2305243 , que es

document.getElementById("iframe_id").contentWindow.location.href

1

Tuve un problema con blob url hrefs. Entonces, con una referencia al iframe, acabo de producir una URL del atributo src del iframe:

    const iframeReference = document.getElementById("iframe_id");
    const iframeUrl = iframeReference ? new URL(iframeReference.src) : undefined;
    if (iframeUrl) {
        console.log("Voila: " + iframeUrl);
    } else {
        console.warn("iframe with id iframe_id not found");
    }

0

Alguna información adicional para cualquier persona que pueda tener problemas con esto:

Obtendrá valores nulos si intenta obtener la URL del iframe antes de que se cargue. Resolví este problema creando todo el iframe en javascript y obteniendo los valores que necesitaba con la función onLoad:

var iframe = document.createElement('iframe');
iframe.onload = function() {

    //some custom settings
    this.width=screen.width;this.height=screen.height; this.passing=0; this.frameBorder="0";

    var href = iframe.contentWindow.location.href;
    var origin = iframe.contentWindow.location.origin;
    var url = iframe.contentWindow.location.url;
    var path = iframe.contentWindow.location.pathname;

    console.log("href: ", href)
    console.log("origin: ", origin)
    console.log("path: ", path)
    console.log("url: ", url)
};

iframe.src = 'http://localhost/folder/index.html';

document.body.appendChild(iframe);

Debido a la política del mismo origen, tuve problemas al acceder a marcos de "origen cruzado"; lo resolví ejecutando un servidor web localmente en lugar de ejecutar todos los archivos directamente desde mi disco. Para que todo esto funcione, debe acceder al iframe con el mismo protocolo, nombre de host y puerto que el origen. No estoy seguro de cuál de estos faltaba al ejecutar todos los archivos de mi disco.

Además, más sobre objetos de ubicación: https://www.w3schools.com/JSREF/obj_location.asp


0

Si está dentro de un iframe que no tiene src de dominio cruzado, o src está vacío:

Entonces:

function getOriginUrl() {
    var href = document.location.href;
    var referrer = document.referrer;
    // Check if window.frameElement not null
    if(window.frameElement) {
        href = window.frameElement.ownerDocument.location.href;
        // This one will be origin
        if(window.frameElement.ownerDocument.referrer != "") {
            referrer = window.frameElement.ownerDocument.referrer;
        }
    }
    // Compare if href not equal to referrer
    if(href != referrer) {
        // Take referrer as origin
        return referrer;
    } else {
        // Take href
        return href
    }
}

Si está dentro de un iframe con src de dominio cruzado:

Entonces:

function getOriginUrl() {
    var href = document.location.href;
    var referrer = document.referrer;
    // Detect if you're inside an iframe
    if(window.parent != window) {
        // Take referrer as origin
        return referrer;
    } else {
        // Take href
        return href;
    }
}
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.