乐闻世界logo
搜索文章和话题

如何检测 iframe 加载页面的 404 错误?

5 个月前提问
21 天前修改
浏览次数203

3个答案

1
2
3

如何检测 iframe 中的 404 错误?,在 HTML 中嵌入 <iframe> 通常用于在当前页面中加载另一页面。但是,当尝试加载的页面不存在或出现问题时(如返回 404 错误),默认情况下,浏览器不会提供直接的方法来检测这种错误。不过,我们可以使用一些技巧来尝试检测 <iframe> 中的 404 错误。

以下是一种可能的方法,使用 JavaScript 来检测 <iframe> 中的加载错误:

javascript
window.addEventListener('load', function() { var iframe = document.getElementById('my-iframe'); iframe.addEventListener('load', function() { try { // 尝试获取 iframe 的内容,可能会因同源策略而失败 var iframeDoc = iframe.contentDocument || iframe.contentWindow.document; // 检查页面是否真的加载了,通过检测 body 是否存在 if (iframeDoc.body && iframeDoc.body.innerHTML.trim().length > 0) { // 页面正常加载 } else { // 页面没有正常加载,可能是 404 或其他错误页面 console.error('Iframe load failed.'); } } catch (e) { // 同源策略错误,无法读取 iframe 的内容 console.error('Cross-origin iframe detected. Unable to read the contents.'); } }); // 可以尝试通过设置 iframe 的 src 属性来加载页面 iframe.src = 'https://example.com/some-page.html'; });

请注意,由于浏览器的同源策略(Same-Origin Policy),如果 <iframe> 加载的页面不是同源的,JavaScript 将无法访问 <iframe> 中的内容。这意味着上面的代码在跨域的情况下无法工作,并且会在控制台中抛出错误。

如果你有控制 iframe 内容页面的权限,你可以考虑在那个页面中使用 JavaScript 来发送一个消息回父页面,告知它页面已经成功加载。这可以通过 window.postMessage 方法完成。父页面监听这些消息,如果没有收到预期的消息,就可以假设页面加载失败了(可能是 404 或其他错误)。

这是一个简单的使用 window.postMessage 的示例:

父页面:

javascript
window.addEventListener('message', function(event) { // 确保消息是从你的 iframe 页面发送的 if (event.origin === 'https://example.com') { if (event.data === 'loadSuccess') { console.log('iframe loaded successfully'); } } }, false); var iframe = document.getElementById('my-iframe'); iframe.src = 'https://example.com/some-page.html';

iframe 内容页面:

javascript
// 在内容页面加载完成时发送消息 window.onload = function() { // 发送消息到父页面 window.parent.postMessage('loadSuccess', '*'); };

请确保在实际环境中替换 '*' 为父页面的源(例如 'https://parent-website.com'),以提高安全性。这样可以防止向任意的接收者发送消息。

2024年6月29日 12:07 回复

状态仅存在于响应标头中。

404 页面正在处理HTTP 状态代码,该状态代码仅包含在服务器发送到浏览器的响应中,但不包含在javascript 可以访问的实际 DOMwindow和对象中。document这意味着,虽然您当然可以收集状态代码并采取适当的操作,但您只能在 javascript 接收响应时执行此操作,例如使用 jQuery.ajax () 请求XmlHttRequest 来加载“iframe”

希望404页面遵循404标准。

如果上述方法不可行,则唯一的其他可能性可能是检查标题和/或 H 标签中的“ 404 ”。虽然这肯定不太理想(我很想看到“404,找不到电影,电影。”),但这是您唯一的其他选择。

shell
$('#iframe').load(function (e) { var iframe = $("#iframe")[0]; if ( iframe.innerHTML() ) { // get and check the Title (and H tags if you want) var ifTitle = iframe.contentDocument.title; if ( ifTitle.indexOf("404")>=0 ) { // we have a winner! probably a 404 page! } } else { // didn't load } });
2024年6月29日 12:07 回复

假设这是你的 html

shell
<html> <head></head> <body> <iframe id="iframe"></iframe> </body> </html>

有两种场景

  1. 您的 iframe 的 src 与您的页面来源位于同一域中。

    shell
    Ex : page url www.example.com and iframe's src www.example.com/iframe

    您可以使用 jQuery ajax 请求来检查资源是否可用

    shell
    $(function() { $.ajax({ type : "HEAD", async : true, url : "www.example.com/iframe" }) .success(function() { $("#iframe").attr("src", "www.example.com/iframe"); }) .error(function(){ // Handle error perhaps a failover url }) });
  2. 您的 iframe 的 src 未指向您的页面来源的同一域。

    shell
    Ex : Page url www.example.com and iframe's src www.otherdomain.com/iframe

    现在,由于跨源政策,浏览器将不允许您从 javascript 代码发出跨站点请求。解决方法是发出jsonp 请求

    shell
    $(function() { $.ajax({ url: "www.otherdomain.com/iframe", dataType: "jsonp", timeout: 5000, success: function () { $("#iframe").attr("src", "www.otherdomain.com/iframe"); }, error: function (parsedjson) { if(parsedjson.status == "200") { $("#iframe").attr("src", "www.otherdomain.com/iframe"); } else { // Handle error } } }); });
2024年6月29日 12:07 回复

你的答案