从 IFRAME 获取当前 URL

Question

有没有从 iframe 获取当前 URL 的简单方法？

观看者会浏览多个网站。 我猜我会在 javascript 中使用一些东西。

Answer 1

出于安全原因，您只能在 iframe 的内容和引用的 javascript 来自同一域的情况下获取 url。只要这是真的，这样的事情就会起作用：

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

如果两个域不匹配，您将遇到跨站点引用脚本安全限制。

另见answers to a similar question。

Answer 2

如果您的 iframe 来自另一个域（跨域），那么其他答案对您没有帮助...您只需要使用这个：

var currentUrl = document.referrer;

而且 - 这里有主网址！

Answer 3

希望这对您的情况有所帮助， 我遇到了完全相同的问题，只是使用 localstorage 在父窗口和 iframe 之间共享数据。 所以在父窗口中你可以：

localStorage.setItem("url", myUrl);

而在 iframe 源代码中只是从本地存储中获取这些数据：

localStorage.getItem('url');

为我节省了很多时间。 据我所知，唯一的条件是访问父页面代码。 希望这会对某人有所帮助。

Answer 4

如果你在 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

Answer 5

我遇到了 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");
    }

Answer 6

为可能遇到此问题的任何人提供一些额外信息：

如果您在加载之前尝试从 iframe 获取 URL，您将获得空值。 我通过在 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);

由于同源策略，我在访问“跨源”帧时遇到了问题 - 我通过在本地运行网络服务器而不是直接从我的磁盘运行所有文件来解决这个问题。为了使所有这些工作，您需要使用与源相同的协议、主机名和端口来访问 iframe。从我的磁盘运行所有文件时，不确定其中哪些丢失/丢失了。

另外，关于位置对象的更多信息：https://www.w3schools.com/JSREF/obj_location.asp

Answer 7

如果您在没有跨域 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;
    }
}

Answer 8

我一直在尝试从 shopify 谷歌分析附加脚本 iframe 内部检索完整的 URL。 document.refferer 仅显示没有搜索参数的主机名。但我找到了另一个适合我的属性document.baseURI