Containing your containers: Custom JavaScript Suggestions for Lectora Online

For custom JavaScript authors, it is important to not reference container elements directly. Especially with Publishing for Seamless Play, containers such as window and document can no longer be referenced directly. Instead you need to use the global methods below to properly access these containers.

getDisplayWindow()	Returns the window objects that is to be used for dealing with the js objects generated by Lectora and all window related attributes.
getDisplayDocument()	Returns the document object that is to be used for dealing with the visual HTML objects, it contains all of the currently HTML elements for the page.
getCurrentPageDiv()	Returns an HTML element that represents the page div.
getCurrentPageID()	Returns a string with the name of the current page div.
appendElement(obj, parentElement, htmlElement)	This function can be used for attaching objects to the current page div; the customer would only need to pass in the last attribute as either a HTML element or a string.

Let’s look at some examples for clarity.

Let’s say we have an HTML Extension of Type Custom Div

that looks like this

<p id="demo"></p>

And in our title we have a button with an action to run JavaScript to change our paragraph to the current date. The JavaScript looks like this

document.getElementById('demo').innerHTML = Date();

This works in non Seamless Play Publish; however, it will not work in Seamless Play Publish.

For Seamless Play Publish, you have to change the JavaScript so that it correctly finds the document:

getDisplayDocument().getElementById('demo').innerHTML = Date();

Here is an appendElement example. This simply adds a list item to the pageDiv:

appendElement(null,null,"<li>text<li>");

This article last reviewed Dec, 2015. The software may have changed since the last review. Please visit our Release Notes to learn more about version updates.