รับ URL ปัจจุบันจาก IFRAME

มีวิธีง่ายๆในการรับ URL ปัจจุบันจาก iframe หรือไม่?

ผู้ชมจะผ่านหลายไซต์ ฉันเดาว่าฉันจะใช้บางอย่างในจาวาสคริปต์

ด้วยเหตุผลด้านความปลอดภัยคุณสามารถรับ URL ได้ตราบเท่าที่เนื้อหาของ iframe และจาวาสคริปต์ที่อ้างอิงนั้นให้บริการจากโดเมนเดียวกัน ตราบเท่าที่เป็นจริงสิ่งนี้จะได้ผล:

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

หากโดเมนทั้งสองไม่ตรงกันคุณจะพบข้อ จำกัด ด้านความปลอดภัยของสคริปต์อ้างอิงข้ามไซต์

ดูเพิ่มเติมคำตอบสำหรับคำถามที่คล้ายกัน

หาก iframe ของคุณมาจากโดเมนอื่น (ข้ามโดเมน) คำตอบอื่น ๆ จะไม่ช่วยคุณ ... คุณจะต้องใช้สิ่งนี้:

var currentUrl = document.referrer;

และ - ที่นี่คุณมี url หลัก!

หวังว่านี่จะช่วยได้บ้างในกรณีของคุณฉันประสบปัญหาเดียวกันและเพิ่งใช้ localstorage เพื่อแชร์ข้อมูลระหว่างหน้าต่างหลักและ iframe ดังนั้นในหน้าต่างหลักคุณสามารถ:

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 hrefs ดังนั้นด้วยการอ้างอิงถึง iframe ฉันเพิ่งสร้าง url จากแอตทริบิวต์ src ของ 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");
    }

ข้อมูลเพิ่มเติมสำหรับทุกคนที่อาจกำลังดิ้นรนกับสิ่งนี้:

คุณจะได้รับค่า null หากคุณพยายามรับ URL จาก iframe ก่อนที่จะโหลด ฉันแก้ไขปัญหานี้ด้วยการสร้าง iframe ทั้งหมดใน javascript และรับค่าที่ฉันต้องการด้วยฟังก์ชัน 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);

เนื่องจากนโยบายต้นกำเนิดเดียวกันฉันจึงมีปัญหาเมื่อเข้าถึงเฟรม "cross origin" ฉันแก้ปัญหานั้นด้วยการเรียกใช้เว็บเซิร์ฟเวอร์ในเครื่องแทนที่จะเรียกใช้ไฟล์ทั้งหมดโดยตรงจากดิสก์ของฉัน เพื่อให้ทั้งหมดนี้ใช้งานได้คุณต้องเข้าถึง iframe ด้วยโปรโตคอลชื่อโฮสต์และพอร์ตเดียวกันกับต้นทาง ไม่แน่ใจว่าสิ่งใดที่หายไปเมื่อเรียกใช้ไฟล์ทั้งหมดจากดิสก์ของฉัน

นอกจากนี้ข้อมูลเพิ่มเติมเกี่ยวกับวัตถุตำแหน่ง: https://www.w3schools.com/JSREF/obj_location.asp

หากคุณอยู่ใน iframe ที่ไม่มีข้ามโดเมน src หรือ 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
    }
}

หากคุณอยู่ใน iframe ที่มีข้ามโดเมน src:

จากนั้น:

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