Pobierz aktualny adres URL z IFRAME

Czy istnieje prosty sposób uzyskania bieżącego adresu URL z elementu iframe?

Widz przechodziłby przez wiele witryn. Zgaduję, że użyłbym czegoś w javascript.

Ze względów bezpieczeństwa adres URL można pobrać tylko wtedy, gdy zawartość elementu iframe i odwołujący się kod javascript są obsługiwane z tej samej domeny. O ile to prawda, coś takiego zadziała:

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

Jeśli te dwie domeny są niezgodne, napotkasz ograniczenia bezpieczeństwa dotyczące skryptów odwołań między witrynami.

Zobacz także odpowiedzi na podobne pytanie .

Jeśli element iframe pochodzi z innej domeny (międzydomenowej), inne odpowiedzi ci nie pomogą ... będziesz musiał po prostu użyć tego:

var currentUrl = document.referrer;

i - tutaj masz główny adres URL!

Mam nadzieję, że to trochę pomoże, jak w twoim przypadku cierpiałem z dokładnie tym samym problemem i właśnie użyłem localstorage do udostępniania danych między oknem nadrzędnym a ramką iframe. Więc w oknie nadrzędnym możesz:

localStorage.setItem("url", myUrl);

A w kodzie, w którym źródło iframe po prostu pobiera te dane z localstorage:

localStorage.getItem('url');

Zaoszczędził mi dużo czasu. O ile wiem, jedynym warunkiem jest dostęp do kodu strony nadrzędnej. Mam nadzieję, że to komuś pomoże.

Jeśli jesteś w kontekście iframe,

mógłbyś

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

Jeśli jesteś w nadrzędnym oknie / ramce, możesz użyć odpowiedzi https://stackoverflow.com/a/938195/2305243 , która brzmi

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

Wystąpił problem z atrybutami href url obiektu BLOB. Tak więc, nawiązując do elementu iframe, właśnie utworzyłem adres URL z atrybutu src elementu 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");
    }

Dodatkowe informacje dla każdego, kto może mieć z tym problem:

Otrzymasz wartości null, jeśli próbujesz pobrać adres URL z elementu iframe przed załadowaniem. Rozwiązałem ten problem, tworząc całą ramkę iframe w javascript i uzyskując potrzebne wartości za pomocą funkcji 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);

Ze względu na zasady tego samego pochodzenia miałem problemy z dostępem do ramek „cross origin” - rozwiązałem to, uruchamiając lokalnie serwer sieciowy zamiast uruchamiać wszystkie pliki bezpośrednio z mojego dysku. Aby to wszystko działało, musisz uzyskiwać dostęp do elementu iframe za pomocą tego samego protokołu, nazwy hosta i portu co źródło. Nie jestem pewien, którego z nich brakowało / brakowało podczas uruchamiania wszystkich plików z mojego dysku.

Więcej informacji o obiektach lokalizacyjnych: https://www.w3schools.com/JSREF/obj_location.asp

Jeśli znajdujesz się w elemencie iframe, który nie ma międzydomenowego źródła src lub src jest puste:

Następnie:

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

Jeśli jesteś w elemencie iframe z cross domain src:

Następnie:

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