読者です 読者をやめる 読者になる 読者になる

うめすこんぶ

日々のプログラミングで残しておきたいメモ.何かの役に立てれば幸いです.

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

javascript jquery

スポンサーリンク

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

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

方法

  • 下のページの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>
  • あとはjavascriptajaxのコードをかけば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);
    }
  });
}

data.responseTextがhtmlの中身になっております。

ちなみに、エラー時の処理なんていらないという方は、もっとシンプルな$.get()をお使いください。

基礎 Ajax + JavaScript

基礎 Ajax + JavaScript

Ajax&JavaーJavaプログラマのためのAjaxプライマー

Ajax&JavaーJavaプログラマのためのAjaxプライマー