消防“onchange”来自Google Chrome扩展程序的页面上的活动 [英] Fire "onchange" event on page from google chrome extension

问题描述

我正在开发一个扩展程序，用来自其他网站的数据自动填写表单。
我有一个包含不同选项的上下文菜单，每个选项都有不同的数据，但完成相同的表单。数据是动态的，并取决于另一个网站。使用chrome.tabs.executeScript我可以插入一些数据，但我无法触发字段的onchange事件。
可以更改选择的值，但是网站有一个事件onchange，当我更改该值时不会触发事件，并且没有通过chrome.tabs.executeScript运行onchange。它显示的错误是：Uncaught TypeError：对象＃的属性'onchange'不是函数#HTMLSelectElement

编辑：

manifest.json：

 content_scripts：[
 {
matches ：[url_where_the_code_must_run]，
js：[billing.class.js，script.js] 
} 
]，
。 
。 
。 
 
 的权限：[
 的选项卡，
 的url_from_where_i_get_the_data，
 的url_where_the_code_must_run 
]中，
  
 
 script.js：
 
 
  select = document.createElement（'select'）; 
 var option = document.createElement（'option'）; 
 option.value =; 
 option.innerHTML =选择客户端; 
 select.appendChild（option）; 
 select.onchange = function（）{
 var client = Billing.getClient（this.value）; 
 if（client）{
 document.getElementsByName（country）[0] .value = client.country_id; 
 document.getElementsByName（country）[0] .onchange（）; 
 
 
 for（var i = 0; i< Billing.clients.length; i ++）{
 option = document.createElement（'option'）; 
 option.value = Billing.clients [i] .id; 
 option.innerHTML = Billing.clients [i] .name; 
 select.appendChild（option）; 
} 
 
 form.parentElement.insertBefore（select，form）; 
  
执行此行时，显示对象＃的Uncaught TypeError：Property'onchange'不是函数#HTMLSelectElement：
  document.getElementsByName（country）[0] .onchange（）; 
  
但是，如果我直接在控制台中运行此行，通常运行时没有错误
 
 
 
 document.getElementsByName（country）[0]是url的一个元素，select是我在扩展中创建的一个元素，用于选择加载哪些客户端数据。 p> 
 
 
 url_where_the_code_must_run：
 <脚本类型= 文本/ JavaScript的 > ; 
函数customFunction（）{
 //做一些我不在乎的事
} 
< / script> 
< select name =countryonchange =customFunction（）> 
< / select> 
  
 
 
解决方案
您是否尝试发射事件而不是直接调用功能？据我所知，直接调用事件处理程序可能会产生副作用。尽管目前我还找不到消息来源。 
 
 
 
尝试替换 
 
 
  document.getElementsByName（country） [0] .onchange（）; 
  
 with  
 
 
  var changeEvent = document.createEvent（HTMLEvents）; 
 changeEvent.initEvent（change，true，true）; 
 document.getElementsByName（country）[0] .dispatchEvent（changeEvent）; 
  
我还创建了一个小提琴： http://jsfiddle.net/d94Xb/1/  
 
 
 
此外，您可以查看 的addEventListener（）和 dispatchEvent（） 多一点，因为这是注册和执行事件处理程序的常用方法。
 
 
   
 
 
 （update：2015-04-27） @ 10basetom指出，现在不推荐使用上述方法。更好的方法是使用 Event（）。请注意，这不适用于IE和Safari。
 
I am developing an extension to autofill a form with data from another website.
I have a context menu with different options, each with different data but complete the same form. The data is dynamic and depend on another website. With "chrome.tabs.executeScript" i can insert some data, but i can not fire the event "onchange" of the fields.
Can change the value of a select, but the website has an event "onchange" that does not fire when I change the value, and not get through "chrome.tabs.executeScript" run the "onchange". The error it shows is: "Uncaught TypeError: Property 'onchange' of object # is not a function #HTMLSelectElement"

EDIT:

manifest.json:
"content_scripts": [
    {
        "matches": ["url_where_the_code_must_run"],
        "js": ["billing.class.js", "script.js"]
    }
],
.
.
.

"permissions": [
    "tabs",
    "url_from_where_i_get_the_data",
    "url_where_the_code_must_run"
],
script.js:
select = document.createElement('select');
var option = document.createElement('option');
option.value = "";
option.innerHTML = "Select Client";
select.appendChild(option);
select.onchange = function() {
    var client = Billing.getClient(this.value);
    if (client) {
        document.getElementsByName("country")[0].value = client.country_id;
        document.getElementsByName("country")[0].onchange();
    }
}
for (var i = 0; i < Billing.clients.length; i++) {
    option = document.createElement('option');
    option.value = Billing.clients[i].id;
    option.innerHTML = Billing.clients[i].name;
    select.appendChild(option);
}

form.parentElement.insertBefore(select, form);
When this line is executed, show "Uncaught TypeError: Property 'onchange' of object # is not a function #HTMLSelectElement":
document.getElementsByName("country")[0].onchange();
But if I run this line directly in the console, normally runs without errors

document.getElementsByName("country")[0] is an element of the url, and "select" is an element that i create in the extension to select what client data should load.

url_where_the_code_must_run:
<script type="text/javascript">
       function customFunction() {
            // Do something that i dont care
       }
</script>
<select name="country" onchange="customFunction()">
</select>

解决方案
Have you tried emitting the event rather than directly calling the function? As far as I remember, calling event-handlers directly can have side effects. I can't find a source at the moment though.  

Try to replace
document.getElementsByName("country")[0].onchange();
with
var changeEvent = document.createEvent("HTMLEvents");
changeEvent.initEvent("change", true, true);
document.getElementsByName("country")[0].dispatchEvent(changeEvent);
I also created a little fiddle: http://jsfiddle.net/d94Xb/1/

Furthermore you might look into addEventListener() and dispatchEvent() a bit more as this is the  common way to register and execute event handler.



(update: 2015-04-27) The method described above is deprecated by now as @10basetom points out. The better way is to use Event(). Please note that this won't work in IE and Safari.

                        
这篇关于消防“onchange”来自Google Chrome扩展程序的页面上的活动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！