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

2024-02-15

我想从包含 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 扩展中,更准确地说,位于页面中注入的内容脚本中。

所以问题是,有什么方法可以清除事件处理程序吗?或者更好的是有什么方法可以添加一个在内联处理程序之前调用的事件侦听器?

编辑:在写了很多丑陋的代码之后,我找到了一种方法来做我想做的事情...我复制了表单,删除内联事件处理程序,在 dom 中用我的旧表单替换,然后创建我的事件处理程序。它很丑陋,但它有效......如果有人能解释为什么我不能以其他方式这样做......


这是一孤立的世界 https://developer.chrome.com/extensions/content_scripts#execution-environment问题。 Chrome 扩展运行是与页面分离的上下文;虽然对 DOM 的访问是共享的,内联事件侦听器是隔离的.

引用文档,强调我的:

值得注意的是页面和扩展程序共享的 JavaScript 对象会发生什么情况 - 例如,window.onload事件。每个孤立的世界都会看到自己版本的物体。分配给对象会影响该对象的独立副本。例如,页面和扩展都可以分配给window.onload,但双方都无法读取对方的事件处理程序。事件处理程序按照分配的顺序进行调用。

因此,要覆盖页面级侦听器,您需要将覆盖代码注入页面上下文本身。这个有可能;看这个优秀的答案 https://stackoverflow.com/a/9517879/934239有关详细信息,这是一个示例:

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>元素添加到页面,然后在页面自己的上下文中执行。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

无法删除 chrome 中的内联事件处理程序 的相关文章