Javascript 从 iframe 访问父 URL

Access parent URL from iframe

提问by chronofwar

Okay, I have a page on and on this page I have an iframe. What I need to do is on the iframe page, find out what the URL of the main page is.

好的，我有一个页面，在这个页面上我有一个 iframe。我需要做的是在iframe页面上，找出主页的URL是什么。

I have searched around and I know that this is not possible if my iframe page is on a different domain, as that is cross-site scripting. But everywhere I've read says that if the iframe page is on the same domain as the parent page, it should work if I do for instance:

我四处搜索，我知道如果我的 iframe 页面位于不同的域中，这是不可能的，因为这是跨站点脚本。但是我读过的所有地方都说，如果 iframe 页面与父页面在同一个域中，如果我这样做，它应该可以工作：

parent.document.location

parent.window.document.location

parent.window.location

parent.document.location.href

... or other similar combos, as there seems to be multiple ways to get the same info.

...或其他类似的组合，因为似乎有多种方法可以获得相同的信息。

Anyways, so here's the problem. My iframe is on the same domain as the main page, but it is not on the same SUB domain. So for instance I have

无论如何，问题来了。我的 iframe 与主页在同一个域中，但不在同一个 SUB 域中。所以例如我有

http:// www.mysite.com/pageA.html

http://www.mysite.com/pageA.html

and then my iframe URL is

然后我的 iframe URL 是

http:// qa-www.mysite.com/pageB.html

http://qa-www.mysite.com/pageB.html

When I try to grab the URL from pageB.html(the iframe page), I keep getting the same access denied error. So it appears that even sub-domains count as cross-site scripting, is that correct, or am I doing something wrong?

当我尝试从pageB.html（iframe 页面）获取 URL 时，我不断收到相同的访问被拒绝错误。所以似乎子域也算作跨站点脚本，这是正确的，还是我做错了什么？

采纳答案by Dan Herbert

You're correct. Subdomains are still considered separate domains when using iframes. It's possible to pass messages using postMessage(...), but other JS APIs are intentionally made inaccessible.

你是对的。使用 iframe 时，子域仍被视为单独的域。可以使用 传递消息postMessage(...)，但有意使其他 JS API 无法访问。

It's also still possible to get the URL depending on the context. See other answers for more details.

仍然可以根据上下文获取 URL。有关更多详细信息，请参阅其他答案。

回答by Vaibhav

Yes, accessing parent page's URL is not allowed if the iframe and the main page are not in the same (sub)domain. However, if you just need the URL of the main page (i.e. the browser URL), you can try this:

是的，如果 iframe 和主页不在同一个（子）域中，则不允许访问父页面的 URL。但是，如果您只需要主页的 URL（即浏览器 URL），则可以尝试以下操作：

var url = (window.location != window.parent.location)
            ? document.referrer
            : document.location.href;

Note:

笔记：

window.parent.locationis allowed; it avoids the security error in the OP, which is caused by accessing the hrefproperty: window.parent.location.hrefcauses "Blocked a frame with origin..."

window.parent.location被允许; 它避免了 OP 中由访问href属性引起的安全错误：window.parent.location.href导致“Blocked a frame with origin...”

document.referrerrefers to "the URI of the page that linked to this page." This may notreturn the containingdocument if some other source is what determined the iframelocation, for example:

document.referrer指的是“链接到此页面的页面的 URI”。如果某些其他来源决定了位置，则这可能不会返回包含文档iframe，例如：

• Container iframe @ Domain 1
• Sends child iframe to Domain 2
• But in the child iframe... Domain 2 redirects to Domain 3 (i.e. for authentication, maybe SAML), and then Domain 3 directs backto Domain 2 (i.e. via form submission(), a standard SAML technique)
• For the child iframe the document.referrerwill be Domain 3, not the containing Domain 1

• 容器 iframe @ 域 1
• 将子 iframe 发送到域 2
• 但是在子 iframe 中...域 2 重定向到域 3（即用于身份验证，可能是 SAML），然后域 3 重定向回域 2（即通过表单提交（），一种标准的 SAML 技术）
• 对于子 iframedocument.referrer将是域3，而不是包含域1

document.locationrefers to "a Location object, which contains information about the URL of the document"; presumably the currentdocument, that is, the iframe currently open. When window.location === window.parent.location, then the iframe's hrefis the sameas the containing parent's href.

document.location指的是“一个 Location 对象，其中包含有关文档 URL 的信息”；大概是当前文档，即当前打开的 iframe。当window.location === window.parent.location，那么iframe的href是同为含母公司href。

回答by Gregory Lewis

I just discovered a workaround for this problem that is so simple, and yet I haven't found any discussions anywhere that mention it. It does require control of the parent frame.

我刚刚发现了一个解决这个问题的方法，它非常简单，但我还没有在任何地方找到任何提到它的讨论。它确实需要控制父框架。

In your iFrame, say you want this iframe: src="http://www.example.com/mypage.php"

在你的 iFrame 中，假设你想要这个 iframe： src="http://www.example.com/mypage.php"

Well, instead of HTML to specify the iframe, use a javascript to build the HTML for your iframe, get the parent url through javascript "at build time", and send it as a url GET parameter in the querystring of your src target, like so:

好吧，不是使用 HTML 来指定 iframe，而是使用 javascript 为您的 iframe 构建 HTML，在“构建时”通过 javascript 获取父 url，并将其作为 src 目标的查询字符串中的 url GET 参数发送，例如所以：

<script type="text/javascript">
  url = parent.document.URL;
  document.write('<iframe src="http://example.com/mydata/page.php?url=' + url + '"></iframe>');
</script>

Then, find yourself a javascript url parsing function that parses the url string to get the url variable you are after, in this case it's "url".

然后，为自己找到一个 javascript url 解析函数，该函数解析 url 字符串以获取您所追求的 url 变量，在本例中它是“url”。

I found a great url string parser here: http://www.netlobo.com/url_query_string_javascript.html

我在这里找到了一个很棒的 url 字符串解析器：http: //www.netlobo.com/url_query_string_javascript.html

回答by ParPar

If your iframe is from another domain, (cross domain), you will simply need to use this:

如果您的 iframe 来自另一个域（跨域），您只需使用以下命令：

var currentUrl = document.referrer;

and - here you've got the main url!

和 - 在这里你有主网址！

回答by user409021

For pages on the same domain and different subdomain, you can set the document.domainproperty via javascript.

对于同一域和不同子域的页面，您可以document.domain通过 javascript设置属性。

Both the parent frame and the iframe need to set their document.domain to something that is common betweeen them.

父框架和 iframe 都需要将它们的 document.domain 设置为它们之间通用的东西。

i.e. www.foo.mydomain.comand api.foo.mydomain.comcould each use either foo.mydomain.comor just mydomain.comand be compatible (no, you can't set them both to com, for security reasons...)

即 www.foo.mydomain.com并且api.foo.mydomain.com每个都可以使用foo.mydomain.com或只使用mydomain.com并且兼容（不com，出于安全原因，您不能将它们都设置为 ......）

also, note that document.domain is a one way street. Consider running the following three statements in order:

另外，请注意 document.domain 是单向街。考虑按顺序运行以下三个语句：

// assume we're starting at www.foo.mydomain.com
document.domain = "foo.mydomain.com" // works
document.domain = "mydomain.com" // works
document.domain = "foo.mydomain.com" // throws a security exception

Modern browsers can also use window.postMessage to talk across origins, but it won't work in IE6. https://developer.mozilla.org/en/DOM/window.postMessage

现代浏览器也可以使用 window.postMessage 进行跨源对话，但它在 IE6 中不起作用。 https://developer.mozilla.org/en/DOM/window.postMessage

回答by Robert-Jan Kuyper

The following line will work: document.location.ancestorOrigins[0]this one returns the ancestor domain name.

以下行将起作用：document.location.ancestorOrigins[0]这一行返回祖先域名。

回答by Benjamim William L. Nunes

Try it:

尝试一下：

document.referrer

When you change you are in a iframe your host is "referrer".

当您更改您在 iframe 中时，您的主机是“引用者”。

回答by user3523340

var url = (window.location != window.parent.location) ? document.referrer: document.location;

I found that the above example suggested previously worked when the script was being executed in an iframe however it did not retrieve the url when the script was executed outside of an iframe, a slight adjustment was required:

我发现上面的示例在 iframe 中执行脚本时之前建议的工作但是当脚本在 iframe 之外执行时它没有检索 url，需要稍微调整：

var url = (window.location != window.parent.location) ? document.referrer: document.location.href;

回答by Hyzer Deeds

I've had issues with this. If using a language like php when your page first loads in the iframe grab $_SERVER['HTTP_REFFERER']and set it to a session variable.

我遇到了这个问题。如果在您的页面首次加载到 iframe 中时使用像 php 这样的语言，则抓取$_SERVER['HTTP_REFFERER']并将其设置为会话变量。

This way when the page loads in the iframe you know the full parent url and query string of the page that loaded it. With cross browser security it's a bit of a headache counting on window.parent anything if you you different domains.

这样，当页面在 iframe 中加载时，您就知道加载它的页面的完整父 URL 和查询字符串。使用跨浏览器安全性，如果您使用不同的域，那么在 window.parent 上计算任何东西都会让人头疼。

回答by TARKUS

The problem with the PHP $_SERVER['HTTP_REFFERER'] is that it gives the fully qualified page url of the page that brought you to the parent page. That's not the same as the parent page, itself. Worse, sometimes there is no http_referer, because the person typed in the url of the parent page. So, if I get to your parent page from yahoo.com, then yahoo.com becomes the http_referer, not your page.

PHP $_SERVER['HTTP_REFFERER'] 的问题在于它提供了将您带到父页面的页面的完全限定页面 url。这与父页面本身不同。更糟糕的是，有时没有http_referer，因为人输入了父页面的url。因此，如果我从 yahoo.com 访问您的父页面，那么 yahoo.com 将成为 http_referer，而不是您的页面。