3

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

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

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

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

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

3 件の回答 3

1

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

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."

1
  • なるほど。仕様なのですね。めんどくさいですね。 Commented 2015年8月4日 8:31
1

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

1
  • ありがとうございます。そうなのかと思い、調べてみたところ、セキュリティの問題で動作できない様になっているのですね! ありがとうございます、なんとかできました。 Commented 2015年8月4日 8:33
1

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



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

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

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

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

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

var module = ons.bootstrap('my-app', ['onsen']);
module.controller('page1_controller', function($scope) {
	ons.ready(function() {
		var today = new Date();
		$("#target").prepend(today.getDate());
	});
});
<!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>

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

4
  • 回答ありがとうございます!情報不足ですいません!! index.htmlはそのままで、ons-pageタグもあります。僕がjsを動作させたいのはpage2.htmlの方がなのですが、 <ons-page> <ons-toolbar> <div class="center"> 日 </div> </ons-toolbar> <script> var today = new Date(); </script> </ons-page> と書いているのですが、動きません。何がいけないのでしょうか? Commented 2015年8月3日 16:37
  • 追記しました。ons-pageの初期化のタイミングで更新すれば良いかと思います。
    – Sieg
    Commented 2015年8月4日 5:27
  • ありがとうございます!おっしゃるとおり、普通のhtmlの推移だと思っておりました。 謎が晴れてスッキリです。ありがとうございました。 Commented 2015年8月4日 8:31
  • monaca.io(クラウド)のIDEで開発を行う場合、コンソールなどのツールを使用することが出来ます。 検証端末にデバッガをインストールし、IDEよりプロジェクトを開き同期を行うと、Elementタブより現在のHTMLの状態を閲覧することが出来ます。 一番疑問になっているのがHTML構造だと思いますので、一度開いて、どういうHTMLになっていて、どういう変化をしていくのか見てみると理解が早まるかもしれません。
    – Sieg
    Commented 2015年8月4日 8:50

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。