无法删除chrome中的内联事件处理程序 [英] Can't remove inline event handler in chrome

问题描述

 < form id = loginFormonsubmit =return performTask（this）;> 
  

我已经试过：

<$ p $ （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

没什么效果！

我在（）上添加了我自己的事件监听器usin jquery方法，但它永远不会被调用。它认为旧的事件监听器在我之前被执行......它在onClick事件上做了同样的事情。 p>

我必须明确表示我在Chrome扩展中，更确切地说是在页面中注入的内容脚本中。

<所以问题是，有什么办法来清除事件处理程序？或者更好的方法是添加一个事件侦听器，它将在内联处理程序之前调用吗？

编辑：很多丑陋的代码之后，我找到了一种方法做我想要的...我做了一份表格副本，删除内联envent处理程序，在我的旧表单中替换掉dom，然后创建我的事件处理程序。这是丑陋的，但它的工作原理......如果任何人都可以解释为什么我不能这样做...

是孤立的世界问题。 Chrome扩展程序的运行是与页面不同的上下文;虽然访问DOM是共享的，但内嵌事件侦听器是隔离的。

来自文档的引用，重点是我的：

值得注意的是，页面和扩展所共享的JavaScript对象发生了什么 - 例如 window.onload 事件。每个孤立的世界都会看到它自己的对象版本。 指定给对象会影响对象的独立副本。例如，页面和扩展名都可以分配给 window.onload ，但是没有一个可以读取其他的事件处理程序。事件处理程序是按照它们被分配的顺序调用的。

因此，要覆盖页面级侦听器，您需要将您的重写代码注入页面上下文本身。这个有可能;有关详细信息，请参阅这个出色的答案，以下是一个示例：

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

I want to delete an event handler form a form that contains an inline definition of onsubmit.

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

I have already try :

$("#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

And nothing works !

I add my own event listener usin jquery method on() but it is never called. It apear that the old event listener is executed before mine... It does the same thing with onClick event on button.

I have to explicit that I'm in a chrome extension and more precisely in a Content Script injected in a page.

So the question is, is there any way to purge event handlers ? Or much better is there any way to add an event listener that will be call before the inline handler ?

EDIT : After lot of ugly code, I have find a way to do what I want... I do a copy of the form, delete the inline envent handler, replace in the dom the old form by mine and then create my event handler. It's ugly but it works ... If anyone can explain why I can't do this other way ...

解决方案

This is an isolated world problem. Chrome extensions run is a separate context from the page; while access to the DOM is shared, inline event listeners are isolated.

Quote from the documentation, emphasis mine:

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.

So, to override a page-level listener, you need to inject your overriding code into the page context itself. This is possible; see this excellent answer for details, and here's an example:

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

This adds a <script> element to the page, which then executes in the page's own context.

这篇关于无法删除chrome中的内联事件处理程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！