内联事件处理程序中的变量“未定义”？答案

【问题标题】：Variable "is not defined" in inline event handler?内联事件处理程序中的变量“未定义”？
【发布时间】：2012-10-13 23:21:54
【问题描述】：

我正在开发一个 chrome 扩展，它将 HTML 注入到页面中，并对某些按钮具有 onClick 功能。这是示例代码。

命名空间.js

/**
 * Namespace for this content script.
 * @const
 */
var namespace = {};

/**
 * HTML text to be injected.
 */
namespace.HTML = '<input type="text" size="2" placeholder="0.50"' +
                 'onkeyup="namespace.enable(event)" />';

document.body.insertAdjacentHTML('afterbegin', namespace.HTML);

namespace.enable = function() {
  alert('Hello World!')
};

HTML 被正确注入，但命名空间未被识别。这是错误

Uncaught ReferenceError: namespace is not defined 
onkeyup

有什么解决方法吗？

谢谢

【问题讨论】：

与“命名空间”无关。很简单，window.namespace 不存在 - 在这种情况下，因为它是一个局部范围的变量（var namespace，大概在函数内部）。 “可能有效”的廉价黑客是删除var；但最好避免使用基于字符串的事件处理程序。另外，this 将评估运行内联事件处理程序的元素，这可能很有用。
@pst 所以你建议添加事件监听器？顺便说一句，删除 var 不起作用
“可能有效”与“将有效”不同——这取决于更大的背景。但是，是的，我建议使用非内联处理程序，甚至可能使用闭包。

标签： javascript javascript-events google-chrome-extension

【解决方案1】：

它可以在 Firefox、Chrome 和 IE 9 中调用：

window.onload = function() {
  document.body.insertAdjacentHTML('afterbegin', namespace.HTML);
};

【讨论】：

【解决方案2】：

内容脚本在所谓的isolated world 中运行。不能

使用由其扩展页面定义的变量或函数

使用网页或其他内容脚本定义的变量或函数

因此，您可能还需要将命名空间作为另一段 js 注入 HTML 页面。

【讨论】：

【解决方案3】：

正如@zhzhour 所提到的，内容脚本在一个孤立的世界中运行，页面中的 JavaScript 无法访问您的内容脚本定义的变量。

如果您想这样做，您需要在页面中注入 JavaScript 文件，正如我在此处的其他答案中所述：https://stackoverflow.com/a/13037307/315562

也就是说，使用下面的content.js文件注入namespace.js。

content.js

injectScript( chrome.extension.getURL( "/" ), "namespace.js" );
function injectScript ( aBasePath, aScriptURL ) {
  var scriptEl = document.createElement( "script" );
  scriptEl.src = aBasePath + aScriptURL;
  scriptEl.async = false;

  (document.body || document.head || document.documentElement)
  .appendChild( scriptEl );
}

您可以以此为起点。如果需要与 Chrome 扩展通信，则需要在注入的 JavaScript 文件中使用window.postMessage 发送消息并在内容脚本中接收消息。

【讨论】：