jQueryでloadメソッドを使って外部のHTMLを読み込む方法【初心者向け】
プログラミング初心者向けに、jQueryのloadメソッドで外部のHTMLファイルを読み込む方法について解説しています。実際にソースコードを書きながら説明しているので、初心者の方でもすぐに理解することができるでしょう。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
JavaScriptのライブラリであるjQueryでloadメソッドを使って外部のHTMLを読み込む方法を紹介します。
簡単に別ファイルを読み込むことができるので、使い方を覚えておきましょう。
jQueryについてそもそもよく分からないという方は、jQueryとは何なのか解説した記事をまずご覧ください。
なお本記事は、オンラインブートキャンプ フロントエンドコース（JavaScript・jQuery講座）の内容をもとにしています。
目次
loadとは
別のHTMLに書かれた内容を読み込むときに使います。
例えば、メニューバーが共通としてそれを各ページに記述するのは大変です。
そこで、jQueryの「load」を利用して、他のページに記述しておいたメニューのHTMLを読み込むという事ができます。そうすることで、コードが込み合わずにスッキリとしたコーディングが実現できます。
田島メンター！他のファイルから要素を取得することも出来るんですか？
自分のサイトや同じドメインの中で、という条件がつくけど、出来るよ。
ドメインが同じじゃないと取得できないんですかー。
安全のためにそうなってるんだよね。さっそくloadメソッドを書いてみよう！
loadの書き方
書き方を説明します。仮に「header.html」にタイトルが書いてあるとします。
それを外部ファイルとして「sample.html」から読み込むとすれば、以下のようなスクリプトが必要です。
JavaScript
$(function(){
$("#cover").load("header.html");
});
また、「sample.html」内で設定した「id」の箇所に上で読み込んだhtmlが読み込まれます。このときに注意するのは、「header.html」と「sample.html」は異なるファイルであるという事です。
「sample.html」で、「header.html」を指定してもjQueryが動作しないことがあります。
そのために「header.html」についての記述は「sample.html」でなく「header.html」に直接行うようにしましょう。
実際に書いてみよう
実際にソースコードを書いてみましょう。
※Chromeでは反映されませんので、FirefoxやIEで確認しましょう。
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="http://code.jquery.com/jquery-2.2.3.min.js"></script>
<script src="sample.js" type="text/javascript"></script>
<title>jQuery</title>
</head>
<body>
<div id="cover">
<div id="section1"></div>
<div id="section2"></div>
</div>
</body>
</html>
HTML
<h1>header.htmlの内容です。</h1>
JavaScript
$(function(){
$("#cover").load("header.html");
});
しっかりと「header.html」の内容が「sample.html」に反映することができています。
このようにして行うことで、ヘッダーを共通部分として処理することができるようになります。
以上、loadメソッドを使って外部ファイルを読み込む方法について解説しました。
ヘッダーやフッターなどどのページにもある内容はこのようにファイルを分けてコーディングすることで作業効率が上がるでしょう。
今あるページに別のページを読み込むことが出来ました！
書き方によっては、別のページの一部分を読み込むことも出来るよ。
リロード(更新)しなくてもページの一部って変えられるんですねー。
そうそう。loadメソッドって、内部でjQueryのajaxメソッドを呼び出してるんだよね。ページをリロードしなくても一部を更新出来る仕組みなんだ。
loadの利用例
基本文法
obj.load(url[, data][, complete(data, textStatus, xhr)])
objには、loadするセレクタを指定します。
loadには、loadメソッドを意味します。
urlには、loadするurlやファイル意味します。
dataには、リクエストと一緒に送信する文字列またはプレーンオブジェクトを指定します。
complete(responseText, textStatus, XMLHttpRequest)には、リクエストが完了した際に実行したい関数を指定します。
特定セレクタに合致した指定方法
$("#head").load("header.html #section2");
この場合は、id=”head”の内部にあるid=”section2″に対してload処理を実行することが可能です。
[お知らせ]TechAcademyでは最短4週間でフロントエンドの技術が身につくフロントエンドオンラインブートキャンプを開催しています。jQueryを使ってリッチなWebサービスを作りたい方はぜひご覧ください。
| この記事を監修してくれた方
中本賢吾（なかもとけんご） 開発実績：PHPフレームワークを利用した会員制SNS・ネットショップ構築、AWSや専用サーバー下でLinuxを使用したセキュアな環境構築、人工知能を利用したシステム開発、店舗検索スマホアプリ開発など。 その他にも地域の職業プログラマー育成活動を行い、2018年には小学生がUnityで開発したオリジナルAndroidアプリをGooglePlayでリリース。ゲームで遊ぶより作ろうぜ！を合言葉に、小学生でも起業できる技術力を育成可能で有ることを証明し続けている。 |
