Obtenha o URL atual do IFRAME

89

Existe uma maneira simples de obter o URL atual de um iframe?

O visualizador passaria por vários sites. Estou supondo que usaria algo em javascript.

javascript url iframe Chris
fonte
2
Se você veio aqui procurando o URL da página "pai" do iframe, consulte stackoverflow.com/q/3420004/32453
rogerdpack

Respostas:

162

Por motivos de segurança, você só pode obter o url enquanto o conteúdo do iframe e o javascript de referência forem veiculados no mesmo domínio. Enquanto isso for verdade, algo assim funcionará:

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

Se os dois domínios forem incompatíveis, você encontrará restrições de segurança de script de referência entre sites.

Veja também as respostas a uma pergunta semelhante .

kkyy
fonte
você sabe se a solução fornecida pela resposta vencedora funciona? Não consegui fazer funcionar no meu computador (IE, windows)
chris
Eu estava falando sobre o link que você listou para a pergunta semelhante.
chris
Não há resposta vencedora na pergunta que vinculei ... se você quer dizer a resposta mais importante, não é realmente uma solução de trabalho. Com o IE, você pode tentar a abordagem HTA fornecida também nas respostas à pergunta acima.
kkyy
17
Isso não funciona se o iframe src for de um domínio diferente.
confile
E se adicionarmos o atributo sandbox="allow-same-origin"ao iframe?
Roel de
26

Se o seu iframe for de outro domínio (vários domínios), as outras respostas não irão ajudá-lo ... você simplesmente precisará usar isto:

var currentUrl = document.referrer;

e - aqui você tem o url principal!

ParPar
fonte
28
-1 o OP está procurando o url atual do iframe, não o referenciador da página pai.
Christophe de
15
@Christophe - Eu sei, mas pode ajudar as pessoas que procuram obter o url principal e chegaram a esta questão!
ParPar
6
gr8 .. Isso me ajuda
Vikky
1
Isso é exatamente o que eu estava procurando e resolve meu problema sem me dar o erro de X-Script. +1 para isso
Ulysses Alves
1
Excelente, preciso do url do iframe, não do pai :)
speti43
4

Espero que isso ajude de alguma forma, no seu caso, sofri exatamente com o mesmo problema e acabei de usar o localstorage para compartilhar os dados entre a janela pai e o iframe. Portanto, na janela principal, você pode:

localStorage.setItem("url", myUrl);

E no código em que a origem do iframe é apenas obter esses dados do armazenamento local:

localStorage.getItem('url');

Me economizou muito tempo. Pelo que posso ver, a única condição é o acesso ao código da página pai. Espero que isso ajude alguém.

Beny
fonte
4
o armazenamento local funciona apenas no mesmo domínio ... então por que ter todo esse problema? simplesmente consulte o
local.href
3

Se você estiver no contexto iframe,

você poderia fazer

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

Se você estiver na janela / frame pai, poderá usar a resposta de https://stackoverflow.com/a/938195/2305243 , que é

document.getElementById("iframe_id").contentWindow.location.href
Alan dong
fonte
1

Tive um problema com hrefs de url de blob. Portanto, com uma referência ao iframe, acabei de produzir um url do atributo src do 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");
    }
Roubar
fonte
0

Algumas informações adicionais para qualquer pessoa que possa estar tendo problemas com isso:

Você receberá valores nulos se tentar obter o URL do iframe antes de carregá-lo. Resolvi esse problema criando todo o iframe em javascript e obtendo os valores de que precisava com a função 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);

Por causa da política de mesma origem, tive problemas ao acessar frames de "origem cruzada" - resolvi isso executando um servidor da Web localmente em vez de executar todos os arquivos diretamente do meu disco. Para que tudo isso funcione, você precisa acessar o iframe com o mesmo protocolo, nome de host e porta da origem. Não tenho certeza de qual desses estava / estava faltando ao executar todos os arquivos do meu disco.

Além disso, mais sobre objetos de localização: https://www.w3schools.com/JSREF/obj_location.asp

GChuf
fonte