A small JavaScript library to easily observe a page for changes to run a callback function.

Type
JavaScript Library
Since
1.0

The tool allows userscript authors to wait or monitor for a change on a page.

Details

This library provides the following functions.

syncWithElement

The function syncWithElement is part of USERSCRIPT4C_SYNC allows to check for a HTML element on a page. When this element appears, the callback function is called.

ParameterDescription
targetElementSelectorSpecify a jQuery selector to identify an element. This is the element the callback function is waiting for to appear on the page.
callbackFunctionA reference to the function to be called when the desired element appears on the page.
$observedRootElement

A jQuery reference to an element to observe for the selected element to appear in.

If undefined or empty, the body of the page is observed.

observerConfig

The configuration that is passed to the observer.

If undefined, the default configuration instructs the observer to listen to any changes on the observed root element.

{
  attributes: true,
  childList: true,
  subtree: true
}

Sample Calls

The following code creates an observer waiting for an element identified by myId to appear inside the body of the current page.

USERSCRIPT4C_SYNC.syncWithElement("#myId", function(targetElement) { AJS.log("Hello world!");});

The following code creates an observer waiting for an element with class myClass to apprear inside the referenced observed root element and the provided configuration for the observer..

USERSCRIPT4C_SYNC.syncWithElement(".myClass", function(targetElement) { AJS.log("Hello world!");}, $observedRootElement, {
  attributes: true,
  childList: false,
  subtree: false
});

monitorElement

The function monitorElement is part of USERSCRIPT4C_SYNC allows to continuously monitor a HTML element on a page for changes. On changes, the callback function is called.

ParameterDescription
callbackFunctionA reference to the function to be called when a change is registered on the page.
$observedRootElement

A jQuery reference to an element to monitor.

If undefined, the body of the page is observed.

observerConfig

The configuration that is passed to the observer.

If undefined, the default configuration instructs the observer to listen to any changes on the observed root element.

{
  attributes: true,
  childList: true,
  subtree: true
}

Resources

More information on this topic is available by the following resources.

Writing Userscripts
A short introduction to write userscripts for the Userscripts for Confluence App.
MutationObserver
The MutationObserver interface provides the ability to watch for changes being made to the DOM tree.