jQueryで外部にあるHTMLを読み込む

こんにちは、ウェブラボ技術メモです。

今回は、jQueryで外部HTMLの指定した部分を読み込んでみたいと思います。

具代的には、外部にあるお知らせ一覧ページから、指定した件数だけ読み込んで表示するDEMOを作ります。

外部にあるお知らせ一覧ページは以下のようなものを作りました。

お知らせ一覧ページ|外部HTML

■外部ページの読み込みたい部分のHTML

さて、ここから5件だけ取り出して表示させます。

まずは外部HTMLを表示させたい領域を以下のように記述します。

■表示するHTML領域

次にJavascript部分です。

必要なものはjQueryだけで、Ajaxで外部ページを読み込みます。

Ajaxとは、Asynchronous JavaScript + XML の略で、非同期通信を利用してデータを取得したり、動的にウェブページの内容を書き換える技術のことです。

Google Mapなどに利用されています。

■Javascript部分

Javascriptはたったこれだけです。successの中を変更することによって、他にも色々なことができますね。

出来上がったDEMOはこちらです。

DEMO

いかがでしたでしょうか?別ファイルを用意してPHPやiframeで読み込んだりするよりも楽ちんですね!!

かなり役立つ機会はあるのではないかと思います。最近私も使う機会が多いです。

注意事項としては、このままでは別ドメインにあるHTMLなどのファイルは読み込むことができません。

ですが、対応する方法はいくつかあるようですね。結構面倒そうな感じですが。。。

以上、技術メモでした。

  • このページを共有する

関連記事こちらの記事も合わせてどうぞ。