如何获取iframe的当前位置?

时间:2020-03-05 18:47:47  来源:igfitidea点击:

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

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

谢谢,
亚当

解决方案

回答

这有帮助吗?

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

我只在firefox中测试过,但是如果我们有以下内容:

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

我们可以使用以下方法获取其地址:

document.getElementById('myframe').src

不知道我是否正确理解了问题,但是无论如何:)

回答

好的,因此在此应用程序中,有一个iframe,其中向用户提供了链接或者某种允许iframe浏览到某个外部站点的功能。然后,我们正在寻找捕获用户浏览过的URL。

要记住的事情。由于该URL指向外部来源,因此我们将无法通过javascript与iframe进行交互(或者与此相关的客户端访问),这被称为浏览器跨域安全性,显然我们已经发现。此处提供了跨域,跨框架Javascript的巧妙解决方法,尽管我认为这种解决方法不适用于这种情况。

根据需要,几乎所有我们可以访问的位置。

我建议使代码呈现的更具弹性,并减少出错的可能性。尝试将IE或者FF配置为显示javascript错误,以浏览网页。我们会惊讶地发现抛出了多少个JavaScript错误,主要是因为那里有很多容易出错的javascript,并且这种错误还在继续蔓延。

该解决方案假定所讨论的iframe与运行javascript的"窗口"上下文相同。 (意味着,它没有嵌入另一个框架或者iframe中,在这种情况下,JavaScript代码会涉及更多的内容,因此我们可能需要递归地搜索窗口层次结构。)

<iframe name='frmExternal' id='frmExternal' src='http://www.stackoverflow.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>

希望这可以帮助。

回答

我们可以访问iframe的src属性,但这只会为我们提供最初加载的URL。如果用户通过iframe导航,则需要使用HTA解决安全问题。

http://msdn.microsoft.com/zh-CN/library/ms536474(VS.85).aspx

使用HTA检出链接,并设置iframe的" application"属性,将允许我们访问document.href属性,并解析出所需的所有信息,包括DOM元素及其值(如果我们选择的话)。

回答

我们可以使用Ra-Ajax并将iframe包裹在例如窗口控件。虽然总的来说,我不鼓励人们使用iframe(用于其他任何用途)

另一种选择是将HTML加载到服务器上,并将其作为Label或者其他内容直接发送到Window中。了解此Ajax RSS解析器如何在源中加载RSS项,可在此处下载(开源LGPL)

(免责声明;我与Ra-Ajax合作...)

回答

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

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

回答

HTA就像普通的Windows应用程序一样工作。
我们编写HTML代码,并将其另存为.hta文件。
但是,至少有一个缺点:浏览器无法打开.hta文件;它作为普通的.exe程序处理。因此,如果将指向.hta的链接放置到网页上,它将打开一个下载对话框,询问我们是否要打开或者保存HTA文件。如果这对我们来说不是问题,则可以单击"打开",它将打开一个新窗口(没有工具栏,因此没有"返回"按钮,也没有地址栏,也没有菜单栏)。
我需要做一些与我们想要的非常相似的事情,但是我使用的是真正的frameset,而不是iframes
主页必须是.hta文件;另一个应该是普通的.htm页面(或者.php或者其他内容)。
这是一个具有2个框架的HTA页面的示例,其中最上面的一个按钮和一个文本字段包含第二个框架URL。该按钮将更新字段:

框架集

<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"`。它说它们也属于该程序,并且应该可以访问所有数据(如果不访问,则框架仍会显示以前的错误)。

拓扑

<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
享受=]

回答

我在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"。

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

如果我们尝试访问" 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

我尚未测试任何其他浏览器。

希望能帮助到你!

回答

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

我们可以将iframe的.innerHTML设置为在服务器端获取的HTML内容。根据获取方式,我们将必须注意相对路径和绝对路径。

另外,根据我们要抓取的页面与其他页面的交互方式,这可能完全不起作用(为我们要抓取的页面设置的Cookie无法跨域使用,可能是在Javascript中跟踪了状态……很多原因这可能不起作用。)

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

这些想法有什么帮助吗?

-布莱恩·斯蒂纳(Brian J.