我试图保持我的webview隐藏,直到URL加载完毕

时间:2016-08-23 09:05:20

标签: javascript webview ionic-framework

我有一个离子应用程序将外部网站加载到webview中,每次加载webview之前我都会看到一个空白页面,然后才能加载网址。我希望webview只在url完成加载后显示。我还有一个loadstart的eventlistener,用于关闭窗口,当该URL被击中并返回到离子应用程序主屏幕时,这可以在我的模拟器上运行,但在我的真实设备上它只显示带符号的空白页。

   $scope.login = function()
      {
        //check if network is connected before sending initial request
        if(monitor.isOffline())
        {
          var alertPopup = $ionicPopup.alert({
            title: 'Network Error!',
            template: "Your Network is Offline, please connect and try again"
          });
        }

        //show spinner while loading page
        $scope.show = function() {
          $ionicLoading.show({
            template: '<p>Loading...</p><ion-spinner></ion-spinner>'
          });
        };

        //hide spinner
        $scope.hide = function(){
          $ionicLoading.hide();
        };


        //send initial request
        AuthService.login($scope.user).then(
          function(home)
          {
            $scope.show($ionicLoading);
            if(monitor.isOnline())
            {
              $scope.show($ionicLoading);

              var ref = window.open(home, '_blank', 'location=no,toolbar=no');

              ref.addEventListener('loadstart', function (event)
              {
                if(event.url == "http://mobile.map.education/logout" )
                {
                  ref.close();
                }

              });
              ref.addEventListener('loaderror', function (event)
              {
                var alertPopup = $ionicPopup.alert({
                  title: 'Network Error',
                  template: "Oops,Error with your network"
                });

                ref.close();

              });

              $scope.hide($ionicLoading);

              //watch network state
              monitor.startWatching();
            }
            if(monitor.isOffline())
            {
              var alertPopup = $ionicPopup.alert({
                title: 'Network Error',
                template: "Oops,Error with your network"
              })
            }
          },
          function (errMsg)
          {
            var alertPopup = $ionicPopup.alert({
              title: 'Login failed!',
              template: errMsg
            });
          })
          .catch(function()
          {
            var alertPopup = $ionicPopup.alert({
              title: 'Login failed!',
              template: 'Server not responding'
            })
              .finally(function ($ionicLoading)
              {
                $scope.hide($ionicLoading);
              });
          });
      };

1 个答案:

答案 0 :(得分:0)

我认为这仅适用于InAppBrowserPlugin,但您可以使用hidden=yes打开窗口

var ref = window.open(home, '_blank', 'location=no,toolbar=no,hidden=yes');

然后:

ref.addEventListener('loadstop', function(){
   ref.show();
});

点击此处的文档:https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-inappbrowser/