在cordova inappbrowser中添加按钮以将其隐藏编辑：并通过Javascript将图像添加到inappbrowser

Posted 2023-03-15

【中文标题】在cordova inappbrowser中添加按钮以将其隐藏编辑：并通过Javascript将图像添加到inappbrowser

【英文标题】：Add button in cordova inappbrowser to hide it EDIT: and add image via Javascript to inappbrowser

【发布时间】：2018-02-20 20:10:18

【问题描述】：

我的 Ionic-v1 应用程序中有一个指向带有地图的 url 的外部链接。目前，我的 InAppBrowser 中的关闭按钮已激活，我可以从我的应用程序中再次打开 URL。但是，地图上的位置当然不会被记住（它只是重新打开了 url）。

所以我在文档中找到了对我很有帮助的 InAppBrowser.hide()。但是，我很难找到在应用程序中添加此方法的方法。最好的方法是什么？

将当前关闭按钮更改为隐藏而不是关闭（因此分别为 android 和 ios 操作 inappbrowser.java 和 inappbrowser.m 在加载时将javascript添加到inappbrowser并在此处设置一个隐藏按钮并停用关闭按钮 或者…？ 有人有建议/最佳实践/代码示例吗？ 谢谢！

编辑：我使用了@NickyTheWrench 的解决方案，但想将按钮设置为右侧带有徽标（不可点击）的栏。所以我在代码中使用了：

var menu = document.createElement('div'); 
menu.style = 'height:24px;width:100%;background-color:#fdce0c;font-
size:16px;text-align:left;top:0;left:0;position:fixed;'; 
document.body.appendChild(menu); 

var button = document.createElement('Button'); 
button.innerhtml = '≡';
button.style = 'height:24px;border:0px;font-size:16px;border-radius:0px;background-color:#fdce0c;';  
menu.appendChild(button);

var image = document.createElement('Img'); 
image.src = 'http://gerhard.technoleno.nl/VGD_transparent_20px.png';
image.style = 'right:0;position:fixed'
menu.appendChild(image);

这在小提琴中有效：https://jsfiddle.net/m06hv1yt/16/，但 ionic cordova 无法提供图像（它使它成为一个带有问号的蓝色框。当我在本地保存图像时，同样的问题存在。如何将图像添加到这段Javascript？

编辑 2：编辑答案：url 必须是 https，否则 ionic cordova 找不到。

【问题讨论】：

您想添加带有隐藏应用浏览器的按钮？

是的，从我的应用程序中，我会在 inappbrowser 和工具栏中自动打开一个预定义的 URL，或者我想要一个按钮来隐藏这个 inappbrowser（此外，我在应用程序中将再次显示 inappbrowser 的按钮）。现在我通过关闭按钮执行此操作，但该按钮不记得用户在页面上的位置。

【参考方案1】：

是的，这可以使用 addEventListener 和 executeScript。

查看此代码示例，我们将在其中注入 JavaScript，该 JavaScript 将在 inappbrowser 的页面顶部生成一个“隐藏地图”按钮。单击此按钮时，它将在 localStorage 中设置一个新项目“隐藏”，其值为“是”。然后我们有一个循环来检查该值是否为yes，并将隐藏inappbrowser。

var ref = window.open('https://www.examplemap.com/', '_blank', 'transitionstyle=fliphorizontal,location=no,toolbarposition=top,closebuttoncaption=X');

// Once the InAppBrowser finishes loading
ref.addEventListener("loadstop", function() 

  // 1st Clear out 'hidden' in localStorage for subsequent opens.
  // 2nd Create the button
  ref.executeScript(
    code: "var key = 'hidden'; var keyval = 'yes'; localStorage.setItem('hidden',''); var button = document.createElement('Button'); button.innerHTML = 'Hide Map'; button.style = 'top:0;right:0;position:fixed;'; document.body.appendChild(button); button.setAttribute('onclick','localStorage.setItem(key,keyval);');"
  );

  // Start an interval
  var loop = setInterval(function() 

    // Execute JavaScript to check if 'hidden' is 'yes' in the
    // child browser's localStorage.
    ref.executeScript(
        code: "localStorage.getItem( 'hidden' )"
      ,
      function(values) 
        var hidden = values[0];

        // If 'hidden' is equal to 'yes', clear the interval and hide the InAppBrowser.
        if (hidden === 'yes') 
          clearInterval(loop);
          ref.hide();
        
      
    );
  );
);

另外，请注意，在某些情况下，隐藏功能在 iOS 上不起作用，并且会显示“尝试在已隐藏时隐藏 IAB”。如果发生这种情况，please check out the solution for that here.

我希望这会有所帮助:-)

【讨论】：

好东西！谢谢，真不敢相信这个解决方案是多么简单，而且你确实交出了在 iOS 和 Android 上都能 100% 运行的代码

很高兴帮助兄弟 :-)

if (hidden === 'yes') clearInterval(loop); ref.hide();测试（）; test() console.log('Hi'): 为什么这不起作用？

@Devora 试试这个：if (hidden === 'yes') clearInterval(loop); ref.hide(); test(); function test() console.log('Hi'):

【参考方案2】：

// On your Cordova js
StatusBar.hide();
var ref=window.open('http://www.foo.bar','_blank','zoom=no,location=no,toolbar=no');
ref.addEventListener("loadstop", function() 
    ref.executeScript(
        code: "localStorage.setItem('close','no');"
    );
    var loop = setInterval(function() 
        ref.executeScript(
            code: "try localStorage.getItem('close'); catch (exception) "
        , function(values) 
            if (values[0]=== 'yes') 
                clearInterval(loop);
                ref.hide();
            
        );
    );
);
// On your external page
$("#exitbutton").on("click",function(e)
    window.localStorage.setItem('close','yes');
);