Javascript 向网页中注入代码不起作用

这是我昨天问的一个问题的后续

我有一个用户脚本（有点像GreaseMonkey脚本，但对于Chrome）

想法是在页面上添加一个文本框和一个按钮。然后，当用户单击按钮时，它会启动一个功能，该功能可以执行一些操作。因此，我将文本框、按钮和函数注入页面，但当用户单击按钮时，Chrome控制台告诉我“UncaughtTypeError:对象不是函数”。很明显，它没有看到我刚刚注入的函数，这是在按钮的

onclick

事件中指定的

我有这样的代码：

initialize();

function initialize() { 
    var dropDown = document.getElementById("tstGlobalNavigation_ddlChooseProject"); 

    // add a textbox 
    dropDown.innerHTML = dropDown.innerHTML + "&nbsp;&nbsp;&nbsp;<input type='text' name='txtSearch' style='position:absolute;top:8px;left:800px;width:50px' >";

    // add a button 
    dropDown.innerHTML = dropDown.innerHTML + "&nbsp;&nbsp;&nbsp;<input type='button' name='btnSearch' value='Go' onclick='fn()' style='position:absolute;top:8px;left:860px;width:35px'>";

    addScript("var obj = document.getElementById('txtSearch'); " 
    + "if (obj != null) { " 
    + " var incidentId = document.getElementById('txtSearch').value; " 
    + " var currentURL = location.href; " 
    + " var splitResult = currentURL.split('/'); " 
    + " var projectId = splitResult[4]; " 
    + " location.href = 'http://dev.myApp.com/ProductTeam/' + projectId + '/Incident/' + incidentId + '.aspx'; " 
    + " }" 
    , "fn"); 
}

function addScript(contents, id) { 
    var head, script; 
    head = document.getElementsByTagName('head')[0]; 
    script = document.getElementById(id); 
    if(script != undefined) { 
    head.removeChild(script); 
    } 
    script = document.createElement('script'); 
    script.type = 'text/javascript'; 
    script.id = id; 
    script.innerHTML = contents; 
    head.appendChild(script); 
}

function wrapper() {
    return functionThatWillEventuallyBeInjected();
}

initialize（）；
函数初始化（）{
var dropDown=document.getElementById（“tstGlobalNavigation_ddlChooseProject”）；
//添加一个文本框
dropDown.innerHTML=dropDown.innerHTML+“”；
//添加一个按钮
dropDown.innerHTML=dropDown.innerHTML+“”；
addScript（“var obj=document.getElementById（'txtSearch'）
+“如果（obj！=null）{”
+“var incidentId=document.getElementById（'txtSearch'）。值；”
+“var currentURL=location.href；”
+“var splitResult=currentURL.split（'/'）
+“var projectId=splitResult[4]；”
+“location.href=”http://dev.myApp.com/ProductTeam/“+projectId+”/Incident/“+incidentId+”.aspx'
+ " }" 
，“fn”）；
}
函数addScript（内容，id）{
var头、脚本；
head=document.getElementsByTagName（'head'）[0]；
script=document.getElementById（id）；
如果（脚本！=未定义）{
head.removeChild（脚本）；
} 
script=document.createElement（'script'）；
script.type='text/javascript'；
script.id=id；
script.innerHTML=内容；
head.appendChild（脚本）；
}

---

我错过了什么

我不确定您是否能够实时创建

script

标记并在其中推送内容

您可以创建脚本标记并将src属性修改为某个JS文件：

var script = document.createElement("script");
script.type = "text/javascript";
script.src = "path/to/your/javascript.js";
document.body.appendChild(script);

---

如果您真的需要执行存储在字符串中的代码，可能只需在需要时执行

eval（）
 问题是您试图使用
onclick
元素属性绑定事件处理程序。这些属性仅在第一次加载页面时解析，此时您试图绑定的回调函数不存在

尽可能避免在*

属性上的元素

中绑定事件处理程序。这叫做写作

这就是说，如果您必须坚持使用
onclick
，那么您可以绑定到一个虚拟函数，该函数只会掉头调用您注入的函数：

<button onclick="wrapper()"

你不是在调用你创建的函数，而是在使用你给脚本标签的id。。。尝试将代码更改为

addScript("function fn() { var obj = document.getElementById('txtSearch'); " 
    + "if (obj != null) { " 
    + " var incidentId = document.getElementById('txtSearch').value; " 
    + " var currentURL = location.href; " 
    + " var splitResult = currentURL.split('/'); " 
    + " var projectId = splitResult[4]; " 
    + " location.href = 'http://dev.myApp.com/ProductTeam/' + projectId + '/Incident/' + incidentId + '.aspx'; " 
    + " } }" 
    , "fn"); 

您将拥有一个可以调用的fn（）函数
在哪里绑定事件处理程序？此代码不是问题的根源。如果您将代码发布到绑定事件的位置，这将非常有用handler@Alex，@Dexter-很抱歉，在复制/粘贴操作中处理程序不知何故被吃掉了。@Brock:这显然不是dup。@Brock，你链接到的dup与我指定的后续问题相同。你可以；我昨天回答了OP的问题，并确保代码正常工作。也许你错过了（前面的问题）。@Matt，我确实看过演示。我认为通过MooTools和用户脚本注入代码之间存在某种类型的定性差异。根据我发布的示例，我无法使用普通Javascript和用户脚本使其工作。我认为你错了。为什么？因为在chrome控制台中，当我点击按钮时，我得到了
uncaughttypeerror:object不是一个函数
错误，这意味着onclick事件确实会触发。对：
onclick
会触发，但它绑定到一些未定义的东西。啊，我想知道他为什么要给脚本标记分配一个ID。