I'm loading a javascript external file from another javascript file present in the document and since its loaded, I want to call a function from the loaded js file.
Here is the load function:
function loadScript(url) {
var head = window.top.document.getElementsByTagName('head')[0];
var script = window.top.document.createElement('script');
script.src = url;
script.type= "text/javascript";
head.appendChild(script);
if(script.readyState) { //IE
script.onreadystatechange = function() {
if ( script.readyState === "loaded" || script.readyState === "complete" ) {
script.onreadystatechange = null;
console.log("[BANDEAU] script loaded");
testAlert();
}
};
} else { //Others
script.onload = function() {
console.log("[BANDEAU] script loaded");
testAlert();
};
}
}
So it works nice because the javascript file is succesfuly loaded but I cannot access the testAlert() method from the loaded javascript file, as I try in the code above, right after printing that the script is loaded. When I try to get the type of the function with typeOf on window[testAlert], I get an undefined. But when I try to execute the testAlert() method in the developer console, it works perfectly. Does anyone see what I'm doing wrong ?
Does the position in the DOM between the caller javascript file and the loaded javascript file might be the reason ?
You need to assign the load handlers BEFORE changing the src
function loadScript(url) {
var head = document.getElementsByTagName('head')[0]; // window.top in frames/iFrames
var script = document.createElement('script');
script.type = "text/javascript";
if (script.readyState) { //IE
script.onreadystatechange = function() {
if (script.readyState === "loaded" || script.readyState === "complete") {
script.onreadystatechange = null;
console.log("[BANDEAU] script loaded");
testAlert(); // window.top.testAlert() if needed
}
};
}
else {
script.onload = function() {
console.log("[BANDEAU] script loaded");
testAlert(); // window.top.testAlert() if needed
};
}
script.src = url;
head.appendChild(script);
}
In addition to what mplungjan said, I'm pretty sure you'd have to do an eval() on the loaded script in order to have a legitimate address for the call to testAlert().
Also, check out this link for more info.
Related
I'm trying to run javascript on a form that is loaded in content coming from an external js file, but it's failing because content doesn't load right away
I've tried listening for the load of the html button in the iframe, but not getting anything:
document.querySelector('#hyform button').addEventListener('load', function() {
console.log('external js content loaded');
}
UPDATED QUESTION. This is not an iframe but content loaded from an external js file. I dont have control of the external js file.
You can dynamically append the file to <head>, then monitor the load state:
var callback = function () {
// do stuff
};
var script = document.createElement('script');
script.src = 'path_to_file.js'
script.type = 'text/javascript';
if (script.readyState) {
if (script.readyState === 'loaded' || script.readyState === 'complete') {
callback();
script.onreadystatechange = null;
}
} else {
script.onload = function () {
callback();
};
}
document.getElementsByTagName("head")[0].appendChild(script);
I use an external js file on my site, it currently sits at the bottom of my boilerplate.
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>
I only need to load this script on specific pages or when a specific modal loads.
Is there a way to call the script from my javascript code. For example:
$(document).one('opened.fndtn.reveal', '#my-modal[data-reveal]', function () {
//load places api
});
Also Google suggest having it on every page - why is this? I do not need to use it on every page.
You can use .getScript()
Load a JavaScript file from the server using a GET HTTP request, then execute it.
$.getScript("https://maps.googleapis.com/maps/api/js?libraries=places", function(){
alert("script loaded");
});
Another way if you don't have jQuery.
function inyectScript(url, success){
var script = document.createElement('script');
script.src = url;
script.id = "myScript";
var done = false;
script.onload = script.onreadystatechange = function() {
if (!done && (!this.readyState || this.readyState === 'loaded' || this.readyState === 'complete')) {
done = true;
success();
script.onload = script.onreadystatechange = null;
}
};
document.getElementsByTagName('head')[0].appendChild(script);
}
How to correctly load jQuery library if it is not loaded yet?
somepage.html:
<script src="http://example.com/js/widget_init.js" type="text/javascript"></script>
<script type="text/javascript">
if (typeof jQuery == 'undefined') {
console.log('ERROR: NOT LOADED');
}
else{
console.log('OK');
}
</script>
The script 'widget_init.js' should load jQuery if it is not loaded yet.
I have this script 'widget_init.js':
function load_script_jquery(){
if (typeof jQuery == 'undefined') {
var jq = document.createElement('script'); jq.type = 'text/javascript';
jq.src = '/path/to/js/jquery.min.js';
document.getElementsByTagName('head')[0].appendChild(jq);
}
else {
}
}
load_script_jquery();
// some other code
The problem is that it doesn't wait for jQuery to be loaded and it shows error like this:
<script type="text/javascript">
if (typeof jQuery == 'undefined') {
console.log('ERROR: NOT LOADED'); // NOT LOADED
}
else{
console.log('OK'); // NEVER GOES HERE
}
</script>
I tried this also without any effect:
document.write('<script src="/path/to/js/jquery.min.js" type="text/javascript"><\/script>');
How to wait until jQuery is loaded so I can use it ?
Your code to append the jQuery script will be appended after your <script> snippet that checks for it. That's how .appendChild works
The Node.appendChild() method adds a node to the end of the list of children of a specified parent node
Source: https://developer.mozilla.org/en-US/docs/Web/API/Node.appendChild (emphasis mine)
Here are two options to solve this:
If you can insert HTML on the page
You can use this snippet from the HTML5 Boilerplate. It will check if another script has already loaded jQuery, and if not, will load it inline.
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.2.min.js"><\/script>')</script>
Just drop it in your head or body tag before the script that depends on it.
If you need to dynamically load it in the Javascript source
Follow the instructions in this tutorial
(function () {
function loadScript(url, callback) {
var script = document.createElement("script")
script.type = "text/javascript";
if (script.readyState) { //IE
script.onreadystatechange = function () {
if (script.readyState == "loaded" || script.readyState == "complete") {
script.onreadystatechange = null;
callback();
}
};
} else { //Others
script.onload = function () {
callback();
};
}
script.src = url;
document.getElementsByTagName("head")[0].appendChild(script);
}
loadScript("https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js", function () {
//jQuery loaded
console.log('jquery loaded');
});
})();
You just need callback function, after loading jquery secessfully:
var loadJS = function(url, cb) {
var script_tag = document.createElement('script');
script_tag.setAttribute("type", "text/javascript");
script_tag.setAttribute("src",
url);
if (script_tag.readyState) {
script_tag.onreadystatechange = function() { // For old versions of IE
if (this.readyState == 'complete' || this.readyState == 'loaded') {
cb();//calling callback
}
};
} else { // Other browsers
script_tag.onload = cb;//calling callback function
}
(document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag);
};
And simply call this function with jquery library path and callback function reference:
loadJS(hostUrl + "/js/libraries/jquery.js", callback);
Inside a script file I have to dynamicaly import another script and use functions and variables defined inside of it.
Right now, I'm adding it to the HEAD section of the Page, but just after adding it, functions and variables defined inside the outer script are not loaded and ready for use yet. How can I do that and be sure that the script was fully loaded?
I've tried using script.onreadystatechange and script.onload callbacks but I'm having some browser compatibility issues.
How do I do that, as safely as possible, with pure JS and decent browser compatibility?
Sample:
uno.js:
var script = document.createElement("script");
script.src = "dos.js";
script.type = "text/javascript";
document.getElementsByTagName("head")[0].appendChild(script);
alert(outerVariable); // undefined
dos.js:
var outerVariable = 'Done!';
sample.html
<html>
<head>
<script type="text/javascript" src="uno.js"></script>
</head>
...
</html>
If you are concerned with non-IE browsers I would try using DOMContentLoaded to see if the script is fully loaded.
You can see more about it here
In fact this is sort of how JQuery works with document ready. This is the snippit from the jquery source:
if ( document.addEventListener ) {
// Use the handy event callback
document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false );
// A fallback to window.onload, that will always work
window.addEventListener( "load", jQuery.ready, false );
// If IE event model is used
} else if ( document.attachEvent ) {
// ensure firing before onload,
// maybe late but safe also for iframes
document.attachEvent( "onreadystatechange", DOMContentLoaded );
// A fallback to window.onload, that will always work
window.attachEvent( "onload", jQuery.ready );
// If IE and not a frame
// continually check to see if the document is ready
var toplevel = false;
try {
toplevel = window.frameElement == null;
} catch(e) {}
if ( document.documentElement.doScroll && toplevel ) {
doScrollCheck();
}
}
If you were to look at the jquery code to copy what they do it's in the bind ready function of the full source code.
So far, this seems to be the better working approach. Tested on IE9, Firefox and Chrome.
Any concerns?
uno.js:
function loadScript(url, callback) {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = url;
if (navigator.appName=="Microsoft Internet Explorer") {
script.onreadystatechange = function(){
if (script.readyState == 'loaded') {
document.getElementsByTagName('head')[0].appendChild(script);
callback();
}
};
} else {
document.getElementsByTagName('head')[0].appendChild(script);
script.onload = function(){
callback();
};
}
}
loadScript('dos.js', function(){
alert(outerVariable); // "Done!"
});
use the onload (IE9-11,Chrome,FF) or onreadystatechange(IE6-9).
var oScript = document.getElementById("script")
oScript.src = "dos.js"
if (oScript.onload !== undefined) {
oScript.onload = function() {
alert('load')
}
} else if (oScript.onreadystatechange !== undefined) {
oScript.onreadystatechange = function() {
alert('load2')
}
}
I have reference to bunch of javascript file on my page which are used by different functions calls.
When I load the page, first all external JS files get loaded.
Is there anyway so that they get called only when function call occurs for that .js file?
You can add your conditions to this method, which allows you to dynamically add an external javascript file:
function loadScript(url, callback){
var script = document.createElement("script")
script.type = "text/javascript";
if (script.readyState){ //IE
script.onreadystatechange = function(){
if (script.readyState == "loaded" ||
script.readyState == "complete"){
script.onreadystatechange = null;
callback();
}
};
} else { //Others
script.onload = function(){
callback();
};
}
script.src = url;
document.getElementsByTagName("head")[0].appendChild(script);
}
By using JQuery
$.getScript("//platform.twitter.com/widgets.js")
No simple way for get JS fyle for function "on-fly". Also, for load file for function system need some time. May be good solution will using minification for JS-files?
You may try some as this.
loadExternalScriptFile = function(filename, callback) {
var fileref = document.createElement("script");
if (fileref){
fileref.setAttribute("type","text/javascript");
fileref.setAttribute("src", filename);
fileref.onload = callback;
if (typeof fileref != "undefined")
document.getElementsByTagName("head")[0].appendChild(fileref);
}
}
var functionMap = {
'function1': 'js/f1.js',
'function2': 'js/f1.js',
'function3': 'js/f3.js'
};
function checkFunction(functionName, callback) {
if (typeof window[functionName] !== 'function') {
loadExternalScriptFile(functionMap[functionName], callback);
return;
}
callback();
return;
}
//Using
checkFunction('function1', function(){
function1(params);
});
But i think loading all in minification version and single file is better.