javascript - 无法删除 chrome 中的内联事件处理程序

Question

我想从一个包含 onsubmit 内联定义的表单中删除一个事件处理程序。

<form id="loginForm" onsubmit="return performTask(this);">

我已经试过了:

$("#loginForm").off("submit")
$("#loginForm").unbind("submit")
$("#loginForm").die("submit")
$("#loginForm").removeAttr("onsubmit")
$("#loginForm").removeProp("onsubmit")
$("#loginForm").attr("onsubmit", "")
$("#loginForm").prop("onsubmit, "")
$("#loginForm")[0].onsubmit = null
$("#loginForm")[0].onsubmit = undefined
$("#loginForm")[0].onSubmit = null
$("#loginForm")[0].onSubmit = undefined

什么都没用!

我使用 jquery 方法 on() 添加了我自己的事件监听器，但它从未被调用。看来旧的事件监听器在我的之前执行...它对按钮上的 onClick 事件执行相同的操作。

我必须明确表示我在 chrome 扩展中，更准确地说是在页面中注入(inject)的内容脚本中。

所以问题是，有没有办法清除事件处理程序？或者更好的方法是添加一个事件监听器，该监听器将在内联处理程序之前调用？

编辑:经过大量丑陋的代码，我找到了一种方法来做我想做的事...我复制了一份表格，删除了内联事件处理程序，在 dom 中替换了我的旧表格，然后创建我的事件处理程序。它很难看，但它有效......如果有人能解释为什么我不能用其他方式做到这一点......

Answer 1

这是一个 isolated world问题。 Chrome 扩展程序运行是一个独立于页面的上下文；在共享对 DOM 的访问时，内联事件监听器是隔离的。

引用文档，强调我的:

It's worth noting what happens with JavaScript objects that are shared by the page and the extension - for example, the window.onload event. Each isolated world sees its own version of the object. Assigning to the object affects your independent copy of the object. For example, both the page and extension can assign to window.onload, but neither one can read the other's event handler. The event handlers are called in the order in which they were assigned.

因此，要覆盖页面级监听器，您需要将覆盖代码注入(inject)页面上下文本身。这个有可能;见this excellent answer有关详细信息，这是一个示例:

var actualCode = "document.getElementById('loginForm').onsubmit = null;";
var script = document.createElement('script');
script.textContent = actualCode;
(document.head||document.documentElement).appendChild(script);
script.parentNode.removeChild(script);

这增加了一个 <script>元素到页面，然后在页面自己的上下文中执行。