Page tree

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 6 Next »

 

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

Type
Since
1.0

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

Details

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, 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 apprear 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
});

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.
  • No labels