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

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

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

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

Monaca

「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

受付中

javascript <script></script>部分が読み込まれない件

1ss411
1ss411

総合スコア17

JavaScript

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

Monaca

「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

3回答

0評価

1クリップ

3039閲覧

投稿2016/11/26 14:31

編集2022/01/12 10:55

monacaを用いてアプリを作っています。

a.htmlからb.htmlへページ遷移をするときに<script></script>部分が読み込まれていないことが分かりました。それ以外はきちんと動いています。

いろいろと調べてはいるのですが、まったくわからないです。

以下が問題のコードです。

//a.html <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=no"> <meta http-equiv="Content-Security-Policy" content="default-src *; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'"> <link rel="stylesheet" href="components/loader.css"> <script src="components/loader.js"></script> <script type="text/javascript"></script> </head> <body> <h1>タイトル</h1> <input type="button" onclick="location.href='b.html'" value="次へ" > </body> </html>
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1, user-scalable=no"> <meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'"> <script src="components/loader.js"></script> <link rel="stylesheet" href="components/loader.css"> <link rel="stylesheet" href="css/styles.css"> <script src="js/cssua.min.js"></script> <script src="js/app.js"></script> </head> <body> <script> ~この部分が読み込まれないです。~ </script> </body> <body onload="start_func()"> <div id="map_canvas" style="width:100%; height:100%"> 位置情報を取得しています.... </div> </body> </html>

詳しくコードを書きます。bodyを1つにしたら、今度は、googlemapが表示されないというエラーが発生して、どうしたらいいのか分からなくなってきました。もちろんページ遷移はうまくいきません。

<!DOCTYPE HTML> <html> <head> <title>AAA</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1, user-scalable=no"> <meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'"> <script src="components/loader.js"></script> <link rel="stylesheet" href="components/loader.css"> <link rel="stylesheet" href="css/styles.css"> <script src="js/cssua.min.js"></script> <script src="js/app.js"></script> <script async defer src="https://maps.googleapis.com/maps/api/js?key=[apiキー]&callback=initMap"> </script> <script> var message;callback=initMap // 位置情報取得 function start_func(){ get_location(); } // ( 1 )位置情報を取得します。 function get_location(){ if (navigator.geolocation) { // 現在の位置情報取得を実施 正常に位置情報が取得できると、 // successCallbackがコールバックされます。 navigator.geolocation.getCurrentPosition(successCallback,errorCallback); } else { message = "本ブラウザではGeolocationが使えません"; document.getElementById("area_name").innerHTML= message; } } // ( 2 )位置情報が正常に取得されたら function successCallback(pos) { var Potition_latitude = pos.coords.latitude; var Potition_longitude = pos.coords.longitude; // 位置情報が取得出来たらGoogle Mapを表示する initialize(Potition_latitude,Potition_longitude); } function errorCallback(error) { message = "位置情報が許可されていません"; document.getElementById("area_name").innerHTML = message; } var lat = 0; var lng = 0; // ( 3 )Google Map API を使い、地図を読み込み function initialize(x,y) { // Geolocationで取得した座標を代入 var myLatlng = new google.maps.LatLng(x,y); var map = new google.maps.Map(document.getElementById("map_canvas"),{ zoom: 17, center: myLatlng, mapTypeId: google.maps.MapTypeId.HYBRID }); // MapTypeId に、地図タイプを指定 // HYBRID 衛星画像と主要な通りが表示されます // ROADMAP 通常の地図画像が表示されます // SATELLITE 衛生画像が表示されます。 // TERRAIN 地形や植生などのマッピングをします。 // データベースにある災害の位置情報 //var markerData = [{icon:}]; var marker0 = new google.maps.Marker({ position: myLatlng, map:map, draggable: true // ドラッグ可能にする }); // 簡単な情報ウィンドウを作成する var infowindow = new google.maps.InfoWindow({ content: "現在地" }); infowindow.open(map, marker0); // 作成したマーカーに対するタッチクリックイベントをキャプチャする google.maps.event.addListener(marker0, 'click', function() { infowindow.open(map, marker0); }); // マーカーのドロップ(ドラッグ終了)時のイベント google.maps.event.addListener(marker0, 'dragend', function(ev){ // 緯度・経度取得 lat = ev.latLng.lat(); lng = ev.latLng.lng(); //alert(lat); }); } function koshin(){ location.reload(); } //google.maps.event.addDomListener(window, 'load', initialize); </script> </head> <body onload="start_func()"> <div id="map_canvas" style="width:100%; height:100%"> 位置情報を取得しています.... </div> <div data-role="page" id="a"> <div data-role="header" data-position="fixed" data-theme="c"> <h1>位置情報登録画面</h1> <a href="information.html" data-icon="add" class="ui-btn-right">登録</a> <a href="index.html" data-icon="back" class="ui-btn-left">戻る</a> </div> </div> </body> </html>

エラーは、コードがダメと言われているわけではありません。mapが表示できないということです。戻るボタンを押したときに、一瞬だけ表示されることがあり、理由が分からないです。

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

kei344

2016/11/26 16:11

「エラーが出ます」では無く、エラー文を具体的に質問に追記ください。
1ss411

2016/11/26 16:19

書き方が悪かったです。訂正をしました。
1ss411

2016/11/27 05:37

エラーは出ていませんでした。

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

同じタグがついた質問を見る

JavaScript

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

Monaca

「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。