如何获取 iframe 的当前位置？
Posted
技术标签:
【中文标题】如何获取 iframe 的当前位置？【英文标题】：How do I get the current location of an iframe? 【发布时间】：2010-09-07 20:17:19 【问题描述】：我已经构建了一个基本的数据输入应用程序，允许用户在 iframe 中浏览外部内容并从同一页面快速输入数据。数据变量之一是 URL。 理想情况下，我希望能够将 iframe 当前 url 加载到带有 javascript 的文本框中。我现在意识到，由于安全问题，这不会发生。
有人在服务器端做过什么吗？或知道浏览器控件中的任何 .Net 浏览器。最终目标是只为用户提供一种简单的方法来提取他们在 iframe 中查看的页面的 url 它不一定必须是 iframe，浏览器中的浏览器将是理想的。
谢谢， 亚当
【问题讨论】：
【参考方案1】：这有帮助吗？
http://www.quirksmode.org/js/iframe.html
我只在firefox中测试过这个，但是如果你有这样的东西：
<iframe name='myframe' id='myframe' src='http://www.google.com'></iframe>
您可以通过以下方式获取其地址：
document.getElementById('myframe').src
不确定我是否正确理解了您的问题，但无论如何:)
【讨论】：
这只给你初始化状态，而不是当前状态【参考方案2】：好的，所以在这个应用程序中，有一个 iframe，其中向用户提供了链接或一些容量，允许 iframe 浏览到某个外部站点。然后，您正在寻找捕获用户浏览的 URL。
要记住的事情。由于 URL 指向外部源，因此您可以通过 javascript（或客户端访问）与此 iframe 交互的数量受到限制，这被称为浏览器跨域安全性，显然您已经发现.有一些巧妙的变通方法，如Cross-domain, cross-frame Javascript 所述，尽管我认为这种变通方法不适用于这种情况。
您可以根据需要访问该位置。
我建议让代码呈现出更具弹性且不易出错的情况。尝试使用配置为显示 javascript 错误的 IE 或 FF 浏览网页。您会惊讶于抛出了多少 javascript 错误，这主要是因为那里有很多容易出错的 javascript，而且还在继续激增。
此解决方案假定有问题的 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>
希望这会有所帮助。
【讨论】：
不工作..我正在测试这个，但它似乎总是返回“原始”src，而不是由用户修改或由页面重定向的真实源【参考方案3】：您可以访问 iframe 的 src 属性，但这只会为您提供最初加载的 URL。如果用户通过 iframe 在 iframe 中导航，则需要使用 HTA 来解决安全问题。
http://msdn.microsoft.com/en-us/library/ms536474(VS.85).aspx
查看链接，使用 HTA 并设置 iframe 的“应用程序”属性将允许您访问 document.href 属性并解析出您想要的所有信息，包括 DOM 元素及其值（如果您愿意）选择。
【讨论】：
HTA 只是 IE 扩展 afaik【参考方案4】：您可以使用Ra-Ajax 并在其中包含一个 iframe，例如一个窗口控件。虽然总的来说我不鼓励人们使用 iframe（对于任何东西）
另一种选择是在服务器上加载 HTML 并将其作为标签或其他内容的内容直接发送到窗口中。查看Ajax RSS parser 是如何在源中加载 RSS 项目的，可以下载 here（开源 - LGPL）
（免责声明；我与 Ra-Ajax 合作...）
【讨论】：
【参考方案5】：document.getElementById('iframeID').contentWindow.location.href
您根本无法访问跨域 iframe 位置。
【讨论】：
如果浏览器允许，就这么简单。你会在我的回答中看到完全相同的 DOM 路径，它在 Safari、Chrome、Firefox 3+ 或 IE * 中不起作用，因为它不安全。 正如我在回答中指出的那样，如果 iframeID 中的 url 在包含窗口的域之外，这将不起作用。【参考方案6】：HTA 像普通的 Windows 应用程序一样工作。
您编写 HTML 代码，并将其保存为 .hta 文件。
但是，至少有一个缺点：浏览器无法打开 .hta 文件；它作为普通的 .exe 程序处理。因此，如果您将指向 .hta 的链接放在您的网页上，它将打开一个下载对话框，询问您是否要打开或保存 HTA 文件。如果对您没有问题，您可以单击“打开”，它将打开一个新窗口（没有工具栏，因此没有后退按钮、地址栏和菜单栏）。
我需要做一些与您想要的非常相似的事情，但我使用的是真正的frameset，而不是iframes。
主页需要是一个.hta文件；另一个应该是普通的 .htm 页面（或 .php 或其他）。
这是一个有 2 个框架的 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>
HTA:APPLICATION 标记可以为文件设置一些属性；拥有它很好，但不是必须的。
您需要在框架标签处放置application="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>
我希望这对您以及其他解决此问题的人有所帮助。它解决了我的问题，看起来和你的一样。 您可以在这里找到更多信息：http://www.irt.org/articles/js191/index.htm 享受 =]
【讨论】：
上帝保佑我们，车架回来了吗？！？！？【参考方案7】：我在 Firefox 3 中做了一些测试，比较了 iframe 中的 .src 和 .documentWindow.location.href 的值。 （注意：documentWindow 在 Chrome 中称为 contentDocument，因此在 Chrome 中不是 .documentWindow.location.href，而是 .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
我没有测试任何其他浏览器。
希望对你有帮助！
【讨论】：
感谢比利的提醒，我更新了答案，提供了有关如何在 Chrome 中访问 href 的说明。我没有测试任何其他浏览器。 你能帮帮我吗？如果我使用document.getElementById("myiframe").src，我会得到初始状态，无论 src 是否在我的域中。如果我使用document.getElementById("myiframe").documentWindow.location.href，我会得到TypeError: document.getElementById("myiframe").documentWindow is undefined，你知道为什么我会得到TypeError吗？
尼古拉，试试 document.getElementById("myiframe").contentDocument.location.href
嗨，Joaquin，正如您所提到的，src 是最后一个加载的 url。是否可以显示当前的href？【参考方案8】：
我喜欢你的服务器端想法，即使我提议的实现它听起来有点贫民窟。
您可以将 iframe 的 .innerHTML 设置为您在服务器端获取的 HTML 内容。根据你如何抓住它，你将不得不注意相对路径和绝对路径。
另外，根据您抓取的页面与其他页面的交互方式，这可能完全不起作用（为您抓取的页面设置的 cookie 将无法跨域工作，也许是在 Javascript 中跟踪状态...这可能不起作用的原因有很多。）
我不相信跟踪您尝试镜像的页面的当前状态在理论上是可行的，但我不确定。该站点可以跟踪服务器端的各种事物，您将无权访问此状态。想象一下，在页面加载时，一个变量被设置为服务器端的随机值，你将如何捕获这种状态？
这些想法有什么帮助吗？
-Brian J. Stinar-
【讨论】：
【参考方案9】：我用这个。
var iframe = parent.document.getElementById("theiframe");
var innerDoc = iframe.contentDocument || iframe.contentWindow.document;
var currentFrame = innerDoc.location.href;
【讨论】：
以上是关于如何获取 iframe 的当前位置？的主要内容，如果未能解决你的问题，请参考以下文章