How to detect an error 404 in an iframe?

如何检测 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>

有两种场景

您的 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
        })
    });

您的 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 回复

3个答案

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

希望404页面遵循404标准。

你的答案