How can I open new window in flutter inappwebview package?

Question

I am a junior Flutter app programmer! I have a unsolved issue about Flutter inappwebview's open new tab problem. If you know the solution, please share this to me..

Problem:

I want to open phone certification in InAppBroswer. When I operate ‘PASS App’(Phone Certificate Service) , the HTML code’s specific function will be operated.(this function call window.open in HTML) on a new tab page. but, there is a blank page without any information.

Question:

How can I make a new tab on webApp page? I already check the solution that is about making new alert dialog to be a new tab. But I don’t understand why the 'openDRMOKWindow'(it's HTML code) is not working in the webappview. Please read the HTML code… and if you know the solution to open Phone certificate page on a new page, let me know the solution.

Info:

If you press one of blue buttons, the Pass (phone certificate app) will be started

enter image description here

The HTML code of the blue button is

본인인증

openDRMOKWindow function is

function openDRMOKWindow(type, coworker, service, a_type, kitid, client_key, machine){ window.name = "parentPage"; DRMOK_window = window.open('', 'DRMOKWindow', 'width=425, height=550, resizable=0, scrollbars=no, status=0, titlebar=0, toolbar=0, left=435, top=250' );

     $.ajax({
       url: '/agreements/ctrl/index_session_create.php',
       method : "post",
       dataType : "text",
       data : {
         type : type,
         coworker : coworker,
         service : service,
         a_type : a_type,
         kitid : kitid,
         client_key : client_key,
         machine : machine
       }
     });

     document.form1.action = 'https://www.mobile-ok.com/popup/common/hscert.jsp';
     document.form1.target = 'DRMOKWindow';
     document.form1.submit();
   }

The pass app looks like this

enter image description here

Package version: flutter_inappwebview: ^5.3.2

Flutter doctor:

Flutter (Channel stable, 2.8.1, on macOS 12.0.1 21A559 darwin-x64, locale ko-KR) • Flutter version 2.8.1 at /Users/taehunku/Downloads/flutter2.2.3 • Upstream repository https://github.com/flutter/flutter.git • Framework revision 77d935af4d (9주 전), 2021-12-16 08:37:33 -0800 • Engine revision 890a5fca2e • Dart version 2.15.1

[✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0) • Android SDK at /Users/taehunku/Library/Android/sdk • Platform android-32, build-tools 31.0.0 • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java • Java version OpenJDK Runtime Environment (build 11.0.10+0-b96-7281165) • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 13.2.1) • Xcode at /Users/taehunku/Downloads/Xcode.app/Contents/Developer • CocoaPods version 1.11.2

[✓] Chrome - develop for the web • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2020.3) • Android Studio at /Applications/Android Studio.app/Contents • Flutter plugin can be installed from: 🔨 https://plugins.jetbrains.com/plugin/9212-flutter • Dart plugin can be installed from: 🔨 https://plugins.jetbrains.com/plugin/6351-dart • Java version OpenJDK Runtime Environment (build 11.0.10+0-b96-7281165)

[✓] VS Code (version 1.60.0) • VS Code at /Users/taehunku/Downloads/Visual Studio Code.app/Contents • Flutter extension version 3.27.0

[✓] Connected device (1 available) • Chrome (web) • chrome • web-javascript • Google Chrome 98.0.4758.80

Full HTML Code:


        개인정보 수집·이용 동의서
        
        
        
        
        
        
        
        
        
    

    
    
        
          
        
        
          

            
            
            

            

            유전자 검사 동의서
            본인(보호자) 인증 후
유전자 검사 신청이 가능합니다.
              
                              
              
                            DTC 유전자 검사 소개
              📋 제출한 동의서 pdf 파일 다운로드 가이드
              
              
              
                [ 안 내 ]유전자 검사 동의서는 서비스 진행을 위해
필수적으로 제출해야 합니다.최초 제출 후 5일 이내에는 재작성이 가능합니다.              

            
            
  
    (주) 마크로젠
    주소: 서울특별시 금천구 벚꽃로 254 10층(가산동, 월드메르디앙 1차)

      02-2180-7220 |
      hello@macrogen.com

        카카오톡 ID: 마이지놈스토리
    개인정보처리방침
    대표: 이수강 | 사업자등록번호: 208-81-24115
    COPYRIGHT © Macrogen, Inc. ALL RIGHTS RESERVED.
  

        
    

    



  
    
      
    
  
검사 대상자가 19세 이상일 경우 ‘본인인증’을,
19세 미만일 경우 ‘보호자 본인인증’을 눌러
유전자 검사 동의서 작성 및 신청을 진행해 주세요.

Dart Code:

import 'dart:async';
import 'dart:collection';
import 'dart:convert';
import 'dart:io';
import 'dart:typed_data';
import 'package:flutter/material.dart';
import 'package:flutter_inappwebview/flutter_inappwebview.dart';
import 'package:url_launcher/url_launcher.dart';

Future main() async {
  WidgetsFlutterBinding.ensureInitialized();

  if (Platform.isAndroid) {
    await AndroidInAppWebViewController.setWebContentsDebuggingEnabled(true);
  }

  runApp( const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  _MyAppState createState() => new _MyAppState();
}

class _MyAppState extends State {

  final GlobalKey webViewKey = GlobalKey();

  InAppWebViewController? webViewController;


    InAppWebViewGroupOptions options = InAppWebViewGroupOptions(
      crossPlatform: InAppWebViewOptions(

        javaScriptCanOpenWindowsAutomatically: true,
        javaScriptEnabled: true,
        useOnDownloadStart: true,
        useOnLoadResource: true,
        cacheEnabled: true,
        preferredContentMode: UserPreferredContentMode.MOBILE,
        useShouldInterceptAjaxRequest: true,
        useShouldOverrideUrlLoading: true,
        mediaPlaybackRequiresUserGesture: true,
        allowFileAccessFromFileURLs: true,
        allowUniversalAccessFromFileURLs: true
      ),
      android: AndroidInAppWebViewOptions(
        useHybridComposition: true,
      ),
      ios: IOSInAppWebViewOptions(
        allowsAirPlayForMediaPlayback: true,
        suppressesIncrementalRendering: true,
        ignoresViewportScaleLimits: true,
        selectionGranularity: IOSWKSelectionGranularity.DYNAMIC,
        isPagingEnabled: true,

        enableViewportScale: true,
        sharedCookiesEnabled: true,
        automaticallyAdjustsScrollIndicatorInsets: true,
        useOnNavigationResponse: true,

        allowsInlineMediaPlayback: true,
      ));

  late PullToRefreshController pullToRefreshController;
  String url = "";
  double progress = 0;
  final urlController = TextEditingController();

  @override
  void initState() {
    super.initState();

    pullToRefreshController = PullToRefreshController(
      options: PullToRefreshOptions(
        color: Colors.blue,
      ),
      onRefresh: () async {
        if (Platform.isAndroid) {
          webViewController?.reload();
        } else if (Platform.isIOS) {
          webViewController?.loadUrl(
              urlRequest: URLRequest(url: await webViewController?.getUrl()));
        }
      },
    );
  }

  @override
  void dispose() {
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          appBar: AppBar(title: Text("Official InAppWebView website")),
          body: SafeArea(
              child: Column(children: [
                TextField(
                  decoration: InputDecoration(
                      prefixIcon: Icon(Icons.search)
                  ),
                  controller: urlController,
                  keyboardType: TextInputType.url,
                  onSubmitted: (value) {
                    var url = Uri.parse(value);
                    if (url.scheme.isEmpty) {
                      url = Uri.parse("https://www.google.com/search?q=" + value);
                    }
                    webViewController?.loadUrl(
                        urlRequest: URLRequest(url: url));
                  },
                ),
                Expanded(
                  child: Stack(
                    children: [
                      InAppWebView(
                        key: webViewKey,
                        initialUrlRequest:
                        URLRequest(url: Uri.parse("https://www.my-genomestory.com/agreements/index/bestf/?service=genome&clientKey=abcd12345&machine=app")),
                        initialOptions: options,
                        pullToRefreshController: pullToRefreshController,
                        onWebViewCreated: (controller) {
                          webViewController = controller;
                        },
                      onCreateWindow: (InAppWebViewController,createWindowRequest)async{
                   
                          InAppWebViewController.addJavaScriptHandler(handlerName: 'openDRMOKWindow', callback: (args){
                            print(args);
                          });
                        showDialog(
                          context: context,
                          builder: (context) {
                            return AlertDialog(
                              content: Container(
                                width: MediaQuery.of(context).size.width,
                                height: 400,
                                child: InAppWebView(
                                  // Setting the windowId property is important here!
                                  windowId: createWindowRequest.windowId,
                                  initialUrlRequest:
                                  URLRequest(url: Uri.parse("https://www.mobile-ok.com/popup/common/hscert.jsp")),
                                  initialOptions: InAppWebViewGroupOptions(
                                    crossPlatform: InAppWebViewOptions(

                                    ),
                                  ),
                                  onWebViewCreated: ( controller) {

                                  },

                                ),
                              ),
                            );
                          },
                        );
                      },

                        onLoadStart: (controller, url) {
                          setState(() {
                            this.url = url.toString();
                            urlController.text = this.url;
                          });
                        },
                        androidOnPermissionRequest: (controller, origin, resources) async {
                          return PermissionRequestResponse(
                              resources: resources,
                              action: PermissionRequestResponseAction.GRANT);
                        },
                        shouldOverrideUrlLoading: (controller, navigationAction) async {
                          var uri = navigationAction.request.url!;

                          if (![ "http", "https", "file", "chrome",
                            "data", "javascript", "about"].contains(uri.scheme)) {
                            if (await canLaunch(url)) {
                              // Launch the App
                              await launch(
                                url,
                              );
                              // and cancel the request
                              return NavigationActionPolicy.CANCEL;
                            }
                          }

                          return NavigationActionPolicy.ALLOW;
                        },
                        onLoadStop: (controller, url) async {
                          pullToRefreshController.endRefreshing();
                          setState(() {
                            this.url = url.toString();
                            urlController.text = this.url;
                          });
                        },
                        onLoadError: (controller, url, code, message) {
                          pullToRefreshController.endRefreshing();
                        },
                        onProgressChanged: (controller, progress) {
                          if (progress == 100) {
                            pullToRefreshController.endRefreshing();
                          }
                          setState(() {
                            this.progress = progress / 100;
                            urlController.text = this.url;
                          });
                        },
                        onUpdateVisitedHistory: (controller, url, androidIsReload) {
                          setState(() {
                            this.url = url.toString();
                            urlController.text = this.url;
                          });
                        },
                        onConsoleMessage: (controller, consoleMessage) {
                          print(consoleMessage);
                        },
                      ),
                      progress < 1.0
                          ? LinearProgressIndicator(value: progress)
                          : Container(),
                    ],
                  ),
                ),
                ButtonBar(
                  alignment: MainAxisAlignment.center,
                  children: [
                    ElevatedButton(
                      child: Icon(Icons.arrow_back),
                      onPressed: () {
                        webViewController?.goBack();
                      },
                    ),
                    ElevatedButton(
                      child: Icon(Icons.arrow_forward),
                      onPressed: () {
                        webViewController?.goForward();
                      },
                    ),
                    ElevatedButton(
                      child: Icon(Icons.refresh),
                      onPressed: () {
                        webViewController?.reload();
                      },
                    ),
                  ],
                ),
              ]))),
    );
  }
}

How can I open new window in flutter inappwebview package?

Answers (1)

Related Questions