Obtener la URL actual de IFRAME

91

¿Existe una forma sencilla de obtener la URL actual de un iframe?

El espectador pasaría por varios sitios. Supongo que estaría usando algo en javascript.

chris
fuente
2
Si vino aquí buscando la URL de la página "principal" del iframe, consulte stackoverflow.com/q/3420004/32453
rogerdpack

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 .

kkyy
fuente
¿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.

ParPar
fuente
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.

Beny
fuente
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
Alan Dong
fuente
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");
    }
Robar
fuente
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

GChuf
fuente
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;
    }
}
Basil Goldman
fuente