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

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が表示できないということです。戻るボタンを押したときに、一瞬だけ表示されることがあり、理由が分からないです。

kei344

2016/11/26 16:11

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

1ss411

2016/11/26 16:19

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

kei344

2016/11/26 16:24

エラーは出ていませんか？デベロッパーツールで確認してみてください。http://eng-entrance.com/javascript-display-error

1ss411

2016/11/27 05:37

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

行動規範の内容に同意します

回答3件

bodyタグがなぜ2つあるのかが気になります。
bodyタグは一つにしてください。

また

～この部分が読み込まれないです。～

とは、ここに

javascript
1window.alert('この部分が読み込まれた');

としても alertが表示されないということでしょうか？

投稿2016/11/26 14:40

Y.H.

総合スコア7914

1ss411

2016/11/26 15:35

そうです。読み込まれないです。

行動規範の内容に同意します

HTMLは body要素を1つしかもてません。

投稿2016/11/26 14:39

kei344

総合スコア69398

1ss411

2016/11/26 15:48 編集

1つにしたら、なぜかgooglemapが表示されなくなります。以下がbodyを1つにしたものです。表示できない理由が分からないです。 <!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=「キー」&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>

kei344

2016/11/26 15:42

コメント欄ではなく、質問文に「追記」してください。（決して元のコードを消さないでください）

1ss411

2016/11/26 16:08

投稿をしました。すみません、お手数かけます。。

kei344

2016/11/27 05:51

style="width:100%; height:100%" を style="width:100%; height:100vh" に変えてみてください。

1ss411

2016/11/27 06:42

ページのヘッダー部分を一番上に持ってきたら、表示できるようになりました。 styleのところも100％を100vhに変え、マップ自体の表示は可能になりました。有難うございます。あとは、一番の問題のページ遷移なのですが、ページが読み込まれたらリロードするといった関数を用いたりもしたのですが、うまくいきません。

kei344

2016/11/27 06:56

&callback=initMapと指定しているのにその関数が無く、onloadでstart_funcを呼んでいるのがそもそも問題では。 <script async defer src="https://maps.googleapis.com/maps/api/js?key=「キー」&callback=initMap"></script> onload="start_func() を削除して。start_func をinitMapにリネームとか。あと↓これの「callback=initMap」は無意味なので削除。 var message;callback=initMap

1ss411

2016/11/27 07:10

onload＝"start_func()"を、削除してリネームしたのですがマップが表示されません。。それと、このhtmlからまた次のページ（ボタンを押したらカメラが起動するといったページ）へ遷移するのですが、それもマップのhtml同様にページをリロードさせないとボタンを押してもカメラは起動されないです。

kei344

2016/11/27 07:21

ページがブラウザに渡り、準備が出来たことを待って実行すべき処理というものがあり、それが出来ていないのだろうと推測は出来ますが、関連する js やどのような実装がされているかもわからないので、問題の特定が出来ません。

行動規範の内容に同意します

HTMLの構文チェックツールです
Another HTML lint

提示のHTMLをチェックした結果です。