JavaScript modules are supported starting with ManualWorks 6.0.5.

What Is a JavaScript Module?

You can insert a JavaScript module with an object paragraph. This lets you put JavaScript written with keywords such as import and export into the web viewer.

The following is a simple matching numbers game written as a JavaScript module.

There are 8 pairs of matching two-digit numbers. In this simple game, you click matching numbers one after another until you have matched them all.

Inserting a JavaScript Module

Insert a JavaScript module with an object paragraph.

Note the following.

Select 1Javascript Module as the object paragraph type.
Enter the 2address of the JavaScript to insert in the “Javascript Module” field.
In the web viewer, the module is loaded lazily(Lazy Loading) when the object paragraph appears on the screen.

The JavaScript address used in the example above is as follows.

https://3rabbitz.github.io/javascript-module/find-same-numbers/module.js

Notes

Note the following when you use JavaScript modules.

Using Trusted JavaScript

A JavaScript module can access objects such as the web browser's document object. Therefore, use only trusted JavaScript.

Inserting `Element` Objects in the Web Viewer

This shows how to insert Element objects to build a UI.

const id = new URL(import.meta.url).searchParams.get('id');
const panel = document.getElementById(id);

const button = document.createElement('button');
panel.append(button);

1Gets the id value of the object paragraph.

2Accesses the object paragraph with the document.getElementById function.

4Creates the Element you need, such as a button.

5Inserts the Element object into the object paragraph.

Adding CSS Files Dynamically

Add CSS files as shown in the following code.

import sheet from './find-same-numbers.css' with { type: 'css' };

document.adoptedStyleSheets = [sheet];

1Change ./find-same-numbers.css to the actual location of your CSS file.

PDF, EPUB, and MS Word

In files that do not support JavaScript modules, such as PDF, EPUB, and MS Word files, a link to the web viewer is inserted.

If you set an 3Alternative URL, the link goes to that address. Otherwise, it goes to the paragraph in the web viewer.