我正在尝试在inappbrowser中打开 https://www.mywebsite.com/help,然后重定向到 https://www.mywebsite.com/help/residential-customer(假设它是我没有开发控制的第三方页面(。 我隐藏了 inappbrowser 以便我可以显示加载器,直到页面加载
问题:
加载启动后,负载停止未触发,在某些设备中触发加载错误!
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!");
});
我知道这是第三方页面的问题,但我希望我的应用程序能够处理它而不是崩溃。
感谢您的帮助。
不要隐藏它!
我找不到这个问题的正确答案,尽管该线程在某些论坛中已经开放多年。
但是,我发现不隐藏 inappbrowser 可以部分解决此问题。 我能够向 inappbrowser 注入一个微调器,通过避免尴尬的白屏来改善用户体验。
自定义微调器
以下解决方案有很多选择,可以使用HTML文件"微调器.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
});
微调器一旦开始加载,就会被实际页面覆盖。