【monaca/Onsen UI】タブバーを常に表示したWeb閲覧アプリを作成したい

前提・実現したいこと

monacaを使用して、Onsen UIを利用した次のようなアプリを開発しています。
(画面例)
![
(1)画面上下に「ヘッダー」「タブバー」「フッター」が常に表示されます。
(2)タブバーをタッチして画面を切り替えることができます。
(3)1,2番目のタブ(画像のtab 1,tab 2)をタッチすると、HTMLで作成したアプリ内ページを表示します。
(4)3番目のタブ(画像のWeb Page)をタッチすると、ヘッダー、タブバー、フッターの表示はそのままに外部ウェブサイトを閲覧することが可能です。(InAppBrowserプラグインは使用しない予定です)

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

上記の(4)を実現するために、ons-pageタグ内にiframeを入れましたが、その状態だとiPhone実機で「monaca」ロゴの画面から進まなくなってしまいます。

こちらの質問 https://teratail.com/questions/87329 と同じ状態になっています。

該当のソースコード

<body>
  <!--ナビゲーター、置くとすればこの場所でしょうか？-->
　<ons-navigator swipeable id="navigator" page="tab3.html"></ons-navigator>
　<ons-page>
    <!--ヘッダー部分-->
    <ons-toolbar>
      <div class="center">ヘッダー</div>
    </ons-toolbar>
    <!--タブバー部分-->
    <ons-tabbar position="bottom" animation="none">
      <ons-tab page="tab1.html" label="Tab 1" icon="md-home" active></ons-tab>
      <ons-tab page="tab2.html" label="Tab 2" icon="square"></ons-tab>
      <ons-tab page="tab3.html" label="Web Page" icon="sticky-note"></ons-tab>
    </ons-tabbar>
   <!--フッター部分-->
    <ons-bottom-toolbar>
      <div style="text-align: center; line-height: 44px">フッター</div>
    </ons-bottom-toolbar>
  </ons-page>

  <!--タブ1-->
  <template id="tab1.html">
    <ons-page id="first-page">
      <p style="text-align: center;">
        This is the first page.
      </p>
    </ons-page>
  </template>

  <!--タブ2-->
  <template id="tab2.html">
    <ons-page id="second-page">
      <p style="text-align: center;">
        This is the second page.
      </p>
    </ons-page>
  </template>

  <!--タブ3、問題が起こっている部分-->
  <template id="tab3.html">
    <ons-page id="page-3">
      <iframe src="https://ja.onsen.io/"></iframe>
    </ons-page>
  </template>

</body>

試したこと

先述の同じような状況の質問 https://teratail.com/questions/87329 がありましたので、
こちらの解決法にあります通り
・onsen UI を最新にアップデート
・ons-templateではなくtemplateを使用するように変更
を試しましたが、状況は変わりませんでした。

先日、同じ問題が起こっていることについての投稿をしましたが、言葉不足の点も多かったため、再投稿いたします。
すみませんが、よろしくお願いいたします。

###追記
デバッグコンソールによると「index.umd.js」という場所でエラーが起こっているようですが、プロジェクト内にそのようなファイルが存在しておらず、どういったエラーなのか見当がつきません。(勉強不足で申し訳ありません。)
念のため、デバッグツールでエラーが起こっている箇所のスクリーンショットを掲載しておきます。

エラーメッセージ：Uncaught TypeError: Object.values is not a function index.umd.js:8

退会済みユーザー

2018/04/24 07:57

エラーは発生していないでしょうか。

m_t_jb

2018/04/24 08:16

monaca localkitのプレビューでは、画面上問題は起こっていませんがコンソール上に以下のようなエラーが出力されておりました。　Uncaught TypeError: Object.values is not a function index.umd.js:8

退会済みユーザー

2018/04/24 08:22

「Object.values は function として扱えませんよ」とエラーが出て止まっているようです。ブラウザ(エンジン)によってはサポートされていないので、別の方法を取るとよいかもしれません。そのあたりのコードも載せていただければアドバイスできるかもしれません。

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

回答2件

MONACAでほぼ同じような画面上下にヘッダー・フッターが入り、コンテンツエリアはiframeでwebページを表示するというアプリを作っている者です。
「InAppBrowserプラグインは使用しない予定」との事ですが、そもそもInAppBrowserプラグインを使用しないと外部webページは開けないのではないでしょうか？

https://docs.monaca.io/ja/reference/cordova_6.5/inappbrowser/

ビルド時にCordovaプラグイン　＞　InAppBrowserを有効化するのをお忘れなく。
（これをやっていなくて、デバッグでは動くが実機で動かないというのを散見します。）

投稿2018/05/01 01:46