前提・実現したいこと
monacaでOnsen UI V2 JS Tabbarのテンプレートを使用し、アプリを製作しております。
そのなかで、外部サイトを埋め込みたいです。
タブの一つに外部サイトを表示させたい部分があるのですが、表示がうまくいきません。
ツールバーやタブバーを残し、その画面内で外部サイトを表示させることです。
試したこと
①InAppBrowser
InAppBrowserを使用すると画面いっぱいに表示されてしまうということと、
枠内ではなく別のブラウザが開くので想定した埋め込み方ではない。
ただ、iOS、Androidともにレスポンシブ対応などは効いており、表示は良好です。
②iframe
iframeを使用して画面に表示させると、画面の幅が指定が効いていないのか、
サイトはレスポンシブ対応されているのに、
横にスクロールしないといけないくらい幅が長く表示さててしまいます。
この現象はこれはiOSのみで発現しており、Androidでは正常に表示がなされています。
現状では以上の2方法を試しているのですが、上記の課題を解決する方法、
または他に何か良い方法はございませんでしょうか。
該当のソースコード
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/angular/angular.min.js"></script> 9 <script src="lib/onsenui/js/onsenui.min.js"></script> 10 <script src="lib/onsenui/js/angular-onsenui.min.js"></script> 11 12 <link rel="stylesheet" href="components/loader.css"> 13 <link rel="stylesheet" href="lib/onsenui/css/onsenui.css"> 14 <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css"> 15 <link rel="stylesheet" href="css/style.css"> 16 17 <script> 18 ons.bootstrap() 19 .controller('AppController', ['$scope', function($scope) { 20 $scope.openPage = function(url){ 21 var ref = cordova.InAppBrowser.open(url, '_self', 'location=yes'); 22 } 23 }]); 24 ons.ready(function() { 25 console.log("Onsen UI is ready!"); 26 }); 27 </script> 28</head> 29<body> 30 <ons-page ng-controller="AppController as app"> 31 <ons-toolbar> 32 <div class="center">My App - {{app.title}}</div> 33 </ons-toolbar> 34 35 <ons-tabbar position="auto"> 36 <ons-tab page="page1.html" label="Page 1" icon="square" active></ons-tab> 37 <ons-tab page="page2.html" label="Page 2" icon="square" ng-click="openPage('http://hogehoge.com/');"></ons-tab> 38 </ons-tabbar> 39 </ons-page> 40 41 <ons-template id="page1.html"> 42 <ons-page ons-show="app.title = 'Page 1'"> 43 <iframe src="http://hogehoge.com/" width="100%" height="100%"> 44 </ons-page> 45 </ons-template> 46 47 <ons-template id="page2.html"> 48 <ons-page ons-show="app.title = 'Page 2'"> 49 <div class="content" style="text-align: center"> 50 <p>Page 2 content</p> 51 </div> 52 </ons-page> 53 </ons-template> 54 55</body> 56</html> 57
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。