如果未正确加载，则隐藏 iframe

Question

我的页面上有几个 iframe 指向外部网站。如果这些服务中断或更改，我想隐藏这些 iframe，而不是在我的页面上显示错误消息。 如果 iframe 已正确加载，有什么方法可以在 Javascript 中查找？ 我添加了一个类来隐藏 iframe，然后在 iframe 准备好时使用 jQuery 将其删除，如下所示：

$('#widget').ready(function () {
    $('#widget').removeClass('hidden');
});

当我在 iframe src 中放置无效 URL 时，它仍然会删除隐藏类，显示错误 iframe。 我的问题有两个：

• 如果 iframe 已正确加载，我怎样才能使函数运行？
• 我不想使用 $('#widget').ready，而是使用 $('iframe').ready 来同时定位所有 iframe；如果这样做，如何在函数内部引用加载的特定 iframe？

谢谢！

Answer 1

您的问题可以归结为：

如何通过 Javascript 检查 URL 是否存在以及网站是否存在？

答案分为：

• 对于内部 URLs，使用 AJAX 并检查响应代码：如果是 2xx 或 3xx（例如 200 或 302），则可以。如果是 4xx 或 5xx（例如 404 或 500），那就不好了。在a similar answer 上阅读更多信息。

• 对于外部 URLs，由于名为 same-origin policy 的安全措施，您不能这样做。

由于您似乎指向外部 URL，因此这是我的建议：

创建一个服务器端组件（一个 Servlet、一个 RESTful WebService、一个 Struts2 操作等......根据您使用的服务器端技术，无论您喜欢什么）为您执行检查，并返回一个流式传输响应数据（如果有）和您可以检查错误的 HTTP 响应代码。然后从<iframe>s 调用你的组件 URL。

Answer 2

你可能无法使用 Javascript 做你想做的事，你需要服务器端的东西，例如 PHP。

但是，这里有一些有用的地方可以查找更多信息：

您可以使用此 JQuery 函数在 iframe 加载后运行代码：

$('#myIframe').load(function(){
    //your code (will be called once iframe is done loading)
});

查看this Stack Overflow question and answers 了解 iframe 加载。

要定位函数内的特定元素，请执行以下操作：

$('iframe').aFunction(function() { this.doSomething(); } );

查看this Stack Overflow question 并回答有关“this”的问题。