iframe 加载事件

Posted 2023-02-27

【中文标题】iframe 加载事件

【英文标题】：iframe onload event

【发布时间】：2011-08-23 22:46:30

【问题描述】：

我有一段简单的代码：

<script>
function change()document.getElementById("browse").src = document.getElementById("addr").value;
function update()document.getElementById("addr").value = document.getElementById("browse").src;
<script>
<input type="text" id="addr"><input type="button" value="Go" onclick="change();">
<iframe id="browse" style="width:100%;height:100%" onload="update();"></iframe>

更新（）；不被调用，例如点击 iframe 内的链接并加载新页面。

有什么问题？

【问题讨论】：

当你说 update() 没有被调用时，它实际上没有被调用或者你的脚本只是遇到错误而死了？ （您可以使用 Chrome 开发工具或 Firebug 进行检查。）

【参考方案1】：

简答：您无法获取除您的域之外的任何域上的页面的 URL。你想要的网址可以通过：

document.getElementById("browse").contentWindow.location.href;

但是，由于Same origin policy，此 URL 仅在浏览您的域中的站点时可用。它将是未定义的，如果您在任何其他域上尝试，您将收到一个安全错误。

因此，如果您想从其他域获取页面并且想使用纯 javascript 执行此操作，则不能。

长答案：您可以使用服务器端代理来加载 iframe 中请求的 URL。比如：

http://yourdomain.com/proxy.php?url=http://www.google.com/

然后在获取 URL 时获取 url 参数并将其放入 'addr' 输入中。

这种做法实在不值得做；您将使用大量带宽，并且您将向希望通过防火墙代理并滥用您的代理以满足他们的需求的人开放您的站点。

【参考方案2】：

您可以在更改 src 后直接添加处理程序以使其工作：

function change()
    document.getElementById("browse").src = document.getElementById("addr").value;
    document.getElementById("browse").onload = function (e)alert(e);

看看这个例子http://jsfiddle.net/xkBF3/