Question

我在使用具有可怕用户界面的产品时遇到困难，并试图通过Chrome中的UserScripts使其变得可口。为此，我试图通过UserScripts机制将JavaScript函数注入页面：

// 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 + "&nbsp;&nbsp;&nbsp;<input type='button' name='btnSearch' value='Go' onClick='javascript:gotoIncident()' >";

正如您所看到的，我正在注入一个按钮和一个函数（gotoIncident），当用户单击该按钮时它将触发。

按钮确实出现在屏幕上但是当我点击它时，javascript调试器告诉我gotoIncident未定义。

我错过了什么？

Answer 1

将<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);

<强> Demo

Answer 2

您需要在全局范围内定义该函数（将其放在＆lt; head＆gt;部分中），以便在您执行此操作时使用它。

Answer 3

作为参考，我通过以下方式解决了这个问题：

myDiv.innerHTML = myDiv.innerHTML + " <input type='text' id='txtSearch' name='txtSearch' style='position:absolute;top:8px;left:800px;width:50px' >";
myDiv.innerHTML = myDiv.innerHTML + " <input type='button' name='btnSearch' value='Go' onclick='fn()' style='position:absolute;top:8px;left:860px;width:35px'>";

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://site/SpiraTeam/' + projectId + '/Incident/' + incidentId + '.aspx'; "
  + " } }"
  , "fn");

}

如何动态注入JavaScript函数？

3 个答案:

修改