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

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

ただいまの
回答率

89.98%

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

受付中

回答 3

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 1,737

1ss411

score 15

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ページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

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

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

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

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • kei344

    2016/11/27 01:11

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

    キャンセル

  • 1ss411

    2016/11/27 01:19

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

    キャンセル

  • kei344

    2016/11/27 01:24

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

    キャンセル

  • 1ss411

    2016/11/27 14:37

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

    キャンセル

回答 3

+1

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

提示のHTMLをチェックした結果です。
イメージ説明

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/11/27 00:40

    ありがとうございます。上記を直したら、googlemapが表示できなくなりました。

    キャンセル

  • 2016/11/27 00:44

    GoogleMapってなんのことじゃ?

    キャンセル

  • 2016/11/27 01:09

    直して動かなくなったコードを編集で書き直しました。
    もし、良かったら指摘をお願いします。

    キャンセル

+1

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/11/27 15: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

    キャンセル

  • 2016/11/27 16:10

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

    キャンセル

  • 2016/11/27 16:21

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

    キャンセル

+1

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

また

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

とは、ここに

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/11/27 00:35

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

    キャンセル

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

  • ただいまの回答率 89.98%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

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