Get current URL from IFRAME

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

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

253233 次浏览
小开
最佳答案

出于安全原因，只有 iframe 的内容和引用的 javascript 来自同一个域，才能获得 URL。只要这是真的，这种方法就会奏效:

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

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

参见 类似问题的答案。

小开

如果你的 iframe 来自另一个域，(跨域) ，其他的答案不会帮助你... 你只需要使用这个:

var currentUrl = document.referrer;

这里是主网址！

小开

希望这对你有所帮助, 我遇到了完全相同的问题，只是使用本地存储在父窗口和 iframe 之间共享数据。 所以在父窗口中你可以:

localStorage.setItem("url", myUrl);

And in code where iframe source is just get this data from 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 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");
}
小开

对于那些可能在这方面有困难的人，还有一些额外的信息:

You'll be getting null values if you're trying to get URL from iframe before it's loaded. 我通过在 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);

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

如果你在一个跨域 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;
}
}
小开

我一直试图检索完整的网址从内部的购物谷歌分析额外的脚本 iframe。document.refferer只显示主机名，没有搜索参数。但是我找到了另一个适合我的属性 document.baseURI


提交答案