javascript - 从 google chrome 扩展程序页面上触发 "onchange"事件

Question

我正在开发一个扩展程序，以使用来自另一个网站的数据自动填充表单。我有一个包含不同选项的上下文菜单，每个选项都有不同的数据但填写相同的表格。数据是动态的，取决于另一个网站。使用“chrome.tabs.executeScript”我可以插入一些数据，但我无法触发字段的“onchange”事件。可以更改选择的值，但网站有一个事件“onchange”，当我更改值时不会触发该事件，并且无法通过“chrome.tabs.executeScript”运行“onchange”。它显示的错误是:“Uncaught TypeError: Property 'onchange' of object # is not a function #HTMLSelectElement”

编辑:

list .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"
],

脚本.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);

执行此行时，显示“Uncaught TypeError: Property 'onchange' of object # is not a function #HTMLSelectElement”:

document.getElementsByName("country")[0].onchange();

但是如果我直接在控制台中运行这一行，通常运行没有错误

document.getElementsByName("country")[0] 是 url 的一个元素，“select”是我在扩展中创建的一个元素，用于选择应加载的客户端数据。

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>

Answer 1

您是否尝试过发出事件而不是直接调用函数？据我所知，直接调用事件处理程序可能会产生副作用。我现在找不到消息来源。

尝试替换

document.getElementsByName("country")[0].onchange();

与

var changeEvent = document.createEvent("HTMLEvents");
changeEvent.initEvent("change", true, true);
document.getElementsByName("country")[0].dispatchEvent(changeEvent);

我还创建了一个 fiddle :http://jsfiddle.net/d94Xb/1/

此外，您可能会查看 addEventListener() and dispatchEvent()多一点，因为这是注册和执行事件处理程序的常用方法。

---

(更新:2015-04-27)@10basetom 指出，上述方法现在已弃用。更好的方法是使用 Event() .请注意，这在 IE 和 Safari 中不起作用。