Iframe加载事件

Question

我有一段简单的代码：

<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()方法没有被调用。

问题出在哪里？

- McRonald

---

当你说update()没有被调用时，它实际上是没有被调用还是你的脚本只是遇到了错误并停止了？（你可以使用Chrome Dev Tools或Firebug进行检查。） - lpd

Answer 1

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

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

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

- DanielB

Answer 2

简短回答：您无法获取除您自己的域名以外的任何域名页面的URL。您想要的URL可以通过以下方式获得：

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

然而，由于同源策略，此URL仅在浏览您的域名时可用。如果您尝试在其他域上使用，它将未定义并出现安全错误。

因此，如果您想从其他域获取页面，并且希望使用纯JavaScript完成此操作，则无法实现。

长话短说：您可以使用服务器端代理来加载iframe中请求的URL，例如：

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

然后，在获取URL时获取URL参数，并将其放入“addr”输入框中。

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

- betamax