可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):
问题:
I am trying to display a loading indicator in Phonegap InAppBrowser when a page is loading using the following code:
var ref; ref = window.open('http://www.google.com', '_top', 'location=no'); ref.addEventListener('loadstart', function(event) { //navigator.splashscreen.show(); navigator.notification.activityStart("", "loading"); }); ref.addEventListener('loadstop', function(event) { //navigator.splashscreen.hide(); navigator.notification.activityStop(); });
It doesn't display the indicator. I think that the z-index is lower then z-index of InAppBrowser.
If I use a splash screen instead of loading indicator it works.
回答1:
You can open InAppBrowser in hidden mode, meanwhile display a spinner, and when it finishes loading hide the spinner and show the InAppBrowser:
showSpinner() // implement by yourself var popup = window.open(url, "_blank", "location=no,toolbar=no,hidden=yes"); popup.addEventListener("loadstop", function() { popup.show(); hideSpinner(); // implement by yourself });
回答2:
have a look in the link it explain its in detail. This loading screen do not work with ios but its working absolutely fine on android http://javacourseblog.blogspot.in/2014/02/show-loading-screen-in-phonegap-app.html
回答3:
For me, hiding inappbrowser was giving some uncaught error if the page being loaded redirects to another! I had to keep the inappbrowser visible. I was able to inject a spinner to the inappbrowser for improving the user experience by avoiding the awkward white screen.
Custom Spinner
following solution has many alternatives, one can use an html file 'spinner.html' instead of hard-coding the code, but this specific approach is working across platform (nexus 5, pixel 1/2, iphone 6,7)
//use some really slow page for testing var path="https://www.facebook.com/"; //if you have a spinner.html, you can load that instead of path here in inappbrowser, but make sure it works in all devices. var ref = cordova.InAppBrowser.open(path, '_blank', 'toolbarposition=top,closebuttoncaption=Back,location=no,hardwareback=no'); //spinner html var spinner ="<!DOCTYPE html><html><head><meta name='viewport' content='width=device-width,height=device-height,initial-scale=1'><style>.loader {position: absolute; margin-left: -2em; left: 50%; top: 50%; margin-top: -2em; border: 5px solid #f3f3f3; border-radius: 50%; border-top: 5px solid #3498db; width: 50px; height: 50px; -webkit-animation: spin 1.5s linear infinite; animation: spin 1.5s linear infinite;}@-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); }}@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform:rotate(360deg); }}</style></head><body><div class='loader'></div></body></html>"; //intended webpage is loaded here (facebook) ref.executeScript({code: "(function() {document.write(\""+spinner+"\");window.location.href='"+path+"';})()"}); //loadstop event ref.addEventListener('loadstart', function(event) { //nothing specific needed for spinner }); //loadstop event ref.addEventListener('loadstop', function(event) { //nothing specific needed for spinner });
spinner will be overwritten by the actual page once it starts loading.
