UIWebViewで表示するコンテンツを動的に書き換える方法

元記事

英語のサイトなんで軽く翻訳して紹介。

WEBから落としてきたHTMLコンテンツを表示する際に、
imgタグは、画像のリンクが"http://〜"で元の場所を指しています。

すでに画像イメージもダウンロードしている場合は、
画像を表示する時にネットにつなげないといけないというのは
あまりうれしくありません＝オフラインで見たい！！

そういう時は、UIWebViewで表示する時に、
javascriptを走らせます。

具体的には、webViewDidFinishLoadの際に、

[webView stringByEvaluatingJavaScriptFromString: @"window.useLocalPaths()"]

を実行し、window.useLocalPathsというイベントを発生させます。

そのイベントは、以下のように定義しておきます。

<script type="text/javascript">  
  window.addEventListener('load',function() {  
    window.useLocalPaths = function() {  
      var images = document.getElementsByTagName('img');  
      for (var i=0; i<images.length; i++) {  
        var url = images[i].src;  
        if (url.length>0) {  
          var bits = url.split('/');  
          images[i].src = bits[bits.length-1];  
        }  
      }  
      return true;  
    };  
  },false);  
</script>  

これでimgタグのsrcに指定されているパスが、以下のように書き変わります。

<img src="http://www.pervasentcdn.com/pervasent.jpg" class="logo" alt="Pervasent" />  

<img src="pervasent.jpg" class="logo" alt="Pervasent" />