ajaxで外部サイトのページ(html)を読み込む方法
スポンサーリンク
ajaxを利用して、javascriptとjqueryで外部サイトのhtmlを取得する方法を紹介します。 正直、クロスドメインの問題があったので、かなりいろいろページ見て唸っていました。
- No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. が出る。 - 焼肉リア充
- 続 クロスドメインで使う XM
でも、以下ページで簡単なやり方が書いてありました。
方法
- 下のページの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); } }); }
data.responseTextがhtmlの中身になっております。
ちなみに、エラー時の処理なんていらないという方は、もっとシンプルな$.get()
をお使いください。
- 作者: 佐藤和人
- 出版社/メーカー: インプレスジャパン
- 発売日: 2006/12/01
- メディア: 単行本
- 購入: 4人 クリック: 96回
- この商品を含むブログ (21件) を見る
Ajax&JavaーJavaプログラマのためのAjaxプライマー
- 作者: Steven Douglas Olson,安藤慶一
- 出版社/メーカー: オライリー・ジャパン
- 発売日: 2007/08/10
- メディア: 大型本
- 購入: 1人 クリック: 5回
- この商品を含むブログ (10件) を見る