Opening a document with `document.open` will clear all event listeners

Question

Opening a document with `document.open` will clear all event listeners

I've developed a Chrome extension that records user behavior while browsing web pages by adding event listeners to customers' web pages using a Chrome content script.

The code in the content script looks something like this:

var recordingEvents = ['click', 'input', 'change'];
recordingEvents.forEach(function (e) {
    window.addEventListener(e, handler, true);
});

For example, here's a snippet from a custom page:

<script>
function reload() {
    var ifrw = document.getElementById("iframeResult").contentWindow;
    ifrw.document.open();
    ifrw.document.write("<div>abc</div>");
    ifrw.document.close();
}
</script>
<body>
<input type="submit" onclick="reload();" value="Reload" />
<iframe id="iframeResult"></iframe>
</body>

This snippet uses document.open and document.write to update the content of an iframe.

My question is this: The event listeners are attached to the window object, but when document.open is used, it removes all event listeners as shown below.

https://i.sstatic.net/DQ0fh.png

Is there a way to prevent document.open from removing event listeners? Or is there a way to monitor document.open so I can manually reattach listeners afterwards?

javascript dom google-chrome-extension dom-events

Answer 1

Answer №1

While trying to address the same issue, I stumbled upon this problem.

According to the specification, when using document.open, the current document is destroyed and replaced with a new one. I had hoped that certain events like "load" would still be retained, but unfortunately, that was not the case. Here is my code snippet for detecting this behavior:

const testEventName = 'TestEvent';
let tm;

function onTestEvent() {
    clearTimeout(tm);
}

function listenToTestEvent() {
    document.addEventListener(testEventName, onTestEvent);
}

listenToTestEvent();

function onLostEvents() {
    console.log('events are lost');
    listenToTestEvent();
    // DO THING HERE
}


function checkIfEventsAreLost() {
    document.dispatchEvent(new CustomEvent(testEventName));
    tm = setTimeout(onLostEvents);
}

new MutationObserver(checkIfEventsAreLost).observe(document, { childList: true });

When the document is recreated, its childList changes (creating a new documentElement node), which I found to be the most reliable way to detect document replacement.

It's worth noting that even listeners are triggered before setTimeout(..., 0).

Answer 2

While trying to address the same issue, I stumbled upon this problem.

According to the specification, when using document.open, the current document is destroyed and replaced with a new one. I had hoped that certain events like "load" would still be retained, but unfortunately, that was not the case. Here is my code snippet for detecting this behavior:

const testEventName = 'TestEvent';
let tm;

function onTestEvent() {
    clearTimeout(tm);
}

function listenToTestEvent() {
    document.addEventListener(testEventName, onTestEvent);
}

listenToTestEvent();

function onLostEvents() {
    console.log('events are lost');
    listenToTestEvent();
    // DO THING HERE
}


function checkIfEventsAreLost() {
    document.dispatchEvent(new CustomEvent(testEventName));
    tm = setTimeout(onLostEvents);
}

new MutationObserver(checkIfEventsAreLost).observe(document, { childList: true });

When the document is recreated, its childList changes (creating a new documentElement node), which I found to be the most reliable way to detect document replacement.

It's worth noting that even listeners are triggered before setTimeout(..., 0).

Answer 3

Answer №2

Here is an in-depth explanation of why @Viller's solution actually works. I felt the need to turn this into a separate answer since it was too lengthy for a mere comment.

The unique identifying factor here is the TestEvent event, specially designed to monitor the removal of previously set up events within a document.

Specifically, this functionality addresses scenarios like document.open, where not only the document but also window listeners are removed entirely.

To put it simply, the key strategy involves establishing a listener for a bespoke event known as TestEvent, which essentially cancels out a pending timeout. This timeout is exclusively triggered when mutations occur within the document, facilitated by a mutation observer.

By structuring the timeout to operate at least after the next tick of the event loop, it can be nullified beforehand, thus avoiding the execution of its designated callback altogether. Furthermore, given that the TestEvent handler is responsible for erasing said timeout, its termination implies the persistence of the attached listener. Conversely, if the timeout persists beyond the upcoming tick, it signifies the elimination of events, prompting the necessity for a fresh "setup".

Answer 4

Here is an in-depth explanation of why @Viller's solution actually works. I felt the need to turn this into a separate answer since it was too lengthy for a mere comment.

The unique identifying factor here is the TestEvent event, specially designed to monitor the removal of previously set up events within a document.

Specifically, this functionality addresses scenarios like document.open, where not only the document but also window listeners are removed entirely.

To put it simply, the key strategy involves establishing a listener for a bespoke event known as TestEvent, which essentially cancels out a pending timeout. This timeout is exclusively triggered when mutations occur within the document, facilitated by a mutation observer.

By structuring the timeout to operate at least after the next tick of the event loop, it can be nullified beforehand, thus avoiding the execution of its designated callback altogether. Furthermore, given that the TestEvent handler is responsible for erasing said timeout, its termination implies the persistence of the attached listener. Conversely, if the timeout persists beyond the upcoming tick, it signifies the elimination of events, prompting the necessity for a fresh "setup".

Answer 5

Answer №3

As per the information provided on MDN:

When using the Document.open() method, there are certain side effects that come along with it. For example, all event listeners currently registered on the document, nodes inside the document, or the document's window are removed.

Below, a module (onGlobalListenerRemoval) is presented where users can easily register callback functions to receive notifications whenever listeners are cleared. This module follows the same principles as explained in the code from Viller's solution.

Principle of Usage:

onGlobalListenerRemoval.addListener(() => {
  alert("All event listeners have been removed!")
});

Module Script:

const onGlobalListenerRemoval = (() => {
  const callbacks = new Set();
  const eventName = "listenerStillAttached";

  window.addEventListener(eventName, _handleListenerStillAttached);

  new MutationObserver((entries) => {
    const documentReplaced = entries.some(entry =>
      Array.from(entry.addedNodes).includes(document.documentElement)
    );
    if (documentReplaced) {
      const timeoutId = setTimeout(_handleListenerDetached);
      window.dispatchEvent(new CustomEvent(eventName, {detail: timeoutId}));
    }
  }).observe(document, { childList: true });

  function _handleListenerDetached() {
    // reattach event listener
    window.addEventListener(eventName, _handleListenerStillAttached);
    // execute registered callbacks
    callbacks.forEach((callback) => callback());
  }

  function _handleListenerStillAttached(event) {
    clearTimeout(event.detail);
  }

  return  {
    addListener: c => void callbacks.add(c),
    hasListener: c =>  callbacks.has(c),
    removeListener: c => callbacks.delete(c)
  }
})();

Answer 6

As per the information provided on MDN:

When using the Document.open() method, there are certain side effects that come along with it. For example, all event listeners currently registered on the document, nodes inside the document, or the document's window are removed.

Below, a module (onGlobalListenerRemoval) is presented where users can easily register callback functions to receive notifications whenever listeners are cleared. This module follows the same principles as explained in the code from Viller's solution.

Principle of Usage:

onGlobalListenerRemoval.addListener(() => {
  alert("All event listeners have been removed!")
});

Module Script:

const onGlobalListenerRemoval = (() => {
  const callbacks = new Set();
  const eventName = "listenerStillAttached";

  window.addEventListener(eventName, _handleListenerStillAttached);

  new MutationObserver((entries) => {
    const documentReplaced = entries.some(entry =>
      Array.from(entry.addedNodes).includes(document.documentElement)
    );
    if (documentReplaced) {
      const timeoutId = setTimeout(_handleListenerDetached);
      window.dispatchEvent(new CustomEvent(eventName, {detail: timeoutId}));
    }
  }).observe(document, { childList: true });

  function _handleListenerDetached() {
    // reattach event listener
    window.addEventListener(eventName, _handleListenerStillAttached);
    // execute registered callbacks
    callbacks.forEach((callback) => callback());
  }

  function _handleListenerStillAttached(event) {
    clearTimeout(event.detail);
  }

  return  {
    addListener: c => void callbacks.add(c),
    hasListener: c =>  callbacks.has(c),
    removeListener: c => callbacks.delete(c)
  }
})();

Opening a document with `document.open` will clear all event listeners

Answer №1

Answer №2

Answer №3

Similar questions

Inquiries about the jQuery Button Timer

Error encountered in jQuery Datatables: aData variable is not defined

Include characteristics in JSX.Element following its declaration

Storing chrome identity api responses in a Vue.js component can be achieved by creating a function

Is it possible to incorporate additional sections by utilizing map and props in the given code snippet?

Error: Unexpected TypeError occurred stating that 'map' cannot be read from undefined, although the map method is not being used in the code

How come my form isn't functioning properly on mobile devices?

What is the optimal method for verifying two distinct conditions simultaneously using Javascript?

The width of Material UI Grid decreases every time it is re-rendered

The validation feature in 1000hz Bootstrap seems to be malfunctioning

Creating PopUp Windows with PHP and JavaScript

Trouble with JavaScript loading in HTML webpage

Issue with Component not displaying properly upon refreshing

Using Regex to replace special characters in TypeScript

Simple code styling tool

The custom created THREE.Curve is not rendering correctly

Error: The function SomeFunction is not recognized as a valid function (Mongoose library)

Can you explain the distinction between using <router-view/> and <router-view></router-view>?

`Combining Promises and yields for seamless functionality`

How to effectively utilize JSON responses with jQuery Mobile?