我在工作中一直在使用一个用户界面糟糕的产品，并试图通过 Chrome 中的 UserScripts 让它变得可口。为此，我试图通过 UserScripts 机制将 JavaScript 函数注入(inject)页面:
// find the div
var dropDown = document.getElementById("tstGlobalNavigation_ddlChooseProject");
// inject function
dropDown.innerHTML = dropDown.innerHTML + "<script>function gotoIncident(){alert('111')}</script>";
// inject a button
dropDown.innerHTML = dropDown.innerHTML + " <input type='button' name='btnSearch' value='Go' onClick='javascript:gotoIncident()' >";
如您所见，我正在注入(inject)一个按钮和一个函数 (gotoIncident)，当用户单击该按钮时应触发该函数。
按钮确实出现在屏幕上，但当我单击它时，javascript 调试器告诉我 gotoIncident 未定义。
我错过了什么？
最佳答案
注入(inject) <script>标记到 <head>其中包含一个自调用函数:
var head = document.getElementsByTagName('head')[0],
script = document.createElement('script');
script.src = 'path/to/script.js';
head.appendChild(script);
引用的脚本看起来像这样:
(function(){
// do your stuff here
})();
编辑
如何将其作为内联脚本:
function fn() {
alert('hello JS');
}
var head = ...,
script = ...;
// FF doesn't support innerText
script[script.innerText ? 'innerText' : 'textContent'] = '(' + fn + ')()';
head.appendChild(script);
关于javascript - 如何动态注入(inject) JavaScript 函数？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5574231/