ajaxで外部サイトのページ(html)を読み込む方法

ajaxを利用して、javascriptとjqueryで外部サイトのhtmlを取得する方法を紹介します。正直、クロスドメインの問題があったので、かなりいろいろページ見て唸っていました。

でも、以下ページで簡単なやり方が書いてありました。

JavaScriptで外部サイトをスクレイピング【Cross-Domain-Ajax】JavaScriptプログラムメモ｜プログラムメモ

方法

下のページのjquery.xdomainajax.jsを持ってくる。

jquery.fn/cross-domain-ajax/jquery.xdomainajax.js at master · padolsey/jquery.fn

自分のhtmlにソースとして追加。

<script type="text/javascript" src="jquery.xdomainajax.js"> </script>

あとはjavascriptにajaxのコードをかけばOk。以下はjqueryを使った簡単な関数を作っています。そのままサイトのurlを引数に、サイトのページを表示します。

function readHtml(url) {
  $.ajax({
    type: 'GET',
    url: url,
    success: function(data) {
      $('#content').append(data.responseText);
    },
    error: function(xhr, status, err) {
      alert('HTML読み出しで問題がありました:' + url);
    }
  });
}