创建具有特定 css 的 div 时如何执行函数？

Question

我正在开发一个 tampermonkey 脚本，以便在出现时填充弹出窗口，尤其是这个。

因此，当页面启动并单击一个按钮时，这将创建一个新的弹出窗口，它是一个 div 具有特定 class.

想法是当这个弹出窗口启动时执行一段代码来填充那个弹出窗口。

我正在尝试使用以下代码：

/ ==UserScript==
// @name         New Userscript
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        
// @icon         https://www.google.com/s2/favicons?domain=atlassian.net
// @grant        none
// ==/UserScript==

(function() {
    'use strict';
    document.getElementById('jira-dialog-heading').addEventListener('click', function() {
        alert('do something');
    });

})();

但不起作用。

我该怎么做？

编辑 1

所有代码已更新

控制台中没有错误

谢谢

Answer 1

我会使用 mutationObserver 来完成它：https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver/observe

来自 MDN：

The MutationObserver method observe() configures the MutationObserver callback to begin receiving notifications of changes to the DOM that match the given options.

Answer 2

从上面的评论...

"There are two options. 1st) The OP owns the script and/or can subscribe to the popup launch process/event. In this case the OP can write and/or hook custom event handling code. 2nd) The OP does not own the script and/or can not subscribe to the popup launch process/event. In this case the OP needs to make use of a MutationObserver."

下一个提供的代码针对第二种情况，并试图涵盖弹出窗口如何改变 DOM ...

的许多可能但合理的方法

// custom specific popup handling

function handlePopupShow(popupNode) {
  console.log('handle popup show :: node ...', popupNode);
}
function handlePopupHide(popupNode) {
  console.log('handle popup hide :: node ...', popupNode);
}


// The popup specific mutation handler, the observers callback function.

function handleChildNodeAndClassNameMutation(mutationList/*, observer*/) {
  mutationList.forEach(mutation => {

    const { type, attributeName } = mutation;
    if (type === 'attributes' && attributeName === 'class') {

      const { target } = mutation;
      if (target.matches('.popup-specific-name.show')) {

        handlePopupShow(target);
      } else if (
        target.matches('.popup-specific-name.hide') ||
        target.matches('.popup-specific-name:not(.show)')
      ) {
        handlePopupHide(target);
      }
    } else if (type === 'childList') {
      const {
        addedNodes: [ addedTargetNode ],
        removedNodes: [ removedTargetNode ],
      } = mutation;
      if (
        addedTargetNode?.matches?.('.popup-specific-name')
        // addedTargetNode?.matches?.('.popup-specific-name.show')
      ) {
        handlePopupShow(addedTargetNode);
      } else if (
        removedTargetNode?.matches?.('.popup-specific-name')
      ) {
        handlePopupHide(removedTargetNode);
      }
    }
  });
}
// - The to be observed target node.
// - Due to detecting a popup specifc element
//   it has to be the `document.body`.
const popupMutationTarget = document.body;

// Defines the to be observed popup specific mutations.
const popupMutationConfig = {
  attributeFilter: ['class'],
  childList: true,
  subtree: true,
};

// Create mutation observer.
const popupObserver =
  new MutationObserver(handleChildNodeAndClassNameMutation);

// // Start target node observation for popup specific mutations.
// popupObserver.observe(popupMutationTarget, popupMutationConfig);

// // Does stop the observation.
// popupObserver.disconnect();


// bring test case to life.

function togglePermanentPopup(/* evt */) {
  document
    .querySelector('.popup-specific-name.permanent')
    .classList.toggle('show');
}
function toggleNonPermanentPopup(/* evt */) {
  let popupNode =
    document.querySelector('.popup-specific-name.non-permanent');
  if (popupNode) {
    popupNode.remove();
  } else {
    popupNode = document.createElement('div');
    popupNode.classList.add('popup-specific-name', 'non-permanent');
    popupNode.textContent =
      'non permanent dom element, show and hide by insert and remove';
    document.body.prepend(popupNode);
  }
}
document
  .querySelector('#toggle_permanent_popup')
  .addEventListener('click', togglePermanentPopup);
document
  .querySelector('#toggle_non_permanent_popup')
  .addEventListener('click', toggleNonPermanentPopup);

let inObservation = false;
function toggleObservation({ target }) {
  if (inObservation) {
    // Does stop the observation.
    popupObserver.disconnect();

    target.textContent = 'Start observation';

    console.log('+++ Observer disconnected +++');
  } else {
    // Start target node observation for popup specific mutations.
    popupObserver.observe(popupMutationTarget, popupMutationConfig);

    target.textContent = 'Stop observation';

    console.log('+++ Observer is running +++');
  }
  inObservation = !inObservation;
}
document
  .querySelector('#toggle_observation')
  .addEventListener('click', toggleObservation);

.popup-specific-name {
  display: block;
  position: absolute;
  top: 0;
  width: 100%;
  text-align: center;
  background-color: #cf0;
}
.popup-specific-name.permanent {
  display: none;
  background-color: #fc0;
}
.popup-specific-name.show {
  display: unset;
}
.popup-specific-name + .popup-specific-name {
  top: 20px;
}
button { display: block; position: relative; top: 35px; }
button#toggle_observation { float: right; top: 14px; }

.as-console-wrapper { max-height: 111px!important; }

<div class="popup-specific-name permanent">
  permanent dom element, class name controlled show and hide
</div>

<button id="toggle_permanent_popup">toggle permanant popup</button>
<button id="toggle_non_permanent_popup">toggle non permanant popup</button>
<button id="toggle_observation">Start observation</button>

创建具有特定 css 的 div 时如何执行函数？

How can I execute a function when a div with a particular css is created?

javascript

dom

event-handling

tampermonkey

mutation-observers