About JavaScript links

<< Click to Display Table of Contents >>

Navigation:  Reference > Project Content > Scripts and HTML >

About JavaScript links

You can enter links that execute JavaScript code both in the text of your topics and in in hotspots in your graphics. Since JavaScript is an HTML-based technology requiring a browser this feature is only supported in HTML-based output formats (HTML Help, WebHelp and Visual Studio Help). Note that although Windows Exe and ePUB eBooks are also HTML-based, JavaScript is not supported in eBooks: The embedded viewer in Exe eBooks does not support JavaScript. Even though scripting is officially included in the ePUB specification, neither Apple iBooks® nor the majority of other readers for ePUB eBooks support it, so it is effectively irrelevant in ePUB.

You can also include JavaScript and other script code in plain HTML code inserted in your topics using the Insert > HTML Code feature. This option is normally preferable to script links for more complex code. See About inline HTML code for some more information on this.

JavaScript restrictions in users' browsers:

In HTML Help you can generally assume that MSIE-compatible JavaScript will work because the HTML Help viewer is actually Microsoft Internet Explorer with a different user interface. However, when you use JavaScript in WebHelp remember that some users may have JavaScript turned off, so your help should also be comprehensible and functional without the additional JavaScript functions.

JavaScript links that refer to script functions:

You can also refer to JavaScript functions stored in your own external JavaScript code (i.e. code that you have written) in JavaScript links. There are several different ways to make these functions available to the JavaScript links:

Add your separate .js script file to the Baggage Files to include it in your output. Then edit the HTML page template for your topics and add an include for the .js script file in the appropriate location in the template file.

Use HTML variables – you can then insert your script in the correct position in your template with the variable and redefine it on a per-topic basis in the Topic Options tab on the left of the main editor window, allowing you to use different versions of your code in every topic if you want.

Edit the HTML template for your topics and manually add the script with the functions to the <head> section of the template. Note that this will include the script code in every topic page, even those pages where the functions are not needed. (See About inline HTML code for details on how to avoid this problem.)

Insert the script code containing the functions at the beginning of the topic containing the link with the Insert > HTML Code function. If you use this method the code will only be available in the topic where you insert it. Note also that this will insert the code between the <BODY> tags of the topic page – this will work in most cases but since referenced scripts should generally be in the <HEAD> section you may want to use one of the other methods.

How Help+Manual handles JavaScript code in links:

To use this feature effectively it is important to understand how Help+Manual handles the JavaScript code you enter in your links. When you select the JavaScript option in the Insert Hyperlink dialog the script you enter in the dialog box is only part of the final code generated in your output:

This dialog is effectively identical for script links in your text and script links in hotspots in graphics.

This dialog is effectively identical for script links
in your text and script links in hotspots in graphics.

In the HTML output the code is put together as follows:

<a href="  +  your code  + ">  +  link caption  + </a>

For example, if you enter javascript:alert('Hello World!'); in the Script: entry box and Hello World! in the Caption: field Help+Manual will generate the following link:

<a href="javascript:alert('Hello World!');">Hello World!</a>

That is just a simple example. Here is a more complex piece of JavaScript as entered in the Script: entry box (this example opens a popup window):


The output generated from this script would look like this:

<a href="javascript:window.open('http://www.helpandmanual.com/helphtml/index.html?whatsnew.htm','PopupWindow','toolbar=0,location=0,directories=0,status=0,menubar=0,resizable=yes,scrollbars=1,width=600,height=600,left=0,top=0');">Your Link Caption</a>

Entering complex JavaScript Code:

Effectively, Help+Manual enters your JavaScript code between the " and " characters for the href= attribute of the <a> tag. However, this is not nearly as restrictive as it sounds at first. When you understand how Help+Manual actually generates the output code you can also enter quite complex scripts. You just have to remember the syntax and work within it:

<a href="  +  your code  + ">  +  link caption  + </a>

For example, you can also create a complex link tags like this, using multiple quotes within the tag:

<a href="javascript:void(0);"
onmouseover="return overlib('Popup text.', STICKY, MOUSEOFF);"
onmouseout="return nd();">Display Overlib Popup</a>

All you need to do to achieve this is copy the entire link shown above into the Script: field, leaving out the <a href=" at the beginning and the ">Display Overlib Popup</a> at the end. For the above example you would first enter Display Overlib Popup in the Caption: field and the following code in the Script: field:

onmouseover="return overlib('Popup text.', STICKY, MOUSEOFF);"
onmouseout="return nd();

JavaScript stumbling blocks:

Remember that JavaScript is very picky about syntax and case! For example, if you enter javascript:Alert("Hello World!") instead of javascript:alert("Hello World!") you will just get an error message.

You must also remember to be very careful about nesting single and double quotes. Help+Manual generates script links with double quotes on the outside so any quotes nested within those quotes must be single quotes.

See also:

Inserting script and macro links

Inserting plain HTML code

About inline HTML code

Using HTML Templates