Question

我需要确定在将脚本标记附加到页面后，如何检测从外部脚本返回的404错误。这是对正在发生的事情的细分。

我在我的页面上包含一个外部javascript，然后从该javascript调用一个方法来传递某些值，然后使用这些值生成一个url路径，并将一个脚本元素附加到我的页面，该路径为src。问题是有时url不存在并且抛出404错误，但是当发生这种情况时我想要发生默认行为，但我无法弄清楚如何订阅该外部的响应对象

以下是我的html页面示例：

<script type="text/javascript"
  src="https://thirdparty.com/AdLoader.js">
</script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>


<!-- This element is where the ad is injected -->
  <div id="AdTargetDiv" style="text-align: center;">
  </div>

<!-- This script requests the ad for the user -->
  <script type="text/javascript">
    $(document).ready(function(){
      AdLoader.loadAd({
        api_key:"apikey,
        user_id: "nouser",
        element_id: "AdTargetDiv",
        default_ad_image_url:"https://defaultimageurl.com",
        default_ad_url:"http://google.com"
      })
    });
  </script>

AdLoader.js的代码：

window.AdLoader = {
  "loadAd": function(opts){
    var scheme_host = "https://adloader.com";
    if(opts.scheme_host){
      scheme_host = opts.scheme_host;
    }
    var path = "/apikey/"+opts.api_key+"/"+opts.user_id+".js?element_id="+opts.element_id+"&default_ad_url="+opts.default_ad_url+"&default_ad_image_url="+opts.default_ad_image_url;
    var url = scheme_host + path;

    setTimeout(function(){
      var sc = document.createElement("script");
      sc.setAttribute("type","text/javascript");
      sc.setAttribute("src", url);

      document.body.appendChild(sc);
    },1);
  }
};

AdLoader中的setTimeout函数获取生成的路径，并使用该源创建脚本标记，并将其附加到我的原始代码，因此在此示例中。

<script type="text/javascript" src="https://adloader.com/api_key/apikey/nouser.js?element_id=AdTargetDiv&default_ad_url=https://defaultimageurl.com&default_ad_image_url=https://google.com />

但是因为＆＃34; nouser＆＃34;如果不是有效用户，则返回404。

我以为我能以某种方式赶上404，但我遇到了障碍。我尝试为错误事件添加window.addEventListener但是在页面上捕获了所有错误，我无法弄清楚如何解析事件对象以找出错误类型并查看它是否为404。 / p>

我尝试的另一件事是向window.AdLoader添加一个事件监听器，但我想这个对象由于某些原因对我来说是不可见的。有谁能指出我的解决方案？我意识到我可以自己动态构建url并做一个ajax.GET但这似乎是对我的攻击，因为GET已经在页面上发生，我似乎无法想出如何订阅事件并阅读错误。

Answer 1

如果域允许CORS，或者如果您在同一个域中，则可以执行以下操作：

<script>
function testURL() {
  var xhttp;
  var path = "/apikey/"+opts.api_key+"/"+opts.user_id+".js?element_id="+opts.element_id+"&default_ad_url="+opts.default_ad_url+"&default_ad_image_url="+opts.default_ad_image_url;

  if (window.XMLHttpRequest) {
    // code for modern browsers
    xhttp = new XMLHttpRequest();
    } else {
    // code for IE6, IE5
    xhttp = new ActiveXObject("Microsoft.XMLHTTP");
  }
  xhttp.onreadystatechange = function() {
    if(xhttp.status == 404){
       //Page error
    }
    if (xhttp.readyState == 4 && xhttp.status == 200) {
      //xhttp.responseText contains the page that you get
      //Success do whatever you want
    }
  };
  xhttp.open("GET", path, true);
  xhttp.send();
}
</script>

从附加脚本标记中检测404错误

1 个答案: