Insert JavaScript (JS)

,
#1

Hi, I want to implement a 3rd party software in my wiki. They provide a javascript which has to be placed before the closing </body> tag on the page where I want to use the software. I’m not sure, which tiddler would be the right one to place the script in. I’ve checked the tiddler explorer > core > templates but I’m still too new and unexperienced to TW to make the right choice (and of course don’t want to make a mistake). Could anyone please help me with this?

#2

One thing that’s great about tiddlywiki is it’s extremely flexible, modular and un-opinonated.
So while there are often “tiddlywiki-preferred” way to do things, there are lots of ways to accomplish the same thing and if they work well for you they aren’t “wrong.” Plus you can even adjust them later pretty easily.

Anyways, for this I would recommend just making a regular old tiddler, name it something short but descriptive like MyApp, making the type JavaScript and put your self-contained javascript CodeBlock.

Then you can transclude this tiddler on other tiddlers to add the application like {{MyApp}}

This is a good way to play around with TiddlyWiki and get a feel for your new workflow without changing any core functions out the gate.

#3

This will not work. For security reasons, regular tiddlers cannot contain embedded javascript. The TWCore automatically “sanitizes” the content to remove any <script>...</script> code.

There are two primary ways to invoke a tiddler containing javascript code:

  • Add a module-type field to the tiddler with a value of plugin or library and then save-and-reload. When your TiddlyWiki is loaded into the browser, the TWCore finds the tiddlers that have the module-type field, and executes the code during the startup processing. Note that the plugin or library tiddler should just contain the javascript code WITHOUT the surrouding <script> and </script> syntax.

  • Alternatively, you can place the desired javascript code WITH the surrounding <script> and </script> syntax into a tiddler tagged with $:/tags/RawMarkup (or perhaps $:/tags/RawMarkupWikified/BottomBody) and then save-and-reload. This effectively inserts the tiddler’s javascript content directly into the saved TiddlyWiki file so it’s <script>...</script> content can be processed by the browser itself.

Note that neither of these methods guarantees that such javascript code will function as intended, but it’s always worth a try as an initial attempt to add 3rd-party code.

-e

3 Likes
#4

Yes, I’m familiar with transclusion. But I have no idea in which tiddler to transclude my js-tiddler. Which tiddler holds the overall page structure? I need to put it in there before the closing </body> tag…

#5

Thank you, Eric. I read your second suggestion already on this thread: Placement of Matomo analytics script - #2 by EricShulman But there you say the script will be inserted at the end of the </head>section. So where exactly will it go?

#6

if you look in the main template $:/core/templates/tiddlywiki5.html you an see where code can be added by tag.

#7

There are several alternative “RawMarkup” tag values, each of which inserts the script code at different places within the saved TiddlyWiki file. Search for “raw” on TiddlyWiki.com to see documentation for the various RawMarkup tag values.

-e

1 Like
#8

Note that sometime the instructions for adding js to a static webpage will not work for tiddlywiki, if you say which library you want to add we can look to see how the js library should be added to tiddlywiki