Flutter InAppWebViewでtarget="_blank", window.openを制御する

はじめに

スマホアプリ内でWebページを表示するときに、WebViewを使用すると思います。
Webページの中には、target="_blank"やwindow.openで新しいタブで開くようにしているものがあります。
iOSやAndroidのWebViewではそれぞれ対応が必要ですが、FlutterのInAppWebViewではどのようなことができるか調査しました。

環境

• Flutter 3.10.5
• flutter_inappwebview 5.7.2+3
• url_launcher 6.1.11

サンプルコード

https://github.com/greendrop/flutter_webview_target_blank_sample

InAppWebViewでtarget="_blank" window.openを制御

InAppWebViewでtarget="_blank"やwindow.openを検知・制御するには、onCreateWindow propertyを指定することで可能になります。

Androidの場合、AndroidInAppWebViewOptionsのsupportMultipleWindows propertyをtrueにする必要があります。

onCreateWindowを指定しなかった場合の挙動

onCreateWindowを指定しなかった場合、iOS/Androidともに現在表示しているWebViewで開く挙動になっていました。

まったく反応しないわけではないので、大きな問題にはならないように思われます。
ただ、target="_blank"やwindow.openを指定したことを考えると、現在のWebViewのページはそのままで、新しくWebページを開いてほしいかもしれません。

onCreateWindowを指定し、外部ブラウザで新しくWebページを開く

onCreateWindowを指定することで、target="_blank"やwindow.openを検知・制御することができます。
そこで、WebViewではなく外部ブラウザで新しくWebページを開いてみました。

InAppWebView(
  // ...省略...
  onCreateWindow: (controller, createWindowRequest) async {
    debugPrint(
        'onCreateWindow: ${createWindowRequest.request.url}');
    if (createWindowRequest.request.url != null) {
      var url = createWindowRequest.request.url!;
      if (await canLaunchUrl(url)) {
        await launchUrl(url,
            mode: LaunchMode.externalApplication);
        return true;
      }
    }
  },
  // ...省略...
)

• createWindowRequest.request.urlが新しく開こうとしているWebページのURL
• url_launcherのlaunchUrlで外部ブラウザを起動
• WebViewで遷移しないようにするため、return true

まとめ

Flutter InAppWebViewでtarget="_blank", window.openを制御することができました。
FlutterでWebページを表示していて、target="_blank", window.openが思っていた挙動と異なる場合は、こちらの内容を確認してみるよいと思いました。