Search code examples
cordovahttp-redirectphonegapinappbrowser

Inappbrowser error if the page redirects

I'm trying to open https://www.mywebsite.com/help in inappbrowser which then redirects to https://www.mywebsite.com/help/residential-customer (assume it is third party page where I do not have dev control). Im hiding the inappbrowser so that I can show a loader till the page loads

Issue:

After loadstart, loadstop was not triggered, in some devices loaderror is triggered! 

var path="https://www.mywebsite.com/help";

var ref = cordova.InAppBrowser.open(path, '_blank', 'toolbarposition=top,closebuttoncaption=Back,location=no,hardwareback=no,hidden=yes');

showLoadingIcon();


//loadstop event
ref.addEventListener('loadstart', function(event) {
    //todo
});

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

//exit event
ref.addEventListener('exit', function(event) {
    hideLoadingIcon();
    ref.close();
});

//loaderror event
ref.addEventListener('loaderror', function(event) {
    hideLoadingIcon();
    ref.close();
    showMessage("not happening!");
});

I understood that this is an issue with the third party page but I want my app to handle it rather than crashing.

Thanks for the help.

Solution

  • Do not hide it!

    I could not find the right answer for this issue despite the thread being open since years in some forums.

    However, I found that not hiding the inappbrowser partially cures this issue. And 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, 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.