How to use JavaScript in Confluence

Still need help?

The Atlassian Community is here for you.

Ask the community

This guide is for informational purposes and is not eligible for support from Atlassian.  If you have any questions about the information on this page, please reach out to our community at Atlassian Answers for help. 

Purpose

Confluence provides the ability to include JavaScript codes either inside the Custom HTML or HTML macro. Applying the JavaScript inside the Custom HTML will enforce the script to be loaded in site-wide. However, applying the JavaScript inside the HTML macro will only trigger the script in a specific page in which the macro is placed.

Solution

Including JavaScript

To include JavaScript inside Custom HTML, go to Confluence Admin > Custom HTML and insert the code in the "At end of the HEAD" textbox. Ensure that the codes are wrapped inside the <script> tag, like one of the following:

(info) In the following example, our javascript file is located at <Confluence install>/Confluence/includes/js/code.js

<script type="text/javascript" src="/confluence/includes/js/code.js"></script>
code.js
alert("test alert");'
// more javascript!

To include JavaScript inside the HTML macro, ensure that HTML macro is enabled. In Confluence Editor, click Insert > Other Macros, search for HTML macro, and insert it into the page. Inside this macro, JavaScript codes can be added and they need to be wrapped inside <script> tag as explained above.

Using JQuery in Confluence

JQuery is included in Confluence by default. Its methods can be accessed through AJS.$, which searches through the DOM. As an example, to search for <div class="foo"> (i.e. a <div> tag with class foo), the following code can be used:

AJS.$('div.foo');

Please be reminded to use the toInit method everytime AJS is called. This will ensure that the JQuery codes are called only after AJS has been succesfully initialized. In order to use the toInit method, include the following:

AJS.toInit(function(){
	<!-- INSERT THE JS CODES HERE -->
});

All HTML/DOM elements inside Confluence can be manipulated using JQuery. Please refer to JQuery documentation for a list of methods that can be used to manipulate the DOM elements.

Showing Different Appearance to Anonymous Users

In order to show different appearance in Confluence to anyonymous users, you can include the following JS codes:

AJS.toInit(function(){
	if (AJS.params.remoteUser == ''){
		<!-- INSERT THE JS CODES HERE -->
	}
});

An empty remoteUser object denotes to anonymous users. A user who has successfully logged in has a username stored inside the remoteUser object.

For example, if you would like to hide the Browse menu link from the anonymous users, you can add the following JavaScripts to the Custom HTML page:

<script type="text/javascript">
	AJS.toInit(function(){
		if (AJS.params.remoteUser == ''){
		  AJS.$('#browse-menu-link').hide();
		}
	});
</script>

Alternatively, you can use Confluence Layout to show different appearance for different users: How to display different appearance for different users using Confluence layouts

Including JavaScript for Plugin Development

Please refer to the following documentation for more information on this: Including Javascript and CSS resources

Last modified on Mar 30, 2016

Was this helpful?

Yes
No
Provide feedback about this article
Powered by Confluence and Scroll Viewport.