如何获得iframe的当前位置?

I have built a basic data entry application allowing users to browse external content in iframe and enter data quickly from the same page. One of the data variables is the URL. Ideally I would like to be able to load the iframes current url into a textbox with javascript. I realize now that this is not going to happen due to security issues.

我构建了一个基本的数据输入应用程序，允许用户在iframe中浏览外部内容，并从同一个页面快速输入数据。其中一个数据变量是URL。理想情况下，我希望能够使用javascript将iframe当前url加载到一个文本框中。我现在意识到这不会因为安全问题发生。

Has anyone done anything on the server side? or know of any .Net browser in browser controls. The ultimate goal is to just give the user an easy method of extracting the url of the page they are viewing in the iframe It doesn't necessarily HAVE to be an iframe, a browser in the browser would be ideal.

有人在服务器端做过什么吗?或者在浏览器控件中知道任何。net浏览器。最终的目标是给用户一个简单的方法来提取他们在iframe中正在查看的页面的url它不一定非得是iframe，浏览器中的浏览器才是理想的。

Thanks, Adam

谢谢,亚当

9 个解决方案

#1

I did some tests in Firefox 3 comparing the value of .src and .documentWindow.location.href in an iframe. (Note: The documentWindow is called contentDocument in Chrome, so instead of .documentWindow.location.href in Chrome it will be .contentDocument.location.href.)

我在Firefox 3中做了一些测试，比较.src和. documentwindow .location的值。href iframe。(注意:在Chrome中，documentWindow被称为contentDocument，所以不是.documentWindow.location。在Chrome中的href是。contentdocument。location。href)

src is always the last URL that was loaded in the iframe without user interaction. I.e., it contains the first value for the URL, or the last value you set up with Javascript from the containing window doing:

src始终是iframe中最后一个没有用户交互的URL。即。，它包含URL的第一个值，或您从包含窗口中使用Javascript设置的最后一个值:

document.getElementById("myiframe").src = 'http://www.google.com/';

If the user navigates inside the iframe, you can't anymore access the value of the URL using src. In the previous example, if the user goes away from www.google.com and you do:

如果用户在iframe中导航，您将无法使用src访问URL的值。在前面的例子中，如果用户离开www.google.com你会:

alert(document.getElementById("myiframe").src);

You will still get "http://www.google.com".

你仍然会得到“http://www.google.com”。

documentWindow.location.href is only available if the iframe contains a page in the same domain as the containing window, but if it's available it always contains the right value for the URL, even if the user navigates in the iframe.

documentWindow.location。href只有在iframe包含与包含窗口相同域的页面时才可用，但是如果href可用，它总是包含URL的正确值，即使用户在iframe中导航。

If you try to access documentWindow.location.href (or anything under documentWindow) and the iframe is in a page that doesn't belong to the domain of the containing window, it will raise an exception:

如果您试图访问documentWindow.location。href(或documentWindow下的任何内容)，iframe位于不属于包含窗口域的页面中，会引发异常:

document.getElementById("myiframe").src = 'http://www.google.com/';
alert(document.getElementById("myiframe").documentWindow.location.href);
Error: Permission denied to get property Location.href

I have not tested any other browser.

我还没有测试其他浏览器。

Hope it helps!

希望它可以帮助!

#2

document.getElementById('iframeID').contentWindow.location.href

You can't access cross-domain iframe location at all.

你根本不能访问跨域的iframe位置。

#3

HTA works like a normal windows application.
You write HTML code, and save it as an .hta file.

However, there are, at least, one drawback: The browser can't open an .hta file; it's handled as a normal .exe program. So, if you place a link to an .hta onto your web page, it will open a download dialog, asking of you want to open or save the HTA file. If its not a problem for you, you can click "Open" and it will open a new window (that have no toolbars, so no Back button, neither address bar, neither menubar).

I needed to do something very similar to what you want, but instead of iframes, I used a real frameset.
The main page need to be a .hta file; the other should be a normal .htm page (or .php or whatever).

Here's an example of a HTA page with 2 frames, where the top one have a button and a text field, that contains the second frame URL; the button updates the field:

HTA工作起来像一个普通的windows应用程序。编写HTML代码，并将其保存为.hta文件。但是，至少有一个缺点:浏览器不能打开.hta文件;这是一个普通的。exe程序。因此，如果您将一个指向. HTA的链接放在您的web页面上，它将打开一个下载对话框，请求您打开或保存HTA文件。如果这对你来说不是问题，你可以点击“打开”，它会打开一个新的窗口(没有工具栏，没有后退按钮，没有地址栏，也没有菜单栏)。我需要做一些与您想要的非常相似的事情，但是我使用的不是iframe，而是真正的frameset。主页需要是.hta文件;另一个应该是普通的.htm页面(或.php或其他)。这里有一个HTA页面的例子，它有两个帧，上面有一个按钮和一个文本字段，其中包含第二个帧URL;按钮更新字段:

frameset.hta

<html>
    <head>
        <title>HTA Example</title>
        <HTA:APPLICATION id="frames" border="thin" caption="yes" icon="http://www.google.com/favicon.ico" showintaskbar="yes" singleinstance="no" sysmenu="yes" navigable="yes" contextmenu="no" innerborder="no" scroll="auto" scrollflat="yes" selection="yes" windowstate="normal"></HTA:APPLICATION>
    </head>
    <frameset rows="60px, *">
        <frame src="topo.htm" name="topo" id="topo" application="yes" />
        <frame src="http://www.google.com" name="conteudo" id="conteudo" application="yes" />
    </frameset>
</html>

• There's an HTA:APPLICATION tag that sets some properties to the file; it's good to have, but it isn't a must.
• 有一个HTA:应用程序标记，它为文件设置一些属性;拥有是件好事，但这不是必须的。
• You NEED to place an application="yes" at the frames' tags. It says they belongs to the program too and should have access to all data (if you don't, the frames will still show the error you had before).
• 您需要在框架的标记处放置一个应用程序="yes"。它说，它们也属于程序，应该可以访问所有数据(如果没有，框架仍然会显示以前的错误)。

topo.htm

<html>
    <head>
        <title>Topo</title>
        <script type="text/javascript">
            function copia_url() {
                campo.value = parent.conteudo.location;
            }
        </script>
    </head>
    <body style="background: lightBlue;" onload="copia_url()">
        <input type="button" value="Copiar URL" onclick="copia_url()" />
        <input type="text" size="120" id="campo" />
    </body>
</html>

• You should notice that I didn't used any getElement function to fetch the field; on HTA file, all elements that have an ID becomes instantly an object
• 您应该注意到我没有使用任何getElement函数来获取字段;在HTA文件中，所有具有ID的元素都立即成为对象

I hope this help you, and others that get to this question. It solved my problem, that looks like to be the same as you have.

You can found more information here: http://www.irt.org/articles/js191/index.htm

Enjoy =]

我希望这能帮助你，以及其他了解这个问题的人。它解决了我的问题，看起来和你的一样。您可以在这里找到更多信息:http://www.irt.org/articles/js191/index.htm Enjoy =

#4

I like your server side idea, even if my proposed implementation of it sounds a little bit ghetto.

我喜欢你的服务器端想法，即使我的提议的实现听起来有点小。

You could set the .innerHTML of the iframe to the HTML contents you grab server side. Depending on how you grab this, you will have to pay attention to relative versus absolute paths.

可以将iframe的. innerhtml设置为获取服务器端的HTML内容。取决于你如何获取它，你必须注意相对路径和绝对路径。

Plus, depending on how the page you are grabbing interacts with other pages, this could totally not work (cookies being set for the page you are grabbing won't work across domains, maybe state is being tracked in Javascript... Lots of reasons this might not work.)

另外，根据你抓取的页面与其他页面的交互方式，这完全不能工作(为你抓取的页面设置的cookie不能跨域工作，可能状态在Javascript中被跟踪……这可能有很多原因。

I don't believe that tracking the current state of the page you are trying to mirror is theoretically possible, but I'm not sure. The site could track all sorts of things server side, you won't have access to this state. Imagine the case where on a page load a variable is set to a random value server-side, how would you capture this state?

我不相信跟踪你试图镜像的页面的当前状态在理论上是可能的，但我不确定。站点可以跟踪服务器端所有的东西，您无法访问这个状态。想象一下，在页面加载中，一个变量被设置为一个随机值服务器端，你如何捕获这个状态?

Do these ideas help with anything?

这些想法有什么用吗?

-Brian J. Stinar-

布莱恩j . Stinar -

#5

I use this.

我用这个。

var iframe = parent.document.getElementById("theiframe");
var innerDoc = iframe.contentDocument || iframe.contentWindow.document;

var currentFrame = innerDoc.location.href;

#6

You can use Ra-Ajax and have an iframe wrapped inside e.g. a Window control. Though in general terms I don't encourage people to use iframes (for anything)

您可以使用rai - ajax并在其中封装一个iframe，例如窗口控件。一般来说，我不鼓励人们使用iframe

Another alternative is to load the HTML on the server and send it directly into the Window as the content of a Label or something. Check out how this Ajax RSS parser is loading the RSS items in the source which can be downloaded here (Open Source - LGPL)

另一种选择是在服务器上加载HTML并将其作为标签或其他内容直接发送到窗口。查看这个Ajax RSS解析器是如何在源代码中加载RSS条目的，可以在这里下载(开放源码- LGPL)

(Disclaimer; I work with Ra-Ajax...)

(免责声明;和我一起工作Ra-Ajax…)

#7

Does this help?

这有帮助吗?

http://www.quirksmode.org/js/iframe.html

http://www.quirksmode.org/js/iframe.html

I only tested this in firefox, but if you have something like this:

我只在firefox中测试过这个，但是如果你有这样的东西:

<iframe name='myframe' id='myframe' src='http://www.google.com'></iframe>

You can get its address by using:

你可透过以下途径取得其地址:

document.getElementById('myframe').src

Not sure if I understood your question correctly but anyways :)

不知道我是否正确地理解了你的问题，但不管怎样:)

#8

Ok, so in this application, there is an iframe in which the user is supplied with links or some capacity that allows that iframe to browse to some external site. You are then looking to capture the URL to which the user has browsed.

在这个应用程序中，有一个iframe，用户可以在其中提供链接或某种容量，允许iframe浏览某些外部站点。然后，您需要捕获用户浏览过的URL。

Something to keep in mind. Since the URL is to an external source, you will be limited in how much you can interact with this iframe via javascript (or an client side access for that matter), this is known as browser cross-domain security, as apparently you have discovered. There are clever work arounds, as presented here Cross-domain, cross-frame Javascript, although I do not think this work around applies in this case.

要记住的东西。由于URL是指向外部源的，您将受到限制，无法通过javascript(或客户端访问)与iframe进行多少交互，这就是所谓的浏览器跨域安全性，显然您已经发现了这一点。这里有一些巧妙的变通方法，比如跨域、跨框架的Javascript，尽管我不认为这种方法适用于这种情况。

About all you can access is the location, as you need.

您可以访问的所有内容都是所需的位置。

I would suggest making the code presented more resilitant and less error prone. Try browsing the web sometime with IE or FF configured to show javascript errors. You will be surprised just how many javascript errors are thrown, largely because there is a lot of error prone javascript out there, which just continues to proliferate.

我建议使代码具有更强的弹性和更少的错误倾向。试着用IE或FF来显示javascript错误。您会惊讶地发现抛出了这么多javascript错误，这主要是因为存在大量容易出错的javascript，而这些javascript会继续激增。

This solution assumes that the iframe in question is the same "window" context where you are running the javascript. (Meaning, it is not embedded within another frame or iframe, in which case, the javascript code gets more involved, and you likely need to recursively search through the window hierarchy.)

这个解决方案假设所涉及的iframe与您正在运行javascript的“窗口”上下文相同。(也就是说，它没有嵌入到另一个框架或iframe中，在这种情况下，javascript代码会变得更加复杂，您可能需要递归地搜索窗口层次结构。)

<iframe name='frmExternal' id='frmExternal' src='http://www.*.com'></frame>
<input type='text' id='txtUrl' />
<input type='button' id='btnGetUrl' value='Get URL' onclick='GetIFrameUrl();' />

<script language='javascript' type='text/javascript'>
function GetIFrameUrl()
{
    if (!document.getElementById)
    {
        return;
    }

    var frm = document.getElementById("frmExternal");
    var txt = document.getElementById("txtUrl");

    if (frm == null || txt == null)
    {
        // not great user feedback but slightly better than obnoxious script errors
       alert("There was a problem with this page, please refresh.");
       return;
    }

    txt.value = frm.src;
}
</script>

Hope this helps.

希望这个有帮助。

#9

You can access the src property of the iframe but that will only give you the initially loaded URL. If the user is navigating around in the iframe via you'll need to use an HTA to solve the security problem.

您可以访问iframe的src属性，但这只会给您最初加载的URL。如果用户通过iframe进行导航，则需要使用HTA来解决安全性问题。

http://msdn.microsoft.com/en-us/library/ms536474(VS.85).aspx

http://msdn.microsoft.com/en-us/library/ms536474(VS.85). aspx

Check out the link, using an HTA and setting the "application" property of an iframe will allow you to access the document.href property and parse out all of the information you want, including DOM elements and their values if you so choose.

使用HTA检查链接并设置iframe的“application”属性将允许您访问文档。href属性并解析所有想要的信息，包括DOM元素和它们的值。