是否可以使用javascript向inappbrowser的工具栏添加按钮并控制其事件...？答案

【问题标题】：Is it possible to add buttons and control its event to toolbar of inappbrowser using javascript...?是否可以使用javascript向inappbrowser的工具栏添加按钮并控制其事件...？
【发布时间】：2014-04-21 08:26:18
【问题描述】：

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

【问题讨论】：

标签： ios objective-c cordova phonegap-plugins

【解决方案1】：

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

另一种选择是隐藏本机工具栏并在页面加载时注入 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 秒内看不到注入的条。而且你必须注意加载页面的 CSS，因为很明显你会影响原始 CSS，或者原始 CSS 会影响工具栏的样式。

【讨论】：