質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
Monaca

「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

Q&A

解決済

2回答

2064閲覧

Monaca inappbrowser内の外部リンクをブラウザで開きたい

majesty_452

総合スコア5

Monaca

「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

0グッド

1クリップ

投稿2020/03/28 06:06

前提・実現したいこと

お世話になります。
当方プログラミングの知識があまりない初心者で、
的外れ・不適切な質問でしたらご容赦ください。

①はじめてMonacaを使用してWebページを表示するアプリを作成したいと考えています。
②InAppBrowserプラグイン追加し、画面を表示することはできました。
しかし、InAppBrowser内でクリックされた外部サイトへのリンクをシステムブラウザで起動することができず
悩んでおります。
③WebページはForguncyというソフトで作成しており、直接htmlタグの編集等ができません。
Monacaのアプリ側でこの問題を解決することはできるのでしょうか?

丸2日程度調べましたが、理解に至ることができませんでした。
https://qiita.com/ookishin2018/items/abe20983358f463b4cbc
この内容が一番求めているものに近いかと思いましたが、どのように実装してよいかわかりません。
大変申し訳御座いませんが御指導いただけますと幸いです。

該当のソースコード

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: content: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'"> <script src="components/loader.js"></script> <link rel="stylesheet" href="components/loader.css"> <link rel="stylesheet" href="css/style.css"> </head> <body> <script> var ref = window.open('https://ja.monaca.io/','_self','location=no'); </script> </body> </html>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

in-app-browserに'beforeload'というインターセプト用のオプションがあります。

これを使うとHTTPのリクエスト実行を処理する前にbeforeloadイベントを発生させることができます。
コールバックを実行しない限りinappbrowserの処理はキャンセルされます。

このイベント内に「外部URLであればコールバックは実行せずwindow.open(URL, '_system')で開く」という処理を組めば外部サイトだけを通常ブラウザで開けるかもしれません。

Webサイトの実装がHTTP GETではなくHTTP POSTだった場合は使えない様ですが。
(beforeloadはPOSTメソッド非対応)

投稿2020/04/03 02:04

編集2020/04/03 02:05
ttttth

総合スコア31

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

majesty_452

2020/04/04 09:54

皆様、ありがとうございました。 メッセージ機能で外部リンクをブラウザで開くことができました。 ただ、今度はブラウザを開いてからアプリに戻るとリンクボタンが反応しなくなるという問題が生じてしまいました…
guest

0

ベストアンサー

試していないですが、恐らくできます。InAppBrowserのexecuteScriptを使って、ForguncyのHTML上にあるリンクをクリックした際のアクションをジャックして、メッセージ機能を使ってアプリ側のJavaScriptにURLを送ります。そして、アプリ側のJavaScriptでURLを開けばOKかと。

  1. Forguncyのリンククリックイベントを取得できるか試す

https://docs.monaca.io/ja/reference/cordova_9.0/inappbrowser/ のexecuteScriptを参考に。ForguncyのUIはJavaScriptで動的に作られていると思うので、jQueryなどで動的なDOMに対してもクリックイベントを補足できる必要がありそうです。 https://qiita.com/negi/items/6ec0d3cedba499eac81a$(document).on の書き方です。
2. メッセージ機能を使ってInAppBrowser側とアプリ側のJavaScriptで通信する
https://qiita.com/ookishin2018/items/1ba5dd0924373b67977e を参考に
3. 1でリンクを取得し、2でアプリ側のJavaScriptに送信。後はwindow.openで外部ブラウザを立ち上げられるはず

といった手順になるかと思います。

投稿2020/03/28 07:58

moongift

総合スコア250

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

majesty_452

2020/03/28 09:37

ご回答ありがとうございます。 forguncyではボタンを押したときに「javascriptコードの実行」というコマンドを設定できますが、 そちらに1と2の送信を記述、アプリ側に2の受信とwindow.openを記述するという感じでしょうか。 初歩的な質問で申し訳ございません。
moongift

2020/03/28 09:55

そうですね。ボタンを押したタイミングでJavaScriptを実行できるのであれば、1は不要かと思います。2のメッセージング機能を実装して、アプリ側にURLを送れるか確認してください。URLさえ送れれば、後は3をアプリ側で実装すればOKです。
majesty_452

2020/03/28 10:27

ありがとうございます。色々調べていてこちらの内容がかなり近いと思ったのですが、 https://qiita.com/aoyahk/items/9406e80f215c1034b7f2 ■ メッセージを送る側(inappbrowser内) の内容をforguncy側に記述、 ■ メッセージを受け取る側(アプリ内) の内容をmonaca側に記述でよろしいでしょうか。 また大変初歩的で心苦しいのですが、どのようにコード修正が必要かも アドバイス頂けますと幸いです。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問