jQueryでloadメソッドを使って外部のHTMLを読み込む方法【初心者向け】

プログラミング初心者向けに、jQueryのloadメソッドで外部のHTMLファイルを読み込む方法について解説しています。実際にソースコードを書きながら説明しているので、初心者の方でもすぐに理解することができるでしょう。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

JavaScriptのライブラリであるjQueryでloadメソッドを使って外部のHTMLを読み込む方法を紹介します。

簡単に別ファイルを読み込むことができるので、使い方を覚えておきましょう。

jQueryについてそもそもよく分からないという方は、jQueryとは何なのか解説した記事をまずご覧ください。

 

なお本記事は、オンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)の内容をもとにしています。

 

目次

 

loadとは

別のHTMLに書かれた内容を読み込むときに使います。

例えば、メニューバーが共通としてそれを各ページに記述するのは大変です。

そこで、jQueryの「load」を利用して、他のページに記述しておいたメニューのHTMLを読み込むという事ができます。そうすることで、コードが込み合わずにスッキリとしたコーディングが実現できます。

 

大石ゆかり

田島メンター!他のファイルから要素を取得することも出来るんですか?

田島悠介

自分のサイトや同じドメインの中で、という条件がつくけど、出来るよ。

大石ゆかり

ドメインが同じじゃないと取得できないんですかー。

田島悠介

安全のためにそうなってるんだよね。さっそくloadメソッドを書いてみよう!

 

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

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」に反映することができています。

スクリーンショット 2016-09-06 10.13.26

このようにして行うことで、ヘッダーを共通部分として処理することができるようになります。

 

以上、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でリリース。ゲームで遊ぶより作ろうぜ!を合言葉に、小学生でも起業できる技術力を育成可能で有ることを証明し続けている。