###前提・実現したいこと
MonacaでOnsenUIを使ってアプリを開発しています。
###発生している問題・エラーメッセージ
iphoneのMonacaデバッガーをインストールし、その中で、
外部ブラウザで開きたいもの(GoogleMAPや外部のサイト)があります。
onclickの中に外部リンクを開くようのコードを書いて、実行すると
既にログインされています。ログアウトして再度QRコードを読み取ってください。
というアラートが表示されてしまいます。
外部アプリが立ち上がり正常に表示されるのですが、monacaデバッガーアプリに戻るとアラートが表示されてしまいます。
(開くときにもチラッと見えることもあります。)
###該当のソースコード
javascript
1var url = "http://yahoo.com"; 2window.open(url, '_system');
###試したこと
端末の別のアプリの影響なのかと思い、別の端末でも試しましたが同じアラートが表示されます。
また、cordova.InAppBrowserを利用して試しても同じでした。
javascript
1var gps_lat = '35'; 2var gps_lng = '139'; 3var name = '東京タワー'; 4cordova.InAppBrowser.open('https://maps.google.com/maps?ie=UTF8&f=d&dirflg=w&saddr=' + gps_lat + ',' + gps_lng + '&daddr=' + name + '&type=dep', '_system')
上記コードはGoogleMAPでのナビ検索を外部アプリで開くようにしたものです。
###補足情報(言語/FW/ツール等のバージョンなど)
iphone5s、iphone6で発現しました。
Android端末ではアラートは出ませんでした。
この現象はmonacaデバッガー固有の現象(リリースの際に無視出来るもの)なのか、何か対策が出来るものなのかわからない状態です。
解決方法をお教えいただければと思います。
よろしくお願い致します。
###ご質問を受けての補足です
アラートが出ているタイミングと、具体的な「外部ブラウザで開きたいもの」が何なのかもう少し詳しく知りたいですね。
monacaから開くときにたとえば自動的にログインするようになっていたとして、既にGoogleChromeが立ち上がっていたら「既にログインされている」という状態になるのかもしれません。
こちらを受けまして、新規プロジェクトで具体的な発現方法を再現してみました。
MonacaクラウドIDE上から新規プロジェクト
「OnsenUI AngularJS1」でのSplitterMenuをテンプレートで作成し、
メニューを1項目をonclick設定して外部リンクを開くようにしてみました。
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:; 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', function($scope) { 20 this.load = function(page) { 21 $scope.splitter.content.load(page); 22 $scope.splitter.left.close(); 23 }; 24 25 this.toggle = function() { 26 $scope.splitter.left.toggle(); 27 }; 28 29 30 }); 31 32 ons.ready(function() { 33 console.log("Onsen UI is ready!"); 34 35 }); 36 </script> 37</head> 38<body> 39 40 <ons-splitter ng-controller="AppController as app" var="splitter"> 41 <ons-splitter-side side="left" width="220px" collapse swipeable> 42 <ons-page> 43 <ons-list> 44 <ons-list-item ng-click="app.load('home.html')" tappable> 45 Home 46 </ons-list-item> 47 <ons-list-item ng-click="app.load('settings.html')" tappable> 48 Settings 49 </ons-list-item> 50 <ons-list-item onclick="window.open('http://yahoo.co.jp/','_system')" tappable> 51 About 52 </ons-list-item> 53 </ons-list> 54 </ons-page> 55 </ons-splitter-side> 56 <ons-splitter-content page="home.html"></ons-splitter-content> 57 </ons-splitter> 58 59 <ons-template id="home.html"> 60 <ons-page> 61 <ons-toolbar> 62 <div class="left"> 63 <ons-toolbar-button ng-click="app.toggle()"> 64 <ons-icon icon="md-menu"></ons-icon> 65 </ons-toolbar-button> 66 </div> 67 <div class="center"> 68 Main 69 </div> 70 </ons-toolbar> 71 <p style="text-align: center; opacity: 0.6; padding-top: 20px;"> 72 Swipe right to open the menu! 73 </p> 74 </ons-page> 75 </ons-template> 76 77 <ons-template id="settings.html"> 78 <ons-page> 79 <ons-toolbar> 80 <div class="left"> 81 <ons-toolbar-button ng-click="app.toggle()"> 82 <ons-icon icon="md-menu"></ons-icon> 83 </ons-toolbar-button> 84 </div> 85 <div class="center"> 86 Settings 87 </div> 88 </ons-toolbar> 89 </ons-page> 90 </ons-template> 91 92 <ons-template id="about.html"> 93 <ons-page> 94 <ons-toolbar> 95 <div class="left"> 96 <ons-toolbar-button ng-click="app.toggle()"> 97 <ons-icon icon="md-menu"></ons-icon> 98 </ons-toolbar-button> 99 </div> 100 <div class="center"> 101 About 102 </div> 103 </ons-toolbar> 104 </ons-page> 105 </ons-template> 106</body> 107</html>
html
1 <ons-list-item onclick="window.open('http://yahoo.co.jp/','_system')" tappable> 2 About 3 </ons-list-item>
こちらをタップすると、そのタイミングで「既にログインされています。ログアウトして再度QRコードを読み取ってください。」と表示されます。
(タイミングによっては外部リンクを開いた後monacaに戻ってくると表示されることもあります。)
外部アプリとしては「Safari」が立ち上がりました。
この状態でも上記アラートが立ち上がってしまうので困っています。。
どうにかアラートが表示されないようにすることは出来ないものでしょうか?
アラートが表示されなければ正常動作で問題ないのですが・・・
よろしくお願いいたします。