Q&A
「jsファイルを編集」したあとにどのようなことをしたら、「sample.jsのソースコートのみが表示され」る状態となったのでしょうか？
質問失礼します。
タイトル通りですが、jsファイルを編集するとwebブラウザ上にsample.jsのソースコートのみが表示されます。
htmlの文字などは一切表示されません。
以下がコードになります。
smnpe.html
<!DOCTYPE html> <html dir="ltr" lang="ja"> <head> <meta charset="UTF-8"> <meta name=”robots” content=”noindex,nofollow“> <meta name="viewport" content="width=750"> <link rel="stylesheet" type="text/css" href="sample.css"> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <script type="text/javascript" src="sample.js" charset="uft-8"></script> </head> <body> . . . . . </body> </html>
sample.js
$(function(){ $windowWidth = window.innerWidth; sample = $('#sample'); if($windowWidth <= 751 ) { var screenHeight = window.innerHeight; sample.css('height', UnderFixdeHeight); sample.addClass('sanple'); console.log('テスト'); } /* コメントアウト中のコード */ });
以下解決のヒントになればと思います。
chromeとMicrosoftEdgだと微妙に表示が異なります。
chromeの場合
編集前の正常に表示した際はconsole.log('テスト');がテストと文字化けしている。
編集後の事象が発生した際はconsole.log('テスト');はconsole.log('繝�せ繝�');と表示される
MicrosoftEdgの場合
編集前の正常に表示した際はコンソールの情報にHTML1300: ナビゲーションが発生しました。と表示されている。
編集後の事象が発生した際はconsole.log('テスト');はconsole.log('テスト');と表示される
事象が発生する引き金
sample.js内のコメントアウトしている部分、下記記述を消すだけで事象が発生する
/*
コメントアウト中のコード
*/
smnpe.htmlに<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">を追加(<link rel="stylesheet" type="text/css" href="sample.css">の下に追加)すると事象が発生する
<meta charset="UTF-8">を<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">に変更すると事象が発生する
環境
テキストエディタ brackets
UTF-8で開いています。
sample.js内のコメントアウトしている部分、下記記述を消すだけで事象が発生する
/*
コメントアウト中のコード
*/
smnpe.htmlに<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">を追加(<link rel="stylesheet" type="text/css" href="sample.css">の下に追加)すると事象が発生する
<meta charset="UTF-8">を<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">に変更すると事象が発生する
上記のように対象のファイルを編集しアップロード。
再表示するだけで事象が発生します。
「再表示」は、HTMLファイルを表示していますか？
こちらの言う再表示とはF5またはF5+Controlキーでのリロード、再アクセスです。
リロード後に、URLがJavaScriptファイルのものになっていたりはしませんか？
何度もありがとうございます。
なっていません。
またhtmlとjsのファイル名が拡張子の前が同じなので別にしましたがそれでもなっていませんでした。
しかし、おっしゃられました通りURLをjsのファイル名(新しくした、htmlとは別のファイル名にした方)で打ち込むと事象と同じように画面上に表示されます
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">
や
<script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>
をhtmlに追加しても事象が起きなくなりました！
しかし、chromeのコンソールログのテストの文字化けしてしまっているのは改善されていません。
確かに UTF-8 ですか？
アップロードはどのように行っているのでしょうか？
確かにUTF－8のはずです。
BracketsでもUTF-8にしています。
アップロードはFFFTPで行っています。
また、edgeの場合だとコンソールログのテストの文字は文字化けしていません。
文字化けしているのはchromeなのでchromeに何か原因があるのかな？と思い調べています。
FFFTP の転送モードが ASCIIモード になっていないか確認してみてください。
ASCIIモードになっています。
では、バイナリモードにして試してみてください。
バイナリモードにしても文字化けは解消されませんでした。
ブラウザの開発者ツールでJavaScriptファイルのレスポンスヘッダから content-type を見てもらえますか？
Network タブで当該ファイルを選択すると表示されます。
content-type: application/javascriptとなっています。
回答1件
0
ベストアンサー
手元の環境では問題無くHTMLが表示されますが、JSを読み込む段階のcharsetの指定を間違えてるのが原因かもしれません。
<script type="text/javascript" src="sample.js" charset="uft-8">
utf-8がuft-8になっています。
投稿2020/03/16 04:30
編集2020/03/16 07:44
総合スコア89
ご解答ありがとうございます。
初歩の初歩過ぎて恥ずかしいばかりですが、基本を大事に頑張っていきます。
お力をお貸しいただき、ありがとうございました。
あなたの回答
tips
プレビュー
