如果页面重定向，则出现 Inappbrowser 错误答案

【问题标题】：Inappbrowser error if the page redirects如果页面重定向，则出现 Inappbrowser 错误
【发布时间】：2018-05-29 09:41:17
【问题描述】：

我正在尝试在 inappbrowser 中打开 https://www.mywebsite.com/help，然后重定向到 https://www.mywebsite.com/help/residential-customer（假设它是我没有开发控制的第三方页面）。我隐藏了 inappbrowser，以便在页面加载之前显示加载器

问题：

loadstart 后，loadstop 没有触发，部分设备触发了 loaderror！

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!");
});

我知道这是第三方页面的问题，但我希望我的应用能够处理它而不是崩溃。

感谢您的帮助。

【问题讨论】：

标签： cordova redirect phonegap inappbrowser

【解决方案1】：

不要隐藏！

尽管该主题已在某些论坛中开放多年，但我找不到此问题的正确答案。

但是，我发现不隐藏 inappbrowser 可以部分解决这个问题。而且我能够向 inappbrowser 注入一个微调器，通过避免尴尬的白屏来改善用户体验。

自定义微调器

以下解决方案有很多选择，可以使用 html 文件“spinner.html”而不是硬编码，但这种特定方法适用于跨平台（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
});

微调器在开始加载后将被实际页面覆盖。

【讨论】：