littlelio wrote:For certain page which I want to custom respectively, is it the 'content' the place I add <script></script> containing the custom JS codes?
Yes you can normally add <script>...</script> at the bottom of your page 'content'. Some precautions:
Since X3 is an 'ajax' application, code you add here will execute each time the page is navigated to. Not usually a problem, but if you are loading external javascripts, the javascript will re-load each time (even if already loaded), and if you are defining functions, functions will be redefined each time (even if already defined). You may want to predefine functions globally in Settings > Custom > Custom Javascript, and if you load external scripts, you may want to add them globally to Settings > Custom > Head, OR include some logic to make sure the external script only loads once. It is however normally harmless to reload external scripts or redefine functions.
Another thing to consider, if you are trying to use jQuery in your JS (included in X3), jQuery will not yet be loaded once the browser sees your custom <script> on page load. You would either need to add some logic to check if jQuery is loaded, or add your JS into Settings > Custom > Custom Javascript. For example:
myFunction(){
// do your stuff
}
function x3_load_page(){
if(x3_page.permalink === '/path/to/page/'){
// do your stuff, jQuery is loaded
myFunction();
}
}
If you want to run jQuery from inside content using jQuery, you could use something like this:
if(typeof $ != 'undefined'){
myFunction();
} else {
document.addEventListener("DOMContentLoaded", function(event) {
myFunction();
});
}