从 html 文件调用 Javascript 函数答案

【问题标题】：Call Javascript function from html file从 html 文件调用 Javascript 函数
【发布时间】：2018-01-01 11:51:00
【问题描述】：

我有这个 JavaScript 代码：

var cr = {};
cr.plugins_ = {};
cr.runtime = null;

cr.plugins_.Vinoos_Markets = function(runtime) {
    this.runtime = runtime;
};
(function() {
	function initialize_events(result) {
		alert(result);
	}
})();

&lt;button onclick="initialize_events('Test Result');"&gt;Send Result&lt;/button&gt;

如何通过单击按钮从 html 运行“initialize_events”功能？

我无权编辑 JavaScript 文件。

【问题讨论】：

很遗憾你不能。该函数仅在其自己的范围内声明。不编辑js文件就无法访问ist。
没看到你无权访问js文件。您无法访问在私有作用域（在 IIFE 函数内部）声明的函数。

标签： javascript html function

【解决方案1】：

我无权编辑 js 文件。

那你不能，句号。它完全对包含它的匿名 IIFE* 私有。您必须将其公开为全局，以便将其与 onxyz-attribute-style 事件处理程序一起使用（这需要修改 JavaScript 代码）。这是不使用它们的众多原因之一。

由于不修改 JavaScript 就无法做到这一点，我假设您克服了这个限制，并建议您在可以修改 JavaScript 时应该做什么：

让 IIFE 连接按钮，如果您需要特定于按钮的信息来传递它，请使用 data-* 属性：

var cr = {};
cr.plugins_ = {};
cr.runtime = null;

cr.plugins_.Vinoos_Markets = function(runtime) {
  this.runtime = runtime;
};
(function() {
  function initialize_events(result) {
    alert(result);
  }
  document.getElementById("send-result").addEventListener("click", function() {
    initialize_events(this.getAttribute("data-result"));
  }, false);
}());

&lt;button id="send-result" data-result="Test Result"&gt;Send Result&lt;/button&gt;

注意事项：

如果您需要支持没有 addEventListener 的过时浏览器（例如 IE8，遗憾的是，这仍然是许多人的要求），请参阅 this answer 了解跨浏览器事件挂钩功能。
如果您在 IIFE 而不是按钮中拥有数据，则可以直接使用它而不是使用 data-* 属性。
给按钮一个ID并使用getElementById只是一个例子；在实践中，任何可以让您识别按钮的东西都是您所需要的。您可以通过 document.querySelector 使用完整的 CSS 选择器进行查找。

* IIFE = 立即调用的函数表达式，例如，(function() { /*...*/})();（有时也称为“内联调用函数表达式”。有时也错误地称为“自调用函数”，但它不是；它被调用了通过定义它的代码，而不是函数本身。）

【讨论】：