[javascript] IFRAME에서 현재 URL 가져 오기

Question 1

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

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

Question 2

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

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

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

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

Question 3

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

var currentUrl = document.referrer;

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

Question 4

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

localStorage.setItem("url", myUrl);

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

localStorage.getItem('url');

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

Question 5

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

Question 6

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

Question 7

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

로드되기 전에 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

Question 8

교차 도메인 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;
    }
}