ONS-page配下から　jsファイルを読み込みたい

前提・実現したいこと

Navigatorを使って、複数のサンプル画面を作ろうとしてます。
ファイル構成は以下の通りです。

<main 画面.html>　 ---> <sample1画面.html> ---> <sample1.js> (sample1.htmlで使いたいjavascript) ---> <sample2画面.html> ---> <sample2.js> (sample2.htmlで使いたいjavascript) のような感じで。

発生している問題・エラーメッセージ

- navigatorで main画面から、sample1.画面.htmlに移動しても、
　sample1.jsファイルを読み込んでくれません。

- sample1.htmlには、<ons-page>の配下に<script src='./sample1.js'></script>と書いてあり、
　sample1.jsの中には、alert(' i am sample1.js')としてあるのですが、何も起こらなくて困ってます。
- ちなみに、 sample1.htmlの中に、<script> alert('hey')</script>記述すると'hey'と表示されました。

なんとか、sample1.htmlを読み込むときに、sample1.jsのように外部ファイルで定義したjavascriptをloadできるようにしたいのですが、方法をご教授いただけると幸いです。

該当のソースコード

main画面.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: gap: content: https://ssl.gstatic.com; 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/style.css">
    <script src="components/monaca-onsenui/js/onsenui.min.js"></script>
    <script src="components/monaca-onsenui/js/onsenui.js"></script>
    <!-- added next one line(2021-01-13)  
    -->
    <script src="components/monaca-onsenui/js/angular-onsenui.js"></script>
    <script src="components/monaca-onsenui/js/angular-onsenui.min.js"></script>

</head>

<body>

  <ons-navigator swipeable id="myNavigator" >

    <ons-page>
      <ons-toolbar>
        <div class="center">Sand box </div>
      </ons-toolbar>

      <ons-list>
        <ons-list-item tappable modifier="chevron"
          onclick="myNavigator.pushPage('./sample1.html');">
          1. Simply return
        </ons-list-item>        

    </ons-page >

  </ons-navigator>

</body>

</html>

Sample1.htmlです。

  <ons-page id="sapmple1">

    <ons-toolbar>
      <div class="left">
        <ons-back-button>Back</ons-back-button>
      </div>
      <div class="center"> 
        <!-- <span class="myNavigator.topPage.data.title"> -->
          2. Simply return 
      </div>
    </ons-toolbar>

    <div style="text-align: center">
      <ons-button modifier="light" onclick="myNavigator.popPage()">
        Pop Page
      </ons-button>
    </div>

    <script src = "./sample1.js"></script>

<!--
    <script> alert('i am sample1.html');</script>
-->

  </ons-page>

sample1.jsです

// This is a JavaScript file
alert('i am sample1.js');

試したこと

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

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

回答1件

ベストアンサー

Onsen UI + JavaScriptの場合、initイベントで初期化を行います。
そのとき動的にファイルを読み込めば、希望する動きになるかと思います。

JavaScript
1document.addEventListener("init", function (event) {
2  switch (event.target.id) {
3    case "sapmple1":
4      var s = document.createElement("script");
5      s.src = "./sample1.js";
6      event.target.appendChild(s);
7      break;
8  }
9});