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

Posted 2023-03-07

【中文标题】是否可以使用javascript向inappbrowser的工具栏添加按钮并控制其事件...？

【英文标题】：Is it possible to add buttons and control its event to toolbar of inappbrowser using javascript...?

【发布时间】：2014-04-21 08:26:18

【问题描述】：

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

【参考方案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 会影响工具栏的样式。