cordova:由于ios中的wkwebview插件,无法关闭inappbrowser

时间:2016-06-30 08:54:26

标签: ios cordova phonegap-build wkwebview inappbrowser

我在ios的应用程序中使用了插件cordova-plugin-inappbrowser和cordova-plugin-wkwebview。 但是loadstop事件不起作用,因此我也无法在loadstop事件上关闭inappbrowser。

没有wekwebview,它完全正常。

我添加了示例项目的代码来重现此问题:

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>

如果安卓系统完全正常,但此问题仅适用于ios。 我正在使用phonegap构建来构建应用程序。

我研究了很多,但还没有找到任何完美的解决方案。

我真的很感激任何贡献。 感谢

1 个答案:

答案 0 :(得分:1)

我刚刚经历了InAppBrowser和WKWebView的绞痛,所以我分享了你的痛苦!

我发现事件是由InAppbrowser窗口本身触发的,而不是窗口中的URL内容。因此,每次在应用程序中显示InAppBrowser窗口时,Loadstop都会被触发,而不是在URL完成加载时。

我的建议以及其他人在各种讨论组中的使用是忘记使用这两者,直到WKWebView稳定并且InAppBrowser是为它设计的。所以,只需选择你真正需要的那个,并将另一个装箱。另外一个。

我知道它并不是一个真正的解决方案,但是在我将WKWebView分类后,我的所有事件都开始按预期运行。

汤姆