前提・実現したいこと
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