在cordova inappbrowser中添加按钮以隐藏编辑:并通过Javascript向inappbrowser添加图像

Question

我在Ionic-v1应用程序中有一个带有地图的url的外部链接。目前，我有关闭按钮在我的InAppBrowser激活，我可以打开我的应用程序的网址再次。然而，地图上的位置当然是不记得的(它只是重新打开url)。

因此，我在docs中找到了InAppBrowser.hide()，这对我确实有帮助。但是，我很难找到在应用程序中添加此方法的方法。最好的办法是什么？

将当前的关闭按钮更改为“隐藏”，而不是“关闭”(因此，为Android en iOS分别操作iOS en 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/，但离子科多瓦无法提供的图像(它使它成为一个蓝色框带有问号。当我在本地保存图像时，也会出现同样的问题。如何将图像添加到这段Javascript中？

编辑2:回答编辑: url必须是https，否则它不会被离子cordova找到。

Answer 1

是的，使用addEventListener和executeScript是可能的。

查看这个代码示例，在这里我们将注入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.

我希望这会有所帮助：)

Answer 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');
});