Question

我需要关于innerHTML问题的帮助，抱歉，我不是开发人员：）

我有一个带有两个菜单的表单，一个变量读取所选的两个值以创建HTML页面的名称，并在带有innerHTML的DIV中显示它。到目前为止，一切正常。问题是，如果HTML页面不存在，我想显示一条消息，如果DIV没有加载任何页面（无法加载资源），我无法弄清楚如何编码，然后显示错误消息“

这是脚本，单击表单的提交按钮时会调用该脚本：

<script language="JavaScript">
    function ShowMyPage() {
        var country_entered = document.getElementById("Country").value;
        var data_entered = document.getElementById("DataType").value;
        var mypage = "data/" + country_entered + "_" + data_entered + "/"+ country_entered + "_" + data_entered + ".html";
        var maindiv = document.getElementById('maindiv');
        maindiv.innerHTML = '<object type="text/html" height="100%" width="100%" data='+mypage+' ></object>';

// everything works so far, the following line doesn't

        if (maindiv.innerHTML == "") { maindiv.innerHTML = 'ERROR MESSAGE'; }       
};
</script>

最后一行不起作用，这是合乎逻辑的，因为DIV不为空，但包含不存在的页面的链接。如何检查HTML页面是否已正确加载，如果没有，则显示错误消息？

感谢您的帮助

Answer 1

这是一个逻辑/设计问题，而不是编码问题。你使用它的方式有一些缺陷，你刚刚发现其中一个缺陷。在大多数应用程序中，更好和更常见的方法是首先验证用户输入，这意味着（除了执行验证以避免恶意代码输入）检查页面是否实际存在然后创建（或不）HTML <object>。

有多种方法可以实现这一目标。

使用jQuery 加载页面并捕获错误：

 jQuery("#maindiv").load( mypage , function( response, status, xhr ) {
   if ( status == "error" ) {
     // Do Something with the error
     console.log(xhr.status + " : " + xhr.statusText);
   }
 });

使用jQuery并发出 AJAX 请求来检查页面是否存在：

jQuery.ajax({
  url: mypage,
  statusCode: {
    404: function() {
      // Do Something if the page is not found
    }
  }
});

还有很多，但我只是提供了一种不同的方法，你可以很容易地找到很多方法来实现这一目标。

通常，您需要首先检查网页是否以您想要的方式存在，然后创建HTML <object>。

在DIV / innerHTML

1 个答案: