Confluence で JavaScript を使用する方法

お困りですか?

アトラシアン コミュニティをご利用ください。

コミュニティに質問


プラットフォームについて: Server および Data Center のみ。この記事は、Server および Data Center プラットフォームのアトラシアン製品にのみ適用されます。

Support for Server* products ended on February 15th 2024. If you are running a Server product, you can visit the Atlassian Server end of support announcement to review your migration options.

*Fisheye および Crucible は除く

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. 

目的

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.

ソリューション

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:

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

<script type="text/javascript" src="/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.

You can run the following in the javascript console of a Confluence page, to check the jQuery version being used. 

console.log(jQuery().jquery);
> 2.2.4


Showing Different Appearance to Anonymous Users

In order to show different appearance in Confluence toanyonymoususers, 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

説明 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.
製品Confluence
プラットフォームServer
最終更新日: 2022 年 10 月 4 日

この内容はお役に立ちましたか?

はい
いいえ
この記事についてのフィードバックを送信する
Powered by Confluence and Scroll Viewport.