Question

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

编辑：

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

当执行此行时，显示“对象＃的Uncaught TypeError：Property'onchange'不是函数#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);

我还创造了一个小小提琴：http://jsfiddle.net/d94Xb/1/

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

（更新：2015-04-27）上述方法现已弃用，因为@ 10basetom指出。更好的方法是使用Event()。请注意，这在IE和Safari中无效。

在Google Chrome扩展程序页面上触发“onchange”事件

1 个答案: