ScriptManager.loadScript

Syntax

PP.ScriptManager.loadScript(url: String, callback: PP.Delegate|function, head: String, id: String);

Parameters

url. Script URL.

callback. Callback function executed after the script is loaded.

head. The tag, in which the script is connected. Optional parameter, by default is equal to "head".

id. Identifier for the <script> tag. Optional parameter.

Description

The loadScript method loads a JS script.

Example

To execute the example, create an HTML page and perform the following operations:

1. Connect the PP.js file.

2. In the <body> tag place the <div> element with the "box" identifier.

3. The root folder must contain folders named css and script. The first of these folders must contain the PP.css file and the custom file settings.css, that has the following contents:

#box {
    width: 300px;
    height: 100px;
    background-color: yellow;
}

The script folder must contain the fontBox.js file with the following contents:

// Create a component for text setup
var fontBox = new PP.Ui.FontBox();
// Get DOM elements of component
var dom = fontBox.getDomNode();
// Place component to the div block
document.body.getElementsByTagName("div")[0].appendChild(dom);

4. The parent folder must contain a standard images folder of Foresight Analytics Platform web application named img, and the resources folder named resources.

Programmatically load PP.css, settings.css, fontBox.js, resources.ru.js files to HTML page, and process the BeforeScriptLoad, ScriptLoaded, and AllNodesLoaded events. To do this, open the created HTML page and run the following script in the browser console:

PP.ImagePath = "../img/"; // Set path to images files
PP.ScriptPath = "script/"; // Set path to js scripts
PP.CSSPath = "css/"; // Set path to css files
// Process the BeforeScriptLoad event
PP.ScriptManager.BeforeScriptLoad.add(function (sender, args) {
    console.log("The following script will be loaded: " + args.Src);
});
// Process the ScriptLoaded event
PP.ScriptManager.ScriptLoaded.add(function (sender, args) {
    console.log("Loaded script (with parameters): " + args.Src);
    console.log("Loaded script (without parameters): " + PP.ScriptManager.getRawUrl(args.Src));
});
// Process the AllNodesLoaded event
PP.ScriptManager.AllNodesLoaded.add(function (sender, args) {
    console.log("All scripts are loaded");
});
// Load settings
PP.ScriptManager.loadScript(PP.ScriptPath + "fontBox.js");
// Load settings for resources
PP.ScriptManager.loadScripts(["../resources/resources.ru.js"]);
// Specify the path to the root folder containing files of resources
PP.resourceManager.setRootResourcesFolder("../resources/");
var styles = [PP.CSSPath + "settings.css", PP.CSSPath + "PP.css"];
// Load styles
PP.ScriptManager.loadStyles(styles);

After executing the example custom style is applied to <div> element, and a component for text formatting is placed within this element:

Browser console shows addresses of the scripts that must be loaded, already are loaded (parameterized and parameterless), and a message informing that loading is completed:

The following script will be loaded: script/fontBox.js

The following script will be loaded: ../resources/resources.ru.js

true

Loaded script (with parameters): ../resources/resources.ru.js?pp=8.0.21218.0

Loaded script (without parameters): ../resources/resources.ru.js

All scripts are loaded