i want to load multiple javascript file using one javascript file
i have four javascript
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="http://ec2-174-129-44-226.compute-1.amazonaws.com/apiTools/jquery.livequery.js"></script>
<script src="http://localhost/effbugs/apiTools/tools.js?apikey=fztxljpnxqtssgtiquwr&pid=1"></script>
i want to intergrate above four javascript in one javascript file that i will load one instead of four and i will work proper
please give me suggestion for that
please help me
thanks...
Well, there are a few options:
1. Combine them into one file
Here is how you can do it with cat:
cat jsfile1.js jsfile2.js jsfile3.js ... > combined.js
2. Load them via require.js
More info at requirejs.org.
3. Create an script element for each URL and append it to DOM
/**
* loader.js
*/
window.addEventListener('load', function () {
var head = document.getElementsByTagName('head')[0],
urls = ["http://code.jquery.com/jquery-1.10.1.min.js",
"http://code.jquery.com/jquery-migrate-1.2.1.min.js",
"http://ec2-174-129-44-226.compute-1.amazonaws.com/apiTools/jquery.livequery.js",
"http://localhost/effbugs/apiTools/tools.js?apikey=fztxljpnxqtssgtiquwr&pid=1"];
urls.forEach(function (url) {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = url;
head.appendChild(script);
});
});
You can do in this way to include all js files, But while loading I guess they loads asynchronously and they might not maintain order the order.
var scriptElement = document.createElement('script');
scriptElement.src = 'http://code.jquery.com/jquery-1.10.1.min.js';
document.getElementsByTagName("head")[0].appendChild(scriptElement);
Its quite simple, you just copy the content of all 4 files and place them into 1 file in order like this.
Master.js:
// Content of jquery-1.10.1.min.js
// Content of jquery-migrate-1.2.1.min.js
// Content of jquery.livequery.js
// Content of tools.js
Or
Master.js:
var script = document.createElement('script');
script.src = 'jquery-1.10.1.min.js';
document.head.appendChild(script);
// Do this for each file
Related
I want to load <div> content dynamically by using AJAX in a specific div. After the AJAX call I want to load a JS file in the footer. I loaded content by clicking menu without page loading by using URL hash. My problem is when I click the same link multiple times, the JS file is loading multiple times because the JS file is appended. That's why every event occurs multiple times. I want to load the JS file before checking if the file is already loaded into the DOM. If the file is not loaded in the DOM, I will append a JS file in the DOM.
As the answer suggested by this URL, here is my code:
var Utils = {
loadjs: function(url){
var footer = document.getElementsByTagName('body')[0];
var script = document.createElement( 'script' );
script.type = 'text/javascript';
script.src = url;
footer.appendChild(script);
},
}
Utils.loadjs(url);
You can read the script tags to search for a particular script is there or not. Something like below:
var Utils = {
loadjs: function(url) {
var me = document.querySelectorAll('script[src="' + url + '"]');
if (me && me.length >= 1) {
return null;
}
var footer = document.getElementsByTagName('body')[0];
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = url;
footer.appendChild(script);
},
}
Utils.loadjs(url);
You can use dynamic import() syntax to load modules, even from regular scripts.
This has the benefit of loading those scripts as modules, which are always in strict mode and have module scope.
Read more about dynamic import
So, instead of Utils.loadjs(url), just import(url)
<html>
<head>
<script async src="https://www.googletagmanager.com/gtag/js?id=xxxxx">
</script>
<html>
replace value xxx by var get from config
<script async src="https://www.googletagmanager.com/gtag/js?id=Var">
I want to replace the value of the id in src of script with a variable that I get from conf file
any help?
As HTML is "read" by the web browser, you won't be able to simply add a variable to a <script> tag. You can accomplish this through pure Javascript by loading in the file dynamically as stated here: Dynamically load JS inside JS
Where id_number is the number you are attempting to add:
var url_string = 'https://www.googletagmanager.com/gtag/js?id=' + id_number
var script = document.createElement('script');
script.onload = function () {
//do stuff with the script
};
script.src = url_string;
document.head.appendChild(script);
I am attempting to load an external JS file to the end of the body if the URL does not container a given parameter. Here is what I have tried without any success. I am looking to load the file if the URL does not contain ?A=Edit
if (/[?]A=Edit/.test(window.location.href)) {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = '/js/inner-functions.js';
$('body').append(script);
}
If anyone can point me in the right direction that would be great.
Just inverse your condition:
if (!/[?]A=Edit/.test(window.location.href)) {
...
You should verify your application context/state inside your .js file, not outside.
Basically, I want to do this:
<script src=" path + '/jquery.js'"></script>
(Obviously that won't work.)
I have a standalone page loading external scripts with <script>, but the URL needs to be prefixed with the variable path (because the page is run on different servers in different environments). I easily get path from the URL which always ends with "?path=X" where X is the actual path.
If I had jQuery, I know I could use getScript() to dynamically load external .js files, but jQuery is one of the files I need to load! I don't need anything too complicated here, no need to worry about encoding or file-types, it's a fairly simple situation except for the changing servers.
You need to use plain javascript if jquery not loaded. Something like that:
var fileref=document.createElement('script');
fileref.setAttribute("type","text/javascript");
fileref.setAttribute("src", path + '/jquery.js');
document.getElementsByTagName("head")[0].appendChild(fileref);
fileref.onload = function(){alert('loaded')};
You can load JS files by inserting them into the head with javascript, and at the same you can use your variable for the path when setting the source attribute:
<script type="text/javascript">
var script = document.createElement('script');
script.type = 'text/javascript';
script.async = true;
script.src = path + '/jquery.js';
var head = document.getElementsByTagName('head')[0];
head.appendChild(script);
</script>
I had the following code on my page:
<script src="https://chatserver.comm100.com/js/LiveChat.js?siteId=&planId=2594&partnerId=-1" type="text/javascript"></script>
This script takes forever to load and so I wanted to load it async, so it does it's own thing while the rest of the page is downloaded / rendred. So I put in this code:
(function() {
var s = document.createElement('script');
s.type = "text/javascript";
s.src = 'https://chatserver.comm100.com/js/LiveChat.js?siteId=&planId=2594&partnerId=-1';
var x = document.getElementsByTagName('script')[0];
x.parentNode.insertBefore(s,x);
})();
But when I use the latter, the code does not run. It is a little hard to debug, since the file is minified.
Is there anything I am missing about the async loading? Any other steps I need to take?
Thank you!
async is a new HTML5 attribute for the script tag. You'll want to check browser support. When supported, you should not have to have your custom script at all; just write:
<script ... async="async"></script>