Load Multiple Scripts After Page Has Loaded? - javascript

I am using following code inside my HTML to load a JS file after page load.(DOMContentLoaded)
<script>
document.addEventListener('DOMContentLoaded', function() {
var script = document.createElement('script');
script.src = 'https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.12.4.min.js';
document.getElementsByTagName('body')[0].appendChild(script);
});
</script>
But I have several scripts to load and I have no idea how to do this in the best possible way. For example, I have following files to link.
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.12.4.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/bootstrap/4.0.0/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2#8"></script>
Any help would be greatly appreciated.

If you know upfront the script names you can define an array like:
var scripts = ["script1.js", "anotherscript.js", "whatever.js"];
And then loop through it, and for each script you can append it as you did before
var scriptName;
for (scriptName in scripts) {
// create the script and set the src = scriptName as before
}

Related

How Can I Load Multiple Scripts After Page Has Loaded?

I am using following code inside my HTML to load a JS file after page load.(DOMContentLoaded)
<script>
document.addEventListener('DOMContentLoaded', function() {
var script = document.createElement('script');
script.src = 'https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.12.4.min.js';
document.getElementsByTagName('body')[0].appendChild(script);
});
</script>
But I got several scripts to load and I have no idea how to implement this for multiple scripts.
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.12.4.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/bootstrap/4.0.0/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2#8"></script>
Your help with this would be greatly appreciated. Thanks.
As mentioned in the comments, you could look at using a module loader.
If you want to do it without a module loader, then you have the right idea. To keep the code easier to read/shorter, you could create an array of urls and iterate through them and appending a new script element for each.
const jsFiles = [
'https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js',
'https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.12.4.min.js',
'https://ajax.aspnetcdn.com/ajax/bootstrap/4.0.0/bootstrap.min.js',
'https://cdn.jsdelivr.net/npm/sweetalert2#8'
]
jsFiles.forEach((item) => {
const scriptEle = document.createElement('script');
scriptEle.src = item;
document.head.appendChild(scriptEle);
})

How to load a script only for certain country in blogger?

I have a script which I want to load only for a certain country in blogger, how can I do that?
I tried doing something like
<script>
if (url contains .com) {
<script src=""></script>
}
</script>
but it's not working because nesting of the script is failing, the first </script> tag closes the outer <script> as well.
Like this,
<script>
if (url.indexOf(".com") > -1) {
var script = document.createElement('script');
script.src = "you/script/url";
document.getElementsByTagName('head')[0].appendChild(script);
}
</script>

Js stop scripts tags from running on condition

I want some of my scripts in my index.html page to run only on condition.
For example on specific version of IOS i want that the scripts after general.js not to run.
<script src="general.js"></script>
// stop here on condition
<script src="vendor/jquery/dist/jquery.js"></script>
<script src="vendor/angularjs/angular.js"></script>
<script src="vendor/angular-sanitize/angular-sanitize.js"></script>
<script src="vendor/angular-ui-select/dist/select.js"></script>
How can i do this?
RequireJS?
Why don't you use something like RequireJS. Have your main bootstrap script (your general.js) load all other scripts that depend on your condition.
You can't do that. Instead, insert the first general.js script as you would normally, and in your head, put a script that adds the files:
<script>
var scripts = ['vendor/jquery/dist/jquery.js', 'vendor/angularjs/angular.js',
'vendor/angular-sanitize/angular-sanitize.js', 'vendor/angular-ui-select/dist/select.js'];
if(condition) {
for(i=0;i<scripts.length;i++) {
$('head').append("<script src='"+scripts[i]+"'></script>");
}
}
</script>
Or in vanilla JS:
<script>
var scripts = ['vendor/jquery/dist/jquery.js', 'vendor/angularjs/angular.js',
'vendor/angular-sanitize/angular-sanitize.js', 'vendor/angular-ui-select/dist/select.js'];
if(condition) {
for(i=0;i<scripts.length;i++) {
script=document.createElement('script');
script.src=scripts[i];
document.getElementsByTagName('head')[0].appendChild(script);
}
}
</script>
This creates an array of the new script directories and names, and loops through them, adding them to the head of the document dynamically.

Page loading blocks by remote javascript

I am loading external javascript on my site through:
<script language="javascript" type="text/javascript">
document.write("<script src='http://remoteserver/banner.php?id=10&type=image&num=3&width=200'><\/script>");
</script>
Everything was fine, but today was a big timeout from the remote server and page loading on site was blocking.
Is there possibility to load javascript asynchronous or to load it after page loads?
I don't want page load interruption while remote server not working.
I know there are tag async in HTML5, but it's not working, i think because this script is more complex than javascript (its ending with ".php").
Also i know it's better to put javascript files before /body tag to prevent this problem, but it's not the best solution.
Do you know other solutions?
Sync script blocks the parser...
Incorrect Method:
<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
</script>
Async script will not block the rendering of your page:
Correct method:
<script type="text/javascript">
(function(){
var po = document.createElement('script');
po.type = 'text/javascript';
po.async = true;
po.src = "https://apis.google.com/js/plusone.js";
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(po, s);
})();
</script>
Source: http://www.youtube.com/watch?feature=player_detailpage&v=Il4swGfTOSM&t=1607
You can easily do it by creating DOM nodes.
<script>
var scriptEl = document.createElement("script"); //Create a new "script" element.
scriptEl.src = "http://remoteserver/banner.php?id=10&type=image&num=3&width=200";
// ^ Set the source to whatever is needed.
document.body.appendChild(scriptEl);
// Append the script element at the bottom of the body.
</script>

Load javascript dynamically?

In my project requirement I need to add java script dynamically
I have a js file global.js which contains all global variable that I want to add dynamically.
I also want to add global.js before util.js( which uses variable defined in global.js) which is not happening
If I open page source I can't see the global.js added there
I also want this to be work in all browser mainly in ie6 and ie8
my code Index.html
<script src="../fw.ui.lib/resources/sap-ui-core.js" id="sap-ui-bootstrap"
data-sap-ui-libs="sap.ui.commons, sap.ui.table, sap.ui.ux3"
data-sap-ui-theme="sap_goldreflection">
</script>
<script src="../fw.ui/js/application_properties.js" type="text/javascript"></script>
<script src="../fw.ui/js/header.js" type="text/javascript"></script>
<script src="../fw.ui/js/dao/userDAO.js" type="text/javascript"></script>
<!-- add sap.ui.table,sap.ui.ux3 and/or other libraries to 'data-sap-ui-libs' if required -->
<script src="js/controls/DynamicJsLoad.js" type="text/javascript"></script>
<script></script>
<script>addScriptDynamically()</script>
<script src="js/controls/util.js" type="text/javascript"></script>
DynamicJsLoad.js
function loadScript(url){
var e = document.getElementsByTagName("script")[5];
var d = document.createElement('script');
d.src = url;
d.type = 'text/javascript';
d.async = false;
d.defer = true;
e.parentNode.insertBefore(d,e);
}
function addScriptDynamically(){
var scheme = getCacheBurstScheme();
if( scheme == 'dev'){
scheme = new Date();
}
loadScript('js/global.js'+'?scheme='+scheme);
}
If you are using jQuery anyway, you could leverage their loadScript() function. An example from their website:
$.getScript("ajax/test.js", function(data, textStatus, jqxhr) {
// [...]
});
Regarding your current solution, here are a couple of hints:
You set defer = true, which will defer loading (and executing) of your dynamically loaded script to the end. Thus after util.js. I don't think you want that
Dynamically loaded js sources do not appear in your page's source code. You might need to use a tool like Firebug to validate if things have loaded.

Categories

Resources