jQueryでアクセス先エラーの場合の処理方法に関して

Question

HTMLタグのimgやaタグのアクセス先が指定したパスから変更になった場合などの対処をしようと考えていたのですが、どういった対処方法が良いでしょうか？

jqueryのerror()でimgの対応は出来たのですが、非推奨と有りましたので、ajaxでアクセスし、URLの指定、succes、errorで振り分けたのですが、全てエラーになってしまいました。

どんな対処方法が最適でしょうか？

Comments

[yambejp]

XSSについては無視してよいですか？promiseで処理すればimgは比較的簡単。aはhrefの先をどうしたいのでしょう？404エラーをチェックしたいのでしょうか？

[KatsukiSugiura]

ありがとうございます。何がしたいのかをお伝えした方が理解してもらいやすいかと思いますので、ご説明致します。wordpressで利用しているDBを変更し、記事を移転した際にイメージとリンクが上手く表示されない記事が多々あると言う状況になりまして、こういった際の修正にjqueryで対応し、プラグインなど制作しておけば次回から対応し易いと、汎用性が高いと考えています。リンク先は404エラーの場合、接続エラーの場合含み正常に表示されない場合に代替メッセージで要素入れ替えを考えています。xss無視して問題なければ無視して構いませんが問題あれば無視しません。

[yambejp]

具体的にはどういった処理をご希望なのでしょう？imgのsrcは読み先がなければ画像が表示されないので見た目上判断できますが、それとは別にプログラム的に判断したいのですか？その際エラーだったら結果をどう表示したいのでしょうか？aについても同様、結果をどう返したいのでしょう？

[KatsukiSugiura]

記述済みです。

Answer 1

ちょっと書いてみました
ajaxで読んで404エラーだったタグを抜き出して隠しています

<script src="https://www.promisejs.org/polyfills/promise-6.1.0.min.js"></script>
<script>
window.onload=function(){
  var prm=[];
  var tags=document.querySelectorAll("img,a");
  for(var i=0;i<tags.length;i++){
    (function(i){
      prm[i]= new Promise(function(resolve){
        var xhr = new XMLHttpRequest();
        xhr.open('GET', tags[i].getAttribute("href")||tags[i].getAttribute("src"));
        xhr.responseType = 'arraybuffer';
        xhr.addEventListener("load" ,function() {
          resolve(xhr.status==404?tags[i]:null);
        });
        xhr.send();
      });
    })(i);
    Promise.all( prm ).then(function(data){
      for(var i=0;i<data.length;i++){
        if(data[i]) data[i].style.display="none";
      }
    });
  }
};
</script>

※IE対策でpromiseのライブラリ読んでますが、他のブラウザだけでよいならいりません