IFRAMEから現在のURLを取得する

iframeから現在のURLを取得する簡単な方法はありますか？

視聴者は複数のサイトを通過します。私はjavascriptで何かを使用していると思います。

セキュリティ上の理由から、iframeのコンテンツと参照するJavaScriptが同じドメインから提供されている場合にのみ、URLを取得できます。それが真実である限り、次のようなものが機能します。

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

2つのドメインが一致しない場合、クロスサイト参照スクリプトのセキュリティ制限が発生します。

同様の質問への回答も参照してください。

iframeが別のドメイン（クロスドメイン）からのものである場合、他の回答は役に立ちません...単にこれを使用する必要があります：

var currentUrl = document.referrer;

そして-ここにメインのURLがあります！

これがあなたのケースでどのように役立つかを願っています、私はまったく同じ問題に苦しみ、親ウィンドウとiframeの間でデータを共有するためにlocalstorageを使用しました。したがって、親ウィンドウでは次のことができます。

localStorage.setItem("url", myUrl);

そして、iframeソースがローカルストレージからこのデータを取得するだけのコードでは：

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 URLhrefsに問題がありました。したがって、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値が取得されます。javascriptで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);

同一生成元ポリシーのため、「クロスオリジン」フレームにアクセスするときに問題が発生しました。ディスクからすべてのファイルを直接実行するのではなく、ローカルでWebサーバーを実行することで問題を解決しました。これらすべてが機能するためには、オリジンと同じプロトコル、ホスト名、およびポートを使用して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;
    }
}