質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

Chrome

Google Chromeは携帯、テレビ、デスクトップなどの様々なプラットフォームで利用できるウェブブラウザです。Googleが開発したもので、Blink (レンダリングエンジン) とアプリケーションフレームワークを使用しています。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

2回答

7241閲覧

外部htmlで共通化した部分にjsが適用されない、動かない

toyohashi910

総合スコア5

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

Chrome

Google Chromeは携帯、テレビ、デスクトップなどの様々なプラットフォームで利用できるウェブブラウザです。Googleが開発したもので、Blink (レンダリングエンジン) とアプリケーションフレームワークを使用しています。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

1クリップ

投稿2020/04/16 13:03

解決したいこと

レスポンシブ対応のHPを作成しました。
ページ数が増えてきましたのでヘッダーとフッターを共通化しようと"load"を用いてインクルードしたところ
ハンバーガーメニュー動作用のscript.jsが作動しなくなってしまいました。
直接記入すると作動します。

インクルードした状態でjsが動くようにしたいと思っています。

発生している問題・エラーメッセージ

PCのchromeでデバッグした際には特にエラーは起きていません。
スマホ用メニューも問題なく動きます。

ハンバーガーメニュー動作用のscript.jsはheader部分をhtml本体内に直接記入すると作動します。

・動いているページでもリロードしたりすると動かなくなります。
・どうやらリスト要素が記載しているページ?ではjsが反応しません。スマホでメニューが開けなくなります。

該当のソースコード

html

1jsが動くソースコード<index.html> 2 3<!DOCTYPE html> 4<html lang="ja"> 5<head> 6<meta charset="utf-8"> 7<title>豊橋弓道協会 TOP</title> 8<meta name="viewport" content="width=device-width,initial-scale=1.0"> 9<meta name="keywords" content="hogehoge"> 10<meta name="description" content="hogehoge"> 11<link rel="stylesheet" type="text/css" href="css/style.css"> 12<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous"> 13<style type="text/css"> 14</style> 15<link rel="icon" href="images/favicon.ico"> 16 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 17<script src="js/jquery.js"></script> 18<script src="js/script.js"></script> 19<script src="js/jquery.smoothscroll.js"></script> 20<script src="js/jquery.scrollshow.js"></script> 21<script src="js/jquery.slideshow.js"></script> 22<script> 23$(function($){ 24 $('html').smoothscroll({easing : 'swing', speed : 1000, margintop : 50, headerfix : $('header'), outersmooth : true}); 25 $('.totop').scrollshow({position : 500}); 26 $('.slide').slideshow({ 27 touch : false, 28 bgImage : false, 29 autoSlide : true, 30 effect : 'fade', 31 repeat : true, 32 easing : 'swing', 33 interval : 5000, 34 duration : 1000, 35 imgHoverStop : false, 36 navHoverStop : false, 37 navImg : false, 38 navImgCustom : false, 39 navImgSuffix : '' 40 }); 41}); 42</script> 43<!--[if lt IE 9]> 44 <script src="js/html5shiv.js"></script> 45 <script src="js/css3-mediaqueries.js"></script> 46<![endif]--> 47</head> 48<body> 49<!-- ヘッダーはここから --> 50 51<header> 52 <div class="inner"> 53 <h1><a href="index.html"><img src="images/logo.png" alt="hoge" width="140" height="30"></a></h1> 54 <div class="spMenuWrap"> 55 <div id="spMenu"><span id="navBtn"><span id="navBtnIcon"></span></span></div> 56 </div> 57 <nav class="gnav"> 58 <ul> 59 <li><a href="index.html">ホーム</a></li> 60 <!--<li><a href="questionnaire.html">menu1</a></li>  --> 61 <li class="subnav"><a href="plan.html">plan</a> 62 <ul> 63 <li><a href="plan.html#plan">plana</a></li> 64 <li><a href="allinformation.html">allinfo</a></li> 65 <li><a href="plan.html#mschedule">monthly</a></li> 66 </ul> 67 </li> 68 <li class="subnav"><a href="kyoushitsu.html">beginner</a> 69 <ul> 70 <li><a href="kyoushitsu.html">beginnerへ</a> 71 <li class="subnav"><a href="kyoushitsu.html">class</a> 72 <ul> 73 <li><a href="kyoushitsu.html#zenki">前期</a></li> 74 <li><a href="kyoushitsu.html#hiru">一般</a></li> 75 <li><a href="kyoushitsu.html#kouki">後期</a></li> 76 </ul> 77 <li><a href="file/Registration.pdf" target="_blank" rel="noopener noreferrer">入会届</a> 78 <li><a href="file/Menbership.pdf" target="_blank" rel="noopener noreferrer">会費一覧表</a></li> 79 </ul> 80 81 <li class="subnav"><a href="./access.html">案内</a> 82 <ul> 83 <li><a href="./access.html">地図・料金</a></li> 84 <li><a href="plan.html#wschedule">利用予定</a></li> 85 </ul> 86 </li> 87 88 89 <li><a href="qanda.html">よくある質問</a></li> 90 <li><a href="contact.html" target="_blank" rel="noopener noreferrer">お問い合わせ</a></li> 91 </ul> 92 </nav> 93 </div><!-- /.inner --> 94</header> 95<!-- ヘッダーはここまで --> 96 97<!-- 写真スライドはここから  --> 98<div class="slide"> 99 <ul class="slideInner"> 100 <li><img src="images/A.jpg" alt="A"></li> 101 <li><img src="images/B.jpg" alt="B"></li> 102 <li><img src="images/C.jpg" alt="C"></li> 103 <li><img src="images/D.jpg" alt="D"></li> 104 <li><img src="images/E.jpg" alt="E"></li> 105 </ul> 106</div> 107<!-- /.slide --> 108 109<article> 110 111<div id="contents"> 112<section> 113   <!-- お知らせここから--> 114 <h2>INFORMATION<br><span>お知らせ</span></h2> 115   <!-- 特に重要なお知らせはここに表示--> 116 <h3><span class="highblinking"><strong>新型コロナウイルス感染拡大防止対応について</strong></span><br> 117 Aも<strong>令和2年4月14日(火)~令和2年5月7日(木)</strong>まで閉鎖されます。<br> 118 前期教室の<span class="blinking"><strong>”中止”</strong></span>も決定しております</strong></h3> 119 120<section> 121<div> 122<dl class="information"> 123<!-- お知らせの中身 info.htmlの5つのみ引用のためinfo.htmlに追加のこと・・・--> 124<script> 125$(function() { 126 $.ajax({ 127 url: './allinformation.html', ////読み込むファイルを指定 128 cache: false, //キャッシュを保存するかの指定 129 success: function(html){ 130 //データ取得後に実行する処理 131 $(html).find('#info_block').each(function(){ //読み込みたい部分の指定 ※今回は#info_blockの中身のulから読み込まれる 132 $('#info').html($(this).html()); //読み込んだ外部HTMLを表示する領域を指定 133 return false; 134 }); 135 $('dl dt:gt(5)').remove(); //gt(4)=> 0からカウント、6より大きな7件目以降の dt を削除 136 $('dl dd:gt(5)').remove(); //7件目以降の dd を削除 137 } 138 }); 139}); 140</script> 141<div id="info"></div> 142</dl> 143</div> 144</section> 145 <!-- お知らせの中身--> 146 <div class="btn right"><a href="allinformation.html">お知らせ一覧はこちら</a></div> 147</section><!-- お知らせ+一覧ここまで--> 148 149 150<section><!-- 教室情報 --> 151 <h2>始めたい方・再開したい方へ<br><span>教室情報</span></h2><br> 152 <div class="threeCol"> 153 <div class="inner"> 154 <a href="kyoushitsu.html#zenki"> 155 <div class="image zoom overlay"><img src="images/kyoshitsu01.jpg" alt=""></div> 156 <div class="text">前期教室</div> 157 </a> 158 159<h4>前期教室のご案内</h4> 160 <p>4月募集開始、5月開講の初心者向け・中学2年生以上対象の教室です。<br>※18:30-20:30開催となります。</p> 161 <div class="btn"><a href="kyoushitsu.html#zenki">詳しく見る</a></div> 162 </div><!-- /.inner --> 163 164</section><!-- 教室情報 --> 165 166</div><!-- /.contents --> 167</article> 168 169<h2><span>シェア・拡散お願いします</span></h2> 170 <ul class="shareList9"> 171 <li class="shareList9__item"><a class="shareList9__link icon-twitter" href="https://twitter.com/intent/tweet?url=http://www.-&text=のホームページです。よろしくお願いいたします。" target="_blank" title="Twitter"><i class="fab fa-twitter"></i></a></li> 172 <li class="shareList9__item"><a class="shareList9__link icon-facebook" href="https://www.facebook.com/sharer.php?src=bm&u=http://www.-&text=ホームページです。よろしくお願いいたします。" target="_blank" title="Facebook"><i class="fab fa-facebook"></i></a></li> 173 <li class="shareList9__item"><a class="shareList9__link icon-line" href="https://social-plugins.line.me/lineit/share?url=http%3a%2f%2fwww%" target="_blank" title=" LINE "><i class="fab fa-line"></i></a></li> 174</ul> 175 176<!-- フッターはここから footer.htmlを変更のこと --> 177<script type="text/javascript"> 178 $(function(){$("#footer").load("./footer.html"); 179 }) 180 </script> 181 182<div id="footer"></div> 183<!-- フッターはここまで --> 184 185<!-- totopのボタン --> 186<div class="totop"><a href="#"><img src="images/totop.png" alt="ページのトップへ戻る"></a></div><!-- /.totop --> 187</body> 188</html>

html

1jsが動かないソースコード<allinfornmation.html> 2<!DOCTYPE html> 3省略 4<script src="js/jquery.scrollshow.js"></script> 5<script> 6$(function($){ 7 $('html').smoothscroll({easing : 'swing', speed : 1000, margintop : 50, headerfix : $('header'), outersmooth : true}); 8 $('.totop').scrollshow({position : 500}); 9 }); 10</script> 11<!--[if lt IE 9]> 12 <script src="js/html5shiv.js"></script> 13 <script src="js/css3-mediaqueries.js"></script> 14<![endif]--> 15</head> 16<body> 17<!-- ヘッダーはここから header.htmlを変更のこと --> 18<script type="text/javascript"> 19 $(function(){ 20 $("#cheader").load("./header.html"); 21 }) 22</script> 23<header> 24<div id="cheader"></div> 25</header> 26<!-- ヘッダーはここまで --> 27 28<div id="contents"> 29<h2>INFORMATION<br><span>お知らせ一覧</span></h2> 30<div id="info_block"> 31<dl class="allinformation"> 32 33 <dt>2019/5/11</dt> 34 <dd> 35 中略 ホームページを新規に公開しました。 36 </dd> 37 </dl><!-- allinformation--> 38</div><!-- info_block --> 39</div><!-- /.contents --> 40 41<!-- フッター以下同様 --> 42<

js

1jsの中身<script.js> 2 3$(function($){ 4 var timer = false; 5 var windowWidth = window.innerWidth || document.documentElement.clientWidth || 0; 6 var nowWidth; 7 8 // 読み込み時処理 9 $(window).on('load', function(){ 10 spMenu(); 11 subNav(); 12 innerLink(); 13 }); 14 15 // リサイズ時処理 16 $(window).on('resize', function(){ 17 if (timer !== false) { 18 clearTimeout(timer); 19 } 20 timer = setTimeout(function() { 21 nowWidth = window.innerWidth || document.documentElement.clientWidth || 0; 22 if ( windowWidth != nowWidth ) { 23 subNav(); 24 windowWidth = window.innerWidth || document.documentElement.clientWidth || 0; 25 } 26 }, 200); 27 }); 28 29 // メニューボタンの表示( 30 function spMenu() { 31 $('#spMenu').on('click', function(e) { 32 $('.gnav').slideToggle(e); 33 $('#navBtnIcon').toggleClass('close'); 34 $('html, body').toggleClass('lock'); 35 }); 36 } 37 38 // サブメニューの表示 39 function subNav() { 40 if ($('#spMenu').css('display') == 'block') { 41 $('.subnav > a').off().on('click', function(e) { 42 e.preventDefault(); 43 $(this).next('ul').slideToggle(); 44 $(this).parent().toggleClass('active'); 45 }); 46 } else { 47 if('ontouchstart' in document) { 48 $('.subnav > a').off().on('click', function(e) { 49 e.preventDefault(); 50 }); 51 } 52 } 53 } 54 55 // 内部リンク時のメニュー閉じ 56 function innerLink() { 57 if ($('#spMenu').css('display') == 'block') { 58 $('.gnav a[href^="#"]').on('click', function(e) { 59 $('.gnav').slideToggle(e); 60 $('#navBtnIcon').toggleClass('close'); 61 $('html, body').toggleClass('lock'); 62 }); 63 } 64 } 65}); 66

試したこと

$(function(){
$("#header").load("header.html", function() {
$.getScript("./js/script.js", function(){});
});
});

を記載しても動きませんでした・・・

補足情報(FW/ツールのバージョンなど)

PCでは問題なしスマホ、android/ipadで動作不良
ipad(Safali)の方が動かない可能性が高い

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2020/04/29 19:48

「まだ回答を求めている」のは良いとして、質問内容が変わっていないのであればアドバイスは得られにくいですし、私の回答は変わりません。 質問編集して具体的に得たいアドバイスの方向性を示してください。
guest

回答2

0

ベストアンサー

外部化するとタイミングにより下記部分が動かないことが予想されます。
スクリプトを遅延読み込みするのではなく先に読み込んだ上で、後からロードした要素にイベントを適用するような組み方に変えてはいかがでしょう。(下記部分を関数化して実行できるようにするとか)

js

1 // 読み込み時処理 2 $(window).on('load', function(){ 3 spMenu(); 4 subNav(); 5 innerLink(); 6 });

投稿2020/04/16 13:14

kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

toyohashi910

2020/04/16 13:27

早速のご回答ありがとうございました。 <script.js>の場所を変えてみたら動かないので結局<head>内に記述しました。 動くページがあるのが理解できないのですが・・・ jsは完全初心者ですので、関数化するためにどのようにすればよいか、どこか良いサイトなどありましたら教えてください。
kei344

2020/04/16 13:55

完全初心者なのであれば、Webの情報は「体系立てた情報」で無いことが多いので、入門書から始めるのが良いと思います。
toyohashi910

2020/04/25 02:47 編集

色々試してみて以下の部分のみを別ファイルに入れて $('#spMenu').on('click', function(e) を $(document).on('click', "#spMenu",function(e)としてみたところメニューボタン表示まではうまくいきました。子メニューまでは開けないのですが・・ 要素の指定方法がまずかったのでしょうか? ```js jsの中身<spmenuscript.js> // 読み込み時処理 $(window).on('load', function(){ spMenu(); subNav(); innerLink(); alert('読み込み時'); }); // メニューボタンの表示( function spMenu() { alert('spmenu時'); $(document).on('click', "#spMenu",function(e) { $('.gnav').slideToggle(e); $('#navBtnIcon').toggleClass('close'); $('html, body').toggleClass('lock'); }); }
kei344

2020/04/25 08:41

> 子メニューまでは開けないのですが コメントにはそこの記述が無いので指定方法がどうかはわかりません。
toyohashi910

2020/04/25 13:10 編集

すみません。サブメニューは変更していません。 一応、$(document).on('click'・・・と{passive: false}追加を試してみたのですがうまくいかないようです // サブメニューの表示 function subNav() { if ($('#spMenu').css('display') == 'block') { $('.subnav > a').off().on('click', function(e) { e.preventDefault(); $(this).next('ul').slideToggle(); $(this).parent().toggleClass('active'); }, {passive: false}); //, {passive: false}を追加 } else { if('ontouchstart' in document) { $('.subnav > a').off().on('click', function(e) { e.preventDefault(); }, {passive: false}); } } }
kei344

2020/04/25 14:33

{passive: false}を何のためにつけたのかはわかりませんが、関係ないと思います。 また、コメントのコードには「$(document).on('click'」は使われていないようです。
toyohashi910

2020/04/26 05:10

全てのコードは下記になります。 iPadのSafariではsubnav は動いているが、サブメニューは開かない。 Android Ipad のchrome では“読み込み時”が表示されないのでそもそも読み込まれていないのかもしれません。 // 読み込み時処理 $(window).on('load', function(){ spMenu(); subNav(); innerLink(); alert('読み込み時'); //$('.container').on('click', function(){}); alert(clickEventType); }); // メニューボタンの表示 function spMenu() { // $('#spMenu').on('click', function(e) { <= headerを共通化したら効かなかった・・・ $(document).on('click','#spMenu',function(e) { $('.gnav').slideToggle(e); $('#navBtnIcon').toggleClass('close'); $('html, body').toggleClass('lock'); // $(document).on('click','.subnav > a',function(e){$('a').off();}) }); } //gnav が表示されているときに以下のものを表示 //親要素の子要素を選択 $("親要素 > 子要素") //検索対象は直下のa要素のみ // サブメニューの表示 function subNav() {alert('subnav中身1'); if ($('#nav.gnav').css('display') == 'block') { //$('.subnav > a').off().on('click', function(e) { $(document).on('click','.subnav',function(e) { alert('subnav中身2'); $('.subnav > a').off(); // e.preventDefault(); $(this).next('ul').slideToggle(); $(this).parent().toggleClass('active'); //}, {passive: false}); //, {passive: false}を追加 }); } else { //$('.subnav > a').off().on('click', function(e) { $(document).on('click','.subnav',function(e) { alert('subnav中身3'); $('.subnav > a').off(); // e.preventDefault(); //}, {passive: false}); }); } } } // 内部リンク時のメニュー閉じ function innerLink() { alert('innerlink時'); if ($('#spMenu').css('display') == 'block') { alert('innerlink中身'); $('.gnav a[href^="#"]').on('click', function(e) { $('.gnav').slideToggle(e); $('#navBtnIcon').toggleClass('close'); $('html, body').toggleClass('lock'); }); } }
kei344

2020/04/26 07:43

> 読み込まれていないのかも $(window).on('load', function(){});の中に入れなければ良いです。 「$(document).on('click'」の形に書き直してさえいればロードを待つ必要はありません。 「if ($('#nav.gnav').css('display') == 'block') {」でクリックイベントを付与し分けていますが、クリックイベントの中で「if ($('#nav.gnav').css('display') == 'block') {」をすればよいです。 (クリックイベントの中で判断させないとその要素が無い可能性がある)
toyohashi910

2020/04/30 11:06

ありがとうございました。 色々勘違いもあり、また、if文も何故そのような書き方をしているかわからず手を付けずにいました。 ご指摘により何とか思う動作となりました。
guest

0

過去に同様の質問があったような。()
ただ、いずれにしてもJavaScript側でHTMLをロードさせてその中のJavaScriptまで動作させるのは悪手かと思います。
サーバーサイドの言語を利用し、テンプレートエンジンを導入しましょう。

投稿2020/04/16 13:10

m.ts10806

総合スコア80765

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

toyohashi910

2020/04/16 13:23

ご回答ありがとうございました。 サーバーサイドの言語を利用し、テンプレートエンジンを導入とは具体的にどのように行えばよいのでしょう?初心者なもので参考となるサイトなどありましたら教えてください。
m.ts10806

2020/04/16 13:33

まずはサーバーサイドの言語の選定と環境構築について学んでください。
Yasumichi

2020/04/29 17:30 編集

余計なお世話かもしれませんが、少しでも道しるべになれば…。 # ホームページから想像するとページ作成は片手間なのかとか勝手に想像…。(業種的にという意味で) 例えば、やっと JavaScript を始めたばかりで他の言語に手を出すのは辛いという場合、JavaScript でサーバーサイドを構築するという手もあります。(Node.js など) ただ、ホスティングしている会社によっては、環境も限定されてくるかもしれません。一般的なプロバイダーのホームページサービスだとほぼ絶望的かも。 もし、ある程度、自由に環境構築ができるサーバーがあれば、Node.js (JavaScript 実行環境) + Express (Web アプリケーションフレームワーク) + Pug(テンプレートエンジン) というのが、オーソドックスな組み合わせかもしれません。(個人の主観かもしれませんが。) その他の言語を学べる余裕があるのであれば、Java、PHP、Python、Ruby、.NET など色々な選択肢があります。あとは、ホスティングしてるサーバーの制限によります。 まとまりがありませんが、参考になれば。
toyohashi910

2020/04/30 11:11

コメントありがとうございます。 趣味で運営しているもので本業は全く畑違いでして、サーバーも今回初めて触れました。 お金をかけずやるという条件でサーバーの環境も自由度はほぼありません。今となってはもう少しお金をかけても良かったかなぁと思っています。 時間を作ってほかの言語も学んでみたいなとは思っています
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問