こんにちは、ウェブラボ技術メモです。
今回は、jQueryで外部HTMLの指定した部分を読み込んでみたいと思います。
具代的には、外部にあるお知らせ一覧ページから、指定した件数だけ読み込んで表示するDEMOを作ります。
外部にあるお知らせ一覧ページは以下のようなものを作りました。
■外部ページの読み込みたい部分のHTML
<div id="demo_block"> <ul> <li><span>2016/09/25</span>1つ目の記事1つ目の記事1つ目の記事1つ目の記事1つ目の記事1つ目の記事1つ目の記事1つ目の記事1つ目の記事</li> <li><span>2016/09/24</span>2つ目の記事2つ目の記事2つ目の記事2つ目の記事2つ目の記事2つ目の記事2つ目の記事2つ目の記事2つ目の記事</li> <li><span>2016/09/23</span>3つ目の記事3つ目の記事3つ目の記事3つ目の記事3つ目の記事3つ目の記事3つ目の記事3つ目の記事3つ目の記事</li> ・ ・ ・ </ul> </div>
さて、ここから5件だけ取り出して表示させます。
まずは外部HTMLを表示させたい領域を以下のように記述します。
■表示するHTML領域
<div id="info"><!-- ここに読み込んだHTMLを表示 --></div>
次にJavascript部分です。
必要なものはjQueryだけで、Ajaxで外部ページを読み込みます。
Ajaxとは、Asynchronous JavaScript + XML の略で、非同期通信を利用してデータを取得したり、動的にウェブページの内容を書き換える技術のことです。
Google Mapなどに利用されています。
■Javascript部分
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(function() {
$.ajax({
url: 'demo.html', //読み込むファイルを指定
cache: false, //キャッシュを保存するかの指定
success: function(html){
//データ取得後に実行する処理
$(html).find('#demo_block').each(function(){ //読み込みたい部分の指定 ※今回は#demo_blockの中身のulから読み込まれる
$('#info').html($(this).html()); //読み込んだ外部HTMLを表示する領域を指定
return false;
});
$('ul li:gt(4)').remove(); //6件目以降の li を削除
}
});
});
</script>
Javascriptはたったこれだけです。successの中を変更することによって、他にも色々なことができますね。
出来上がったDEMOはこちらです。
→DEMO
いかがでしたでしょうか？別ファイルを用意してPHPやiframeで読み込んだりするよりも楽ちんですね！！
かなり役立つ機会はあるのではないかと思います。最近私も使う機会が多いです。
注意事項としては、このままでは別ドメインにあるHTMLなどのファイルは読み込むことができません。
ですが、対応する方法はいくつかあるようですね。結構面倒そうな感じですが。。。
以上、技術メモでした。