Rld allows dynamic loading of javascript scripts within a web page.
The software consists of 3 elements:
- The rld code (in the form of .js files or inline scripts)
- a .json file
- an optional global variable
rld
Using Rld we can control the moment in which the external scripts are inserted and loaded on the web page.
- the list of external scripts is delegated to a single file in json format (rld.json) and subtracted from html code
- the scripts are loaded following the reading order of the rld.json file
- scripts are loaded after
readyandloadevents - simplified maintainability
- cross browser compatibility
When it is loaded, rld.js looks for the <script> tag that generated it.
The data-rld attribute helps rld.js in this search.
data-rld is optional but recommended.
- inline (this is the safest method!)
- download the file rld.min.js (rld.js if you are debugging)
- open the file with a simple text editor
- copy the contents of the file
- create a
<script data-rld></script>tag in your html code - paste the contents of the file into the tag
e.g.
<script data-rld>/** @license Rld (Ready Loaded Document) may be freely distributed under the GNU AGPLv3 license. (c) 2018-2018 Giuseppe Ferri */ !function(r,u,e){if(!r||!u)throw new Error("rld needs a window and a document!");if(!u.querySelector("html"))throw new Error("rld needs a html element!"); [...]</script>
_
- external
- download the file rld.min.js (rld.js if you are debugging) or note the file link in the server
- create a tag
<script data-rld src=_path_></script>into your html code (_path_is the address to the rld.js file)
e.g.
<script data-rld src="https://jfprogrammer.altervista.org/rld/dist/rld.min.js"></script>
_
Rld works as a simple drop-in solution.
In most cases there is no need to configure Rld.
Rld needs a .json file.
By default Rld searches for and loads a rld.json file in the same directory as the html page.
It is possible to pass a personalized path in two ways:
- adding a string with the path as the third argument at the end of the rld.js code
- creating a global
rldvariable with apathproperty before including the code rld.js (see below)
Mode 1 does not work with the minimized file rld.min.js
The structure is based on this scheme:
{
"_name_": {
"path": "_available_path_",
"event": "_available_event_",
"insert": { "element": "_available_element_", "position": "_available_position_" }
},
}_name_: [required] the name of the script (it must match the file name without the .js extension)_available_path_: [optional] the path to the script. The string can be modified. The default value is"./_name_.js".- an empty string
"" -> "./_name_.js" - the string ends with a slash
"dir/" -> "dir/_name_.js" - the string ends with a directory
"dir" -> "dir/_name_.js" - the string ends with .js
- corrected
"dir/_name_.js" -> "dir/_name_.js" - wrong
"dir/file.js" -> "dir/file.js"
- corrected
- the string ends with
_name_- corrected if the script is in a folder with the same name as
"dir/_name_" -> "dir/_name_/_name_.js"
- corrected if the script is in a folder with the same name as
- an empty string
_available_event_: [optional] the event after which to insert the script in the DOM. Valid values are"ready","load". The default value is"load".insert: [optional]_available_element_: [optional] the HTML element to refer to when inserting the script. Rld uses the querySelector function, so the value can be a DOMString containing one or more selectors to match. This string must be a valid CSS selector string. The default value is"body"._available_position_: [optional] the position relative to_available_element_in which to insert the script. Rld uses the insertAdjacentScript function. The allowed values are:"beforebegin","afterbegin","beforeend","afterend". The default value is"beforeend".
e.g.
root/test/index.html root/js/script1.js root/js/script2.js root/js/script3.js root/test/script4.js root/js/script5.js <---- error root/js/script6.js root/js/script7/script7.js root/test/script8.js{ "script1": { "path": "../js/script1.js", "event": "ready", "insert": { "element": "head", "position": "afterbegin" } }, "script2": { "path": "../js/", "event": "ready", "insert": { "element": "head", "position": "beforeend" } }, "script3": { "path": "../js", "event": "ready", "insert": { "element": "head", "position": "beforeend" } }, "script4": { "path": "", "event": "ready", "insert": { "element": "head", "position": "beforeend" } }, "script5": { "comment": "Failed to load resource: the server responded with a status of 404 ()", "path": "../js/script5", "event": "ready", "insert": { "element": "head", "position": "beforeend" } }, "script6": { "path": "../js/script6.js", "event": "load", "insert": { "element": "body", "position": "beforeend" } }, "script7": { "path": "../js/script7", "insert": { "element": "body", "position": "beforeend" } }, "script8": { }, }_
The rld option is an object, which describes the path to file .json containing the information to insert the scripts dynamically.
Configuring rld before rld.js is included.
// create a global rld options object
window.rld = {
path: _path_json_
};At the moment Rld is still under testing.
| Browser | Version | Support |
|---|---|---|
| UC Browser | 7.0.185.1002 | yes |
| Chrome | 71.0.3578.98 | yes |
| Safari | 5.1.7 (7534.57.2) | yes |
| Opera | 57.0.3098.116 | yes |
| Firefox | 64.0.2 | yes |
| Browser | Version | Support |
|---|---|---|
| Edge | 42.0.0.2851 | yes |
| Firefox | 64.0.2 | yes |
| Chrome | 71.0.3578.98 | yes |
| Opera | 49.2.2361.134358 | yes |
| Opera Mini | 38.0.2254.134507 | no |
The term rld is the union of the Ready Loaded Document initials and indicates the two events related to the loading of the DOM and document resources.
last update: v1.0.0-beta1
- rld.js (last update)
- rld.min.js (last update)
- rld.min.js.map (last update)