IFRAME에서 현재 URL 가져 오기

iframe에서 현재 URL을 가져 오는 간단한 방법이 있습니까?

시청자는 여러 사이트를 통과합니다. 나는 자바 스크립트에서 무언가를 사용할 것이라고 생각합니다.

보안상의 이유로 iframe의 콘텐츠와 참조하는 자바 스크립트가 동일한 도메인에서 제공되는 동안에 만 URL을 가져올 수 있습니다. 그것이 사실이면 다음과 같은 것이 작동합니다.

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

두 도메인이 일치하지 않으면 교차 사이트 참조 스크립팅 보안 제한이 발생합니다.

유사한 질문에 대한 답변 도 참조하십시오 .

iframe이 다른 도메인 (교차 도메인)에서 가져온 경우 다른 답변이 도움이되지 않습니다. 다음을 사용하면됩니다.

var currentUrl = document.referrer;

그리고-여기에 기본 URL이 있습니다!

이것이 귀하의 경우에 똑같은 문제로 고통 받고 부모 창과 iframe간에 데이터를 공유하기 위해 localstorage를 사용하는 방법에 도움이되기를 바랍니다. 따라서 부모 창에서 다음을 수행 할 수 있습니다.

localStorage.setItem("url", myUrl);

그리고 iframe 소스가 localstorage에서이 데이터를 가져 오는 코드에서 :

localStorage.getItem('url');

많은 시간을 절약했습니다. 내가 볼 수있는 한 유일한 조건은 상위 페이지 코드에 대한 액세스입니다. 이것이 누군가를 도울 수 있기를 바랍니다.

iframe 컨텍스트에있는 경우

당신은 할 수 있습니다

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

부모 창 / 프레임에있는 경우 https://stackoverflow.com/a/938195/2305243 의 답변을 사용할 수 있습니다.

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

blob url href에 문제가 있습니다. 따라서 iframe에 대한 참조를 사용하여 iframe의 src 속성에서 URL을 생성했습니다.

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

이 문제로 어려움을 겪고있는 사람을위한 추가 정보 :

로드되기 전에 iframe에서 URL을 가져 오려고하면 null 값이 표시됩니다. 자바 스크립트에서 전체 iframe을 만들고 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);

동일 출처 정책으로 인해 "교차 출처"프레임에 액세스 할 때 문제가 발생했습니다. 디스크에서 직접 모든 파일을 실행하는 대신 웹 서버를 로컬로 실행하여 문제를 해결했습니다. 이 모든 것이 작동하려면 원본과 동일한 프로토콜, 호스트 이름 및 포트를 사용하여 iframe에 액세스해야합니다. 내 디스크에서 모든 파일을 실행할 때 이들 중 어떤 것이 누락되었는지 확실하지 않습니다.

또한 위치 개체에 대한 추가 정보 : https://www.w3schools.com/JSREF/obj_location.asp

교차 도메인 src가없는 iframe 내부에 있거나 src가 비어있는 경우 :

그때:

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

교차 도메인 src가있는 iframe 내부에있는 경우 :

그때:

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