Question

是否有一种从iframe获取当前网址的简单方法？

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

Answer 1

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

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获取此数据：

localStorage.getItem('url');

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

Answer 4

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

Answer 5

我对Blob url hrefs有问题。因此，参考iframe，我只是从iframe的src属性生成了一个网址：

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

由于同源策略，在访问“跨原点”帧时遇到了问题-我通过在本地运行Web服务器而不是直接从磁盘运行所有文件来解决了这一问题。为了使所有这些正常工作，您需要使用与源相同的协议，主机名和端口来访问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

如果您位于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

从IFRAME获取当前URL

8 个答案: