Monacaでアプリの開発をしています。
【実現したいこと】
0. toolbarを用意した画像を指定する
0. iframeを使ってウェブサイトの情報を表示させる
【発生しているエラー】
実機デバッグで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"> 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 10 <link rel="stylesheet" href="components/loader.css"> 11 <link rel="stylesheet" href="lib/onsenui/css/onsenui.css"> 12 <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css"> 13 <link rel="stylesheet" href="css/style.css"> 14 15 <script> 16 ons.ready(function() { 17 console.log("Onsen UI is ready!"); 18 }); 19 20 document.addEventListener('show', function(event) { 21 var page = event.target; 22 var titleElement = document.querySelector('#toolbar-title'); 23 24 }); 25 </script> 26</head> 27<body> 28 <ons-page> 29 <ons-toolbar> 30 <div class="center" style="background:url('img/pl_logo.png') center bottom no-repeat;background-size:contain;"> 31 </div> 32 </ons-toolbar> 33 <ons-tabbar position="bottom"> 34 <ons-tab page="tab1.html" active> 35 <div class="my-icon1"><img src="img/nav_footer1.png" alt="オリジナルアイコン" width="100%" height="100%"/> 36 </div> 37 </ons-tab> 38 <ons-tab page="tab2.html"> 39 <div class="my-icon2"><img src="img/nav_footer2.png" alt="オリジナルアイコン" width="100%" height="100%"/> 40 </div> 41 </ons-tab> 42 <ons-tab page="tab3.html"> 43 <div class="my-icon3"><img src="img/nav_footer3.png" alt="オリジナルアイコン" width="100%" height="100%"/> 44 </div> 45 </ons-tab> 46 <ons-tab page="tab4.html"> 47 <div class="my-icon4"><img src="img/nav_footer4.png" alt="オリジナルアイコン" width="100%" height="100%"/> 48 </div> 49 </ons-tab> 50 <ons-tab page="tab5.html"> 51 <div class="my-icon5"><img src="img/nav_footer5.png" alt="オリジナルアイコン" width="100%" height="100%"/> 52 </div> 53 </ons-tab> 54 </ons-tabbar> 55 </ons-page> 56 57 <template id="tab1.html"> 58 <ons-page id="first-page"> 59 <div class="content1"> 60 <img src="img/pl_main.png" alt="" width="100%" height="100%"/> 61 </div> 62 <div class="content2"> 63 <img src="img/tl_main.png" alt="" width="100%" height="100%"/> 64 </div> 65 </ons-page> 66 </template> 67 68 <template id="tab2.html"> 69 <ons-page id="second-page"> 70 71 </ons-page> 72 </template> 73 <template id="tab3.html"> 74 <ons-page id="third-page"> 75 <iframe src="https://ja.monaca.io/" height="100%" width="100%"> 76 </iframe> 77 </ons-page> 78 </template> 79 <template id="tab4.html"> 80 <ons-page id="fourth-page"> 81 <p>本文</p> 82 </ons-page> 83 </template> 84 <template id="tab5.html"> 85 <ons-page id="fifth-page"> 86 <p>本文</p> 87 </ons-page> 88 </template> 89</body> 90</html>
【そのほかの情報】
- nav_footerの画像サイズは128×80で画面下部に5つ並ぶように配置しています。
- toolbarの画像サイズは640×90のものを使用しています。
- toolbarの画像のしていをbackground-imageではなく、<img>タグで指定するとエラーは発生しませんが、画像やWebViewで表示された画面の拡縮がおかしくなります。
- toolbarに画像を配置するのと、iframeを使ってWebViewを同時に表示させるのを両方実装しようとした際にエラーになります。(※どちらか片方のコードを消すとエラーは解消されます)
- WebViewの表示方法は、下記の過去の質問を参考に実装しています。https://teratail.com/questions/87329
画像の指定方法など、使い方が適切でないところ、
また、誤ったコードがあり、解決方法をご存知のかたがいらっしゃいましたら、
ご教授いただけないでしょうか。
どうか、宜しくお願いいたします。
あなたの回答
tips
プレビュー