ios - 是否可以使用 javascript 添加按钮并将其事件控制到 inappbrowser 的工具栏...？

Question

我正在使用 PhoneGap 为 iOS 和 Android 开发混合应用程序。是否可以使用 javascript 添加按钮并将其事件控制到 inappbrowser 的工具栏。我知道如何通过 ios native 端添加它，但我不能使用该过程。我需要通过javascript方法来控制按钮事件。

Answer 1

您有两种选择。显然，第一个选项是修补 native 插件代码，仅此而已。 Here你可以找到一个为 iOS 制作的例子，你必须对你的 Android Java 代码和你想要支持的所有其他平台做同样的事情。

另一种选择是隐藏 native 工具栏并在页面加载时注入(inject) HTML 和 CSS 以创建一个新工具栏。像这样:

// starting inappbrowser...
inAppWindow = window.open(URL_TO_LOAD, '_blank', 'location=no');
// Listen to the events, we need to know when the page is completely loaded
inAppWindow.addEventListener('loadstop', function () {
  code = CustomHeader.html();
  // Inject your JS code!
  inAppWindow.executeScript({
    code: code
  }, function () {
    console.log("injected (callback).");
  });
  // Inject CSS!
  inAppWindow.insertCSS({
    code: CustomHeader.css
  }, function () {
    console.log("CSS inserted!");
  });

显然，您必须定义 CustomHeader 对象，如下所示:

var CustomHeader = {
    css: '#customheader { your css here }',
    html: function() {
      var code = 'var div = document.createElement("div");\
      div.id = "customheader";\
      // Insert it just after the body tag
      if (document.body.firstChild){ document.body.insertBefore(div, document.body.firstChild); } \
      else { document.body.appendChild(div); }';
      return code;
}
};

我遇到过这个问题。对于我的情况，第二个选项就足够了，不是关键任务。有时 loadstop 事件需要很长时间才能触发，因此您在 >= 5 秒内看不到注入(inject)的条。你甚至必须注意加载页面的 CSS，因为很明显你会影响原始 CSS，或者原始 CSS 会影响工具栏的样式。