

OnsenUIのタブバーを使っているのですが、タブバーの推移先で日付を表示したかったのでjsのDataクラスを使おうとしたのですが、動きませんでした。

タブバーの推移先のhtmlファイルに

[code]

    <script>
      var today = new Date();
      document.write(today);
      </script>
[/code]

と書いておりますが、全く動きません。alertなども試してみましたが動きませんでした。htmlファイルであるはずなのになぜでしょうか？

ぜひ教えてください！よろしくおねがいします！


CC BY-SA 3.0
2015-08-03T06:30:46.137
12982
2015-08-04T05:26:32.087
10775
question
javascript monaca onsen-ui
タブバーの推移先のhtmlファイルでjsを実行する


情報が不足しておりますが、もしかしてHTMLファイルの中身は上記のスクリプトのみでしょうか？  
`Onsen-UI`の設定するページの中身は`ons-page`である必要があります。  
Monacaのサンプルの中に`Onsen UI Tabbar`と言うものがありますので、  
まずは其方でプロジェクトを作成し、構造を解析してみてはいかがでしょうか？

  
  
**追記：**  
OnsenUIを普通のHTMLと同じように遷移するような感じで使っていませんか？  
まず`document.write`は使えません。  
`HTML > BODY > ONS-PAGE`と続き`ONS-PAGE`に追加されなければ表示されません。

また、タブで切替を行い、ページの読み込みを行った際にonLoadは必ずしも発する訳ではありません。

なぜなら、`index.html`から遷移を行っておらず、  
遷移したように見えるのは`index.html`に`ONS-PAGE`埋め込まれており、  
`ONS-PAGE`の表示を切り替えているだけだからです。

タブページでページの初期化を行う方法は2つあります。  
1つは`ons-tabbar`の`on-active-tab-changed`に切替時の関数をつっこむこと  
もう一つは、各ページの読み込み時に初期化を行うこと  
とりあえず、後者について説明させて頂きます。

各ページでonloadを行いたい場合、AngularJSを意識する必要があります。

[code]

    var module = ons.bootstrap('my-app', ['onsen']);
    module.controller('page1_controller', function($scope) {
     ons.ready(function() {
      var today = new Date();
      $("#target").prepend(today.getDate());
     });
    });
[/code]

[code]

    <!DOCTYPE HTML>
    <html lang="ja" ng-app="my-app"><!--モジュール名を指定-->
     <head>
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
     </head>
     <body>
      <ons-page ng-controller="page1_controller"><!--コントローラークラスを割り当て-->
       <ons-toolbar> <div id="target" class="center"> 日 </div> </ons-toolbar> 
      </ons-page>
     </body>
    </html>
[/code]

実際にはタブバーでは無いですが`ons-page`での初期化はこんな感じです。  
あと記述はOnsenUIのバージョンによっても変化しますのでOnsenUIの公式ドキュメントをご覧ください。  
ページに初期化が記述されていればタブ切替の際にページの初期化が走るはずです。


CC BY-SA 3.0
2015-08-03T08:08:57.607
12988
2015-08-04T05:26:32.087
2015-08-04T05:26:32.087
7676
7676
12982
answer


OnsenUI というより AngularJS（jQlite）の仕様だと思われます。

[AngularJS inline script in the included HTML
template](https://stackoverflow.com/questions/21336350/angularjs-inline-
script-in-the-included-html-template)

> jQlite does not support script tags.

`index.html`で最初に`jQuery`を読み込むと`script`タグが読まれるようになりますが、  
エラーが出ますね。

> "Onsen UI require jqLite. Load jQuery after loading AngularJS to fix this
> error. jQuery may break Onsen UI behavior."


CC BY-SA 3.0
2015-08-03T13:46:43.400
12998
2015-08-03T13:46:43.400
2017-05-23T12:38:56.083
-1
3516
12982
answer


page2.html に<script>タグで埋め込んだスクリプトは、恐らく動作しないと思います。  
OnsenUIのソースを読んでいないので断言はできないのですが、タブバーに紐付けたhtmlは単にinnerHTMLでメインページへ埋め込まれるだけだと思いますので、この場合、JavaScriptの仕様として埋め込まれたscriptは動作しません（DOMツリー内には恐らく<script>は存在すると思いますが、存在するだけで動作はしません）。  
解決策としては、index.htmlで読み込むJavaScriptで、page2.htmlに相当するページのpageinitイベントやpostpushイベントなどを使って所望のコードを実行するのが無難ではないでしょうか。


CC BY-SA 3.0
2015-08-03T23:32:29.727
13005
2015-08-03T23:32:29.727
9888
12982
answer