cordova: inappbrowser cannot be closed because of wkwebview plugin in ios

Question

I am using plugins cordova-plugin-inappbrowser and cordova-plugin-wkwebview in my app with ios. But loadstop event does not work so because of this issue I am also not able to close inappbrowser on loadstop event.

It works perfectly fine without wekwebview.

I added code of example project to reproduce this issue:

config.xml

<?xml version="1.0" encoding="UTF-8"?>

<!-- config.xml reference: https://build.phonegap.com/docs/config-xml -->
<widget xmlns     = "http://www.w3.org/ns/widgets"
        xmlns:gap = "http://phonegap.com/ns/1.0"
        id        = "com.phonegap.helloworld"
        version   = "1.0.0">

    <name>Hello World</name>

    <description>
        Hello World sample application 
    </description>

    <author href="http://phonegap.com" email="support@phonegap.com">
        PhoneGap Team
    </author>

rmission on your app, which PhoneGap requires.
    -->
    <preference name="permissions"                value="none"/>


    <preference name="auto-hide-splash-screen"    value="true" />        


    <gap:plugin name="cordova-plugin-wkwebview" source="npm" />
    <gap:plugin name="cordova-plugin-inappbrowser" source="npm" />
    <gap:plugin name="org.crosswalk.engine" spec="1.3.0" source="pgb" /> 

    <icon src="icon.png" />
    <icon src="res/icon/android/icon-36-ldpi.png"   gap:platform="android"    gap:qualifier="ldpi" />
    <icon src="res/icon/android/icon-48-mdpi.png"   gap:platform="android"    gap:qualifier="mdpi" />
    <icon src="res/icon/android/icon-72-hdpi.png"   gap:platform="android"    gap:qualifier="hdpi" />
    <icon src="res/icon/android/icon-96-xhdpi.png"  gap:platform="android"    gap:qualifier="xhdpi" />
    <icon src="res/icon/blackberry/icon-80.png"     gap:platform="blackberry" />
    <icon src="res/icon/blackberry/icon-80.png"     gap:platform="blackberry" gap:state="hover"/>
    <icon src="res/icon/ios/icon-57.png"            gap:platform="ios"        width="57" height="57" />
    <icon src="res/icon/ios/icon-72.png"            gap:platform="ios"        width="72" height="72" />
    <icon src="res/icon/ios/icon-57-2x.png"         gap:platform="ios"        width="114" height="114" />
    <icon src="res/icon/ios/icon-72-2x.png"         gap:platform="ios"        width="144" height="144" />
    <icon src="res/icon/webos/icon-64.png"          gap:platform="webos" />
    <icon src="res/icon/windows-phone/icon-48.png"  gap:platform="winphone" />
    <icon src="res/icon/windows-phone/icon-173.png" gap:platform="winphone"   gap:role="background" />

    <!-- Define app splash screen for each platform. -->
    <gap:splash src="res/screen/android/screen-ldpi-portrait.png"       gap:platform="android" gap:qualifier="port-ldpi" />
    <gap:splash src="res/screen/android/screen-mdpi-portrait.png"       gap:platform="android" gap:qualifier="port-mdpi" />
    <gap:splash src="res/screen/android/screen-hdpi-portrait.png"       gap:platform="android" gap:qualifier="port-hdpi" />
    <gap:splash src="res/screen/android/screen-xhdpi-portrait.png"      gap:platform="android" gap:qualifier="port-xhdpi" />
    <gap:splash src="res/screen/blackberry/screen-225.png"              gap:platform="blackberry" />
    <gap:splash src="res/screen/ios/screen-iphone-portrait.png"         gap:platform="ios"     width="320" height="480" />
    <gap:splash src="res/screen/ios/screen-iphone-portrait-2x.png"      gap:platform="ios"     width="640" height="960" />
    <gap:splash src="res/screen/ios/screen-iphone-portrait-568h-2x.png" gap:platform="ios"     width="640" height="1136" />
    <gap:splash src="res/screen/ios/screen-ipad-portrait.png"           gap:platform="ios"     width="768" height="1024" />
    <gap:splash src="res/screen/ios/screen-ipad-landscape.png"          gap:platform="ios"     width="1024" height="768" />
    <gap:splash src="res/screen/windows-phone/screen-portrait.jpg"      gap:platform="winphone" />


    <access origin="*"/>
    <!-- Added the following intents to support the removal of whitelist code from base cordova to a plugin -->
    <!-- Whitelist configuration. Refer to https://cordova.apache.org/docs/en/edge/guide_appdev_whitelist_index.md.html -->
    <plugin name="cordova-plugin-whitelist" version="1" />
    <allow-intent href="http://*/*" />
    <allow-intent href="https://*/*" />
    <allow-intent href="tel:*" />
    <allow-intent href="sms:*" />
    <allow-intent href="mailto:*" />
    <allow-intent href="geo:*" />
    <platform name="android">
        <allow-intent href="market:*" />
    </platform>
    <platform name="ios">
        <allow-intent href="itms:*" />
        <allow-intent href="itms-apps:*" />
    </platform>

</widget>

index.html

<!DOCTYPE html>

<html>
    <head> 

        <meta charset="utf-8" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="msapplication-tap-highlight" content="no" />
        <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
        <script type="text/javascript" src="js/jquery-1.10.2.js"></script>
        <title>Hello World</title>
    </head>
    <body> 
          <br><br><br>
                <button onclick="login()">Open web</button>

        <script type="text/javascript" src="cordova.js"></script>

        <script type="text/javascript">

             function login(){

                var ref = window.open('http://www.google.com', '_blank', 'location=no');

                ref.addEventListener('loadstop', function(event){
                    alert('from load stop');
                    ref.close();                
            });
    }
        </script>
    </body>
</html>

It works perfectly fine if android but this issue is in ios only. I am using phonegap build to build app.

I researched a lot but could not find any perfect solution yet.

I'll really appreciate any contribution. Thanks

Answer 1

I have just been through the wringer with InAppBrowser and WKWebView as well so I share your pain!

What I found is that the events were being fired by the InAppbrowser window itself, rather than the URL content in the window. So Loadstop was being fired each time the InAppBrowser window was shown in the App, not when the URL had finished loading.

My advice, and other people's on various discussion groups, is to forget using the two together until WKWebView is stable and the InAppBrowser has been designed for it. So just pick which one you really need and bin the other one.

I know it's not really a solution, but after I binned WKWebView all my events started behaving as expected.

Tom