monacaのtabber遷移について

前提・実現したいこと

monacaで開発を行おうと思っているのですが
ボタンのスケジュール画面への遷移とタブバーによるスケジュール画面の遷移の両方を実装したいのですが、
タブバーでスケジュール画面へ遷移した際のスケジュール画面の戻るボタン、ホームへの遷移ボタンが機能しなくなります。
ホーム画面上で、スケジュール画面を表示しているだけだからなのでしょうか？
ホーム画面のスケジュールボタンを押した際はスケジュール画面の戻るボタン、ホームへの遷移ボタンが機能するのですが。
わかる方解説をおねがいします！

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

エラーメッセージ

該当のソースコード

html
1<!DOCTYPE HTML>
2<html>
3<head>
4  <meta charset="utf-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover">
6  <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
7  <script src="components/loader.js"></script>
8  <script src="lib/onsenui/js/onsenui.min.js"></script>
9  <link rel="stylesheet" href="components/loader.css">
10  <link rel="stylesheet" href="lib/onsenui/css/onsenui.css">
11  <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css">
12  <link rel="stylesheet" href="css/style.css">
13
14<!--処理-->
15  <script>
16    document.addEventListener('init', function(event) {
17      var page = event.target;
18
19      //ホームページの処理
20      if (page.matches('#home-page')) {
21        //スケジュールボタン押下
22        page.querySelector('#schedule-button').onclick = function() {
23          //htmlを表示
24          document.querySelector('#navigator').pushPage('schedule.html');
25        };
26        //目標管理押下
27        page.querySelector('#goal-button').onclick = function(){
28          document.querySelector('#navigator').pushPage('goal.html');
29        };
30        //ボディチェック押下
31        page.querySelector('#weight-button').onclick = function(){
32          document.querySelector('#navigator').pushPage('weight.html');
33        };
34        //アルバム押下
35        page.querySelector('#album-button').onclick = function(){
36          document.querySelector('#navigator').pushPage('album.html');
37        };
38        //カロリータンパク質押下
39        page.querySelector('#nutrition-button').onclick = function(){
40          document.querySelector('#navigator').pushPage('nutrition.html');
41        };
42        //プロフィール押下
43        page.querySelector('#profile-button').onclick = function(){
44          document.querySelector('#navigator').pushPage('profile.html');
45        };
46
47      //スケジュールページの処理
48      } else if (page.matches('#schedule-page')) {
49        //ホームボタン押下
50        page.querySelector('#home-button').onclick = function() {
51          document.querySelector('#navigator').popPage();
52        };
53
54      //目標ページの処理
55      }else if(page.matches('#goal-page')){
56         page.querySelector('#home-button').onclick = function() {
57          document.querySelector('#navigator').popPage();
58        };
59      
60      //ボディチェックページの処理
61      }else if(page.matches('#weight-page')){
62         page.querySelector('#home-button').onclick = function() {
63          document.querySelector('#navigator').popPage();
64        };
65
66      //アルバムページの処理
67      }else if(page.matches('#album-page')){
68         page.querySelector('#home-button').onclick = function() {
69          document.querySelector('#navigator').popPage();
70        };
71
72      //カロリータンパク質ページの処理
73      }else if(page.matches('#nutrition-page')){
74         page.querySelector('#home-button').onclick = function() {
75          document.querySelector('#navigator').popPage();
76        };
77
78      //プロフィールページの処理
79      }else if(page.matches('#profile-page')){
80         page.querySelector('#home-button').onclick = function() {
81          document.querySelector('#navigator').popPage();
82        };
83      }
84    });
85
86    if (ons.platform.isIPhoneX()) {
87      document.documentElement.setAttribute('onsflag-iphonex-portrait', '');
88      document.documentElement.setAttribute('onsflag-iphonex-landscape', '');
89    }
90  </script>
91</head>
92
93
94<!--中身-->
95<body>
96  <ons-navigator id="navigator" page="common.html"></ons-navigator>
97
98
99  <!-- 共通画面 -->
100  <ons-template id="common.html">
101    <ons-page id="common-page">
102      <ons-tabbar>
103        <ons-tab page="home.html" icon="md-home"></ons-tab>
104        <ons-tab page="schedule.html" icon="fa-calendar"></ons-tab>
105      </ons-tabbar>
106    </ons-page>
107  </ons-template>
108
109  <!--ホーム画面-->
110  <ons-template id="home.html">
111    <ons-page id="home-page">
112      <ons-toolbar>
113        <div class="center">ホーム</div>
114      </ons-toolbar>
115      <div class="content" style="text-align: center">
116        <p>
117          <ons-button id="schedule-button">スケジュール</ons-button>
118          <ons-button id="goal-button">目標管理</ons-button>
119        </p>
120        <p>
121          <ons-button id="weight-button">ボディ<br>チェック</ons-button>
122          <ons-button id="album-button">アルバム</ons-button>
123        </p>
124        <p>
125          <ons-button id="nutrition-button">カロリー<br>タンパク質</ons-button>
126          <ons-button id="profile-button">プロフィール</ons-button>
127        </p>
128      </div>
129      
130    </ons-page>
131  </ons-template>
132
133  <!--スケジュール画面-->
134  <ons-template id="schedule.html">
135    <ons-page id="schedule-page">
136      <ons-toolbar>
137        <div class="left"><ons-back-button>home</ons-back-button></div>
138        <div class="center">スケジュール</div>
139      </ons-toolbar>
140      <div class="content" style="text-align: center">
141        <ons-button id="home-button">ホーム</ons-button>
142      </div>
143    </ons-page>
144  </ons-template>
145
146  <!---目標画面-->
147  <ons-template id="goal.html">
148    <ons-page id="goal-page">
149      <ons-toolbar>
150        <div class="left"><ons-back-button>home</ons-back-button></div>
151        <div class="center">目標</div>
152      </ons-toolbar>
153      <div class="content" style="text-align: center">
154        <ons-button id="home-button">ホーム</ons-button>
155      </div>
156    </ons-page>
157  </ons-template>
158
159  <!---ボディチェック画面-->
160  <ons-template id="weight.html">
161    <ons-page id="weight-page">
162      <ons-toolbar>
163        <div class="left"><ons-back-button>home</ons-back-button></div>
164        <div class="center">ボディチェック</div>
165      </ons-toolbar>
166      <div class="content" style="text-align: center">
167        <ons-button id="home-button">ホーム</ons-button>
168      </div>
169    </ons-page>
170  </ons-template>
171
172  <!---アルバム画面-->
173  <ons-template id="album.html">
174    <ons-page id="album-page">
175      <ons-toolbar>
176        <div class="left"><ons-back-button>home</ons-back-button></div>
177        <div class="center">アルバム</div>
178      </ons-toolbar>
179      <div class="content" style="text-align: center">
180        <ons-button id="home-button">ホーム</ons-button>
181      </div>
182    </ons-page>
183  </ons-template>
184
185  <!---カロリータンパク質画面-->
186  <ons-template id="nutrition.html">
187    <ons-page id="nutrition-page">
188      <ons-toolbar>
189        <div class="left"><ons-back-button>home</ons-back-button></div>
190        <div class="center">カロリータンパク質</div>
191      </ons-toolbar>
192      <div class="content" style="text-align: center">
193        <ons-button id="home-button">ホーム</ons-button>
194      </div>
195    </ons-page>
196  </ons-template>
197
198  <!---プロフィール画面-->
199  <ons-template id="profile.html">
200    <ons-page id="profile-page">
201      <ons-toolbar>
202        <div class="left"><ons-back-button>home</ons-back-button></div>
203        <div class="center">プロフィール</div>
204      </ons-toolbar>
205      <div class="content" style="text-align: center">
206        <ons-button id="home-button">ホーム</ons-button>
207      </div>
208    </ons-page>
209  </ons-template>
210</body>
211</html>
212

試したこと

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

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

回答1件

ons-navigatorでページ遷移を行った場合、popPage()やons-back-buttonによって前ページに戻ることができますが、ons-tabbarはons-navigatorとは関係なくページの切り替えを行います。

スケジュール画面のinitイベントは、ons-tabのpage属性やons-navigatorのpushPage()の場合に発火するので、ons-tabのpage属性の場合は、タブバーのホームをクリックすることで実現できます。

なお、ons-back-buttonはons-navigatorのページ遷移で使うことが前提なので、ホームタブ→スケジュール→ons-back-button→スケジュールタブと操作すると、スケジュール画面のons-back-buttonが消えてしまうので、注意が必要です。

JavaScript
1      //スケジュールページの処理
2      } else if (page.matches('#schedule-page')) {
3        if (document.querySelector('#navigator').topPage.id == "common-page") {
4          // ons-tab→スケジュール
5          page.querySelector("ons-back-button").disconnectedCallback();
6          page.querySelector("ons-back-button").onclick = function () {
7            document.querySelector("ons-tab[page='home.html']").click();
8          };
9          page.querySelector('#home-button').onclick = function () {
10            document.querySelector("ons-tab[page='home.html']").click();
11          };
12        } else {
13          // ons-navigator→スケジュール
14          page.querySelector('#home-button').onclick = function() {
15            document.querySelector('#navigator').popPage();
16          };
17        }