javascript - 在 cordova inappbrowser 中添加按钮以隐藏它编辑 : and add image via Javascript to inappbrowser

Question

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

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

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

编辑:我使用了@NickyTheWrench 的解决方案，但想将按钮样式设置为右侧带有 Logo (不可点击)的栏。所以我在代码中使用了:

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);

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

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

Answer 1

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

查看此代码示例，我们在其中注入(inject) JavaScript，它将在 inappbrowser 的页面顶部生成一个“隐藏 map ”按钮。单击此按钮时，它将在 localStorage 中设置一个新项目“隐藏”，其值为"is"。然后我们有一个循环来检查该值是否为 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.

我希望这对您有所帮助:-)