¿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.
Respuestas:
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 .
sandbox="allow-same-origin"
al iFrame?
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.
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.
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
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");
}
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
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;
}
}