如何动态注入JavaScript函数？

发布于 2024-10-31 04:24:45 字数 718 浏览 7 评论 0原文

我在工作中一直使用一个 UI 很糟糕的产品，并试图通过 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 未定义。

我缺少什么？

原文

I am stuck using a product with a horrible UI at work and trying to make it palatable via UserScripts in Chrome. To that end, I am trying to inject a JavaScript function into the page via the UserScripts mechanism:

// 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()' >";

As you can see I am injecting a button and a function (gotoIncident) that should fire when the user clicks the button.

The button does appear on the screen but when I click it, the javascript debugger tells me that gotoIncident is not defined.

What am I missing?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

赠佳期 2024-11-07 04:24:45

将

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

演示

Inject a <script> tag into the <head> which contains a self-invoking function:

var head = document.getElementsByTagName('head')[0],
    script = document.createElement('script');
    
script.src = 'path/to/script.js';    
head.appendChild(script);

Where the referenced script looks something like this:

(function(){
    // do your stuff here    
})();

Edit

How to do it as an inline script:

function fn() {
    alert('hello JS');
}

var head = ...,
    script = ...;
    
// FF doesn't support innerText
script[script.innerText ? 'innerText' : 'textContent'] = '(' + fn + ')()';
head.appendChild(script);

Demo

回复收藏 0 原文

小苏打饼 2024-11-07 04:24:45

您需要在全局范围内定义该函数（将其放在部分）才能在您执行的操作中使用它。

回复收藏 0 原文

葬心 2024-11-07 04:24:45

作为参考，我通过以下方式解决了它：

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

}

For reference I resolved it the following way:

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

}

回复收藏 0 原文

~没有更多了~