<head> <script src="lib/onsenui/js/onsenui.min.js"></script> <script src="components/loader.js"></script> <link rel="stylesheet" href="lib/onsenui/css/onsenui.css" /> <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css" /> <script> ons.bootstrap(); function startWatch(){ var watch = document.getElementById("watch"); window.setInterval( function(){ var time = new Date(); watch.innerHTML = zero2D(time.getHours()) + ':' + zero2D(time.getMinutes()) + ':' + zero2D(time.getSeconds()); } , 1000); } function zero2D(num){ var str = '0' + num; return str.substr(-2, 2); } </script> </head> <body> <ons-sliding-menu var="mySliderMenu" menu-page="menu.html" main-page="page1.html" swipable="true" swipable-target-width="100px" max-sliding-distance="200px" side="left" type="overlay"> </ons-sliding-menu> <ons-template id="page1.html"> <ons-page> <ons-toolbar> <div class="left"> <!--var="mySliderMenu" をセットしているための関数をタグ内に埋め込む --> <ons-toolbar-button onclick="mySliderMenu.toggleMenu()"> <ons-icon icon="ion-navicon"></ons-icon> </ons-toolbar-button> </div> <div class="center"> Home </div> </ons-toolbar> <div> <h1>Topic1</h1> <p1>a letter</a> </div> </ons-page> </ons-template> <ons-template id="page2.html"> <ons-navigator var="myNavigater"> <ons-page> <ons-toolbar> <div class="left"> <!-- mySliderMenu.toggleMenu()のtoggleMenu()はメニューが開いているときは閉じ閉じているときは開く関数 --> <ons-toolbar-button onclick="mySliderMenu.toggleMenu()"> <ons-icon icon="ion-navicon"></ons-icon> </ons-toolbar-button> </div> <div class="center"> Navigator </div> </ons-toolbar> <div class="wrap1"> <!--var="myNavigator" をセットしているための関数をタグ内に埋め込む --> <div class="item" onclick="myNavigator.pushPage('page1.html')"> <p>Back to home</p> </div> <div id="wa1" onclick="startWatch"> <p>start watch</p> </div> <p id="watch"></p> </div> </ons-page> </ons-navigator> </ons-template> <ons-template id="menu"> <ons-page> <ons-list> <ons-list-item onclick="mySliderMenu.setMainPage('page1.html', {closeMenu: true})"> <ons-icon icon="ion-home"></ons-icon> home </ons-list-item> <ons-list-item onclick="mySliderMenu.setMainPage('page2.html' {closeMenu: true})"> <ons-icon icon="gear"></ons-icon> Navigator </ons-list-item> <ons-list> </ons-page> </ons-template> </body> </html>
上記のように、スライダーメニューとナビゲーターを共存させる、ページ群を作っています。
時計のアプリがあるのですが、ページを遷移し、戻ってきても、ロードイヴェントで、リロードできるようにしたいです。
方法はありますか。
つまり、スクリプトを再度動かしたいのです。
onsenの性質上、mySliderMenu.setMainPage(’page2.html', {closeMenu: true})"
,myNavigator.pushPage('page2.html') とも今あるページに、ページを乗せ重ねるので、スクリプトは移動したページのロードイベントは動きません。
<script> window.addEventListener("load", function(){ var watch = document.getElementById("watch"); window.setInterval( function(){ var time = new Date(); watch.innerHTML = zero2D(time.getHours()) + ':' + zero2D(time.getMinutes()) + ':' + zero2D(time.getSeconds()); } , 1000); } , false); function zero2D(num){ var str = '0' + num; return str.substr(-2, 2); }
よろしくお願いします。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。