如何获取 iframe 的当前位置?

IT技术 asp.net javascript dom iframe
2021-01-29 02:28:34

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

有没有人在服务器端做过什么?或知道浏览器控件中的任何 .Net 浏览器。最终目标只是为用户提供一种简单的方法来提取他们在 iframe 中查看的页面的 url。它不一定必须是 iframe,浏览器中的浏览器将是理想的选择。

谢谢,亚当

6个回答

我没有在Firefox 3的一些测试对比的value.src,并.documentWindow.location.hrefiframe(注意:在 Chrome 中documentWindow调用contentDocument,所以.documentWindow.location.href在 Chrome 中它将是.contentDocument.location.href。)

src始终是在没有用户交互的情况下加载到 iframe 中的最后一个 URL。即,它包含 URL 的第一个值,或者您从包含窗口使用 Javascript 设置的最后一个值:

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

如果用户在 iframe 内导航,则无法再使用 src 访问 URL 的值。在前面的示例中,如果用户离开 www.google.com 而您执行以下操作:

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

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

documentWindow.location.href 仅当 iframe 包含与包含窗口位于同一域中的页面时才可用,但如果它可用,则它始终包含 URL 的正确值,即使用户在 iframe 中导航。

如果您尝试访问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

我没有测试过任何其他浏览器。

希望能帮助到你!

尼古拉,试试 document.getElementById("myiframe").contentDocument.location.href
2021-03-26 02:28:34
感谢比利的提醒,我用有关如何在 Chrome 中访问 href 的说明更新了答案。我没有测试过任何其他浏览器。
2021-03-28 02:28:34
你能帮助我吗?如果我使用document.getElementById("myiframe").src,我会得到初始状态,无论 src 是否在我的域中。如果我使用document.getElementById("myiframe").documentWindow.location.href我得到一个TypeError: document.getElementById("myiframe").documentWindow is undefined 你知道为什么我会得到一个 TypeError 吗?
2021-03-28 02:28:34
嗨 Joaquin,正如你提到的,src 是最后加载的 url。是否可以显示当前的href?
2021-04-07 02:28:34
document.getElementById('iframeID').contentWindow.location.href

您根本无法访问跨域 iframe 位置。

就是这么简单,如果浏览器允许的话。您会在我的回答中看到完全相同的 DOM 路径,但在 Safari、Chrome、Firefox 3+ 或 IE * 中不起作用,因为它不安全。
2021-03-16 02:28:34
正如我在回答中指出的那样,如果 iframeID 中的 url 在包含窗口的域之外,这将不起作用。
2021-04-05 02:28:34

我用这个。

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

var currentFrame = innerDoc.location.href;

HTA 的工作方式类似于普通的 Windows 应用程序。
您编写 HTML 代码,并将其另存为 .hta 文件。

但是,至少有一个缺点:浏览器无法打开 .hta 文件;它作为一个普通的 .exe 程序处理。因此,如果您将 .hta 的链接放在您的网页上,它将打开一个下载对话框,询问您是否要打开或保存 HTA 文件。如果这对您来说不是问题,您可以单击“打开”,它将打开一个新窗口(没有工具栏,因此没有后退按钮,也没有地址栏,也没有菜单栏)。

我需要做一些与您想要的非常相似的事情,但是iframes我使用了一个真正的frameset.
主页需要是一个 .hta 文件;另一个应该是一个普通的 .htm 页面(或 .php 或其他)。

下面是一个包含 2 个框架的 HTA 页面示例,其中顶部有一个按钮和一个文本字段,其中包含第二个框架 URL;按钮更新字段:

框架集.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>
  • 有一个HTA:APPLICATION标签可以为文件设置一些属性;拥有它很好,但不是必须的。
  • 需要application="yes"在框架的标签处放置一个它说它们也属于该程序,并且应该可以访问所有数据(如果不这样做,框架仍会显示您之前遇到的错误)。

拓扑.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>
  • 您应该注意到我没有使用任何 getElement 函数来获取字段;在 HTA 文件中,所有具有 ID 的元素立即成为对象

我希望这对您和其他解决此问题的人有所帮助。它解决了我的问题,看起来和你一样。

您可以在此处找到更多信息:http : //www.irt.org/articles/js191/index.htm

享受 =]

上帝帮助我们,框架又回来了?!?!?
2021-03-16 02:28:34

我喜欢你的服务器端想法,即使我提议的它的实现听起来有点贫民窟。

您可以将 iframe 的 .innerHTML 设置为您抓取服务器端的 HTML 内容。根据您如何获取它,您将不得不注意相对路径与绝对路径。

另外,根据您抓取的页面与其他页面的交互方式,这可能完全行不通(为您抓取的页面设置的 cookie 无法跨域工作,也许状态正在 Javascript 中被跟踪......有很多原因这可能行不通。)

我不相信跟踪您尝试镜像的页面的当前状态在理论上是可能的,但我不确定。该站点可以跟踪服务器端的各种事物,您将无法访问此状态。想象一下在页面加载中将变量设置为服务器端随机值的情况,您将如何捕获这种状态?

这些想法有帮助吗?

-Brian J. Stinar-