Q&A
フロントエンドの問題の場合、現象確認したブラウザの種類、バージョンは提示された方が良いかと思います。
前提・実現したいこと
h1 class="title"をクリックすると新しいウィンドウが開くようにしたいです。
発生している問題・エラーメッセージ
エラーメッセージは特に出ません。
該当のソースコード
HTML
1<!DOCTYPE html> 2<html> 3 4 <head> 5 <meta charset="UTF-8"> 6 <script src="javascript/jquery-3.4.1.js"></script> 7 <script src="javascript/window_photo_02.js"></script> 8 </head> 9 10 <body> 11 12 <h1 class="title">ここをクリックで新規ウィンドウオープンしてほしい</h1> 13 14 </body> 15</html>
JavaScript
1let window_opened = null; 2 3$('.title').on('click' , function() { 4 window_opened = window.open('about:blank', 'タイトル', 'resizable'); 5}); 6
試したこと
元々作りたいサイトはもっと色々記述してあったのですが、ここまでシンプルにしても原因が分かりません。
補足情報（FW/ツールのバージョンなど）
現象確認したブラウザの種類はChrome、バージョンは79.0.3945.88です。
HTMLはHeTeMuLuクリエイターで、JavaScriptはテラパッドで作っています。
以下が症状を再現したウェブページのURLです。
アドバイスありがとうございます。現象確認したブラウザの種類はChrome、バージョンは79.0.3945.88です。
そちらも環境情報として質問本文に追記いただければと
回答2件
0
ベストアンサー
こう（読み込みの記述位置）
html
1 <head> 2 <meta charset="UTF-8"> 3 </head> 4 5 <body> 6 7 <h1 class="title">ここをクリックで新規ウィンドウオープンしてほしい</h1> 8 9 10 <script src="javascript/jquery-3.4.1.js"></script> 11 <script src="javascript/window_photo_02.js"></script> 12 13 </body>
もしくはこう（いわゆるdocument ready）
js
1$(function(){ 2 $('.title').on('click' , function() { 3 window_opened = window.open('about:blank', '繧ｿ繧､繝医Ν', 'resizable'); 4 }); 5});
要は「操作したい要素がJavaScriptから見て読み込まれてから実行させること」ですね。
併せ技で間違いなく実行させるのが良いかと思います。
追記：
HTMLはHeTeMuLuクリエイターで、JavaScriptはテラパッドで作っています。
別々のエディターでコード組むのは悪手と思います。
プロジェクト管理できるもの、構文チェック機能があるものを使ってください。
（IDEが良いですが動作の重さが気になるのでしたら別のものでも良いと思います）
投稿2020/01/06 13:45
編集2020/01/06 13:54総合スコア80875
回答ありがとうございます。ご提示いただいたコードに書き換えて試してみたところ、実現したい事ができました。また、別々のエディターで組むのは悪手との事、別フォルダの同名のファイルを同時に開く事が多く、見分けるためによくやっていたのですが癖になっていたので直そうと思います。質問の仕方にも不備があって申し訳ありませんでした。今後できるだけ必要事項を漏らさず書くように心がけます。重ねて、ありがとうございました。
解決されたようで何よりです。
>別フォルダの同名のファイルを同時に開く事が多く、見分けるために
IDE、またはタブで開けるエディタ使えば解決すると思われます。
0
codepenでこの通りやってみたところ、自分の環境では動きますね。
（jQueryは裏側で読み込ませているので、html上では省略しています。）
https://codepen.io/takuhito-h/pen/bGNaaYM
なので、動かない原因として考えられることは、
- jQuery or windowオープンのためのスクリプトの読み込みに失敗している
- ブラウザの設定で新規ウィンドウのオープンが制限されている（IEのセキュリティ設定であった気がします）
- letで変数を定義しているが、ブラウザがES6に対応していない（letはES6と言う新しめのJSの仕様なので、対応していないブラウザでは動作しません）
のどれかじゃないかなと。個人的には3が気になります。
投稿2020/01/06 13:44
総合スコア142
完全に同じコード、同じ読み込み位置だと動かないと思います。（Chrome最新、Firefox最新で確認）
すみません、指摘の内容を見落としていました。
m.ts10806さんのコメント通りにやった方がいいですね。
挙げられている１～３も問題切り分けの考え方としては必要なので＋しました。
特に１について、問題のコードではjQueryがCDN利用じゃないので本当によくありえる話ですしね。
回答ありがとうございます。１番の「jQuery or windowオープンのためのスクリプトの読み込みに失敗している」が該当していたようです。すごく基本的な事なのに自分では全く気付く事ができませんでした。CDN利用でない場合、特にあり得る事だというのも知りませんでした。考えられる原因の切り分け、原因がそもそも思いつかなかったのですが今後うまく行かなかった時の考え方として大事にしていこうと思います。
1は「jQuery本体 またはjsが読み込めてない」に当たります。ブラウザ開発ツールのコンソールタブでエラー確認できます。
今回私の提示したコードで動いたのであれば「スクリプト実行時に対象の要素が読み込まれていない」が原因となります。
ただ、JavaScriptが動かない原因は今回2つの回答で挙げられた４つでほぼ突き止められます(「構文エラー」「ロジック間違ってる」というのもありますが、今回は「コードは間違っていない」という前提です。)
覚えておくと自己解決できるようになってきます。
そう、微妙に違うんですよね。読み込めていても、対象の要素にJavscriptが当たらないと言うことがあります。
今回自分が提示したcodepen上でプログラムが動いていたのは、codepenの仕様が「htmlの末尾でJavascriptを読み込む」と言う仕様になっていたためです。
本来のプログラムでは要素を読み込む前にhead上で実行しているため対象のhtmlが見つからず、プログラムが実行はされてるけど適用されていない状態になってました。
>「スクリプト実行時に対象の要素が読み込まれていない」が原因となります。
微妙に違うのですね。できるだけ早く自己解決できるよう頑張ります。
>本来のプログラムでは要素を読み込む前にhead上で実行しているため対象のhtmlが見つからず、プログラムが実行はされてるけど適用されていない状態になってました。
解説していただきよりはっきりと理解できました。ありがとうございます。
あなたの回答
tips
プレビュー
