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.
Related
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
}
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);
})
I have a script (Google Maps, to be exact) that is loading dynamically, and for a couple of reasons, I cannot alter how this initially loads by default.
Through JavaScript, I would like to find the string libraries=places and change it to libraries=places,visualization after the fact
So, the originally output:
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?libraries=places">
</script>
Would be:
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?libraries=places,visualization">
</script>
Is this even possible?
Thanks In Advance
this solution should apply to yours as well:
How do I include a JavaScript file in another JavaScript file?
script.src = url; will be the line where you add the src url however you like
First of all Give the google map script tag an ID:
<script id="google_map_script" type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>
Then do:
var google_map_script = document.getElementById("google_map_script")
google_map_script.setAttribute("src", "https://maps.googleapis.com/maps/api/js?libraries=places,visualization")
Edit: since apparently this isn't what is needed then what about this:
var script = document.createElement('script');
my_awesome_script.setAttribute('src','https://maps.googleapis.com/maps/api/js?libraries=places,visualization');
document.head.appendChild(script);
Also have a look into using postscribe.
Folks,
I am new to wordpress. I am converting a html template to wordpress.
THE script is this:
<script src="js/jquery.min.js"></script>
<script src="js/jquery.nicescroll.min.js"></script>
And the javascript functions are:
<script>
var nice = false;
$(document).ready(function() {
nice = $("html").niceScroll();
});
var obj = window;//$(window);
console.log(obj.length);
console.log("selector" in obj);
</script>
<script>
function toCell(px,py,ok) {
$("#tab1").find('tr').eq(py).find('td').eq(px).addClass((ok)?'testok':'testko');
};
$(window).load(function() {
$("#div1").html($("#div1").html()+' '+nice.version);
$("#div2").html($("#div2").html()+' '+navigator.userAgent);
toCell(1,1,nice.detected.ismozilla);
toCell(2,1,(nice.detected.prefixstyle=='-webkit-'));
toCell(3,1,nice.detected.isie);
toCell(3,2,nice.detected.isie10);
toCell(3,3,nice.detected.isie9);
toCell(3,4,nice.detected.isie8);
toCell(3,5,nice.detected.isie7);
toCell(3,6,nice.detected.isieold);
toCell(4,1,nice.detected.isopera);
toCell(5,1,nice.detected.isios);
toCell(5,2,nice.detected.isios4);
toCell(0,8,nice.detected.cantouch);
toCell(3,8,nice.detected.hasmstouch);
toCell(1,10,nice.detected.hastransform);
toCell(1,11,nice.detected.hastranslate3d);
toCell(2,10,nice.detected.hastransition);
toCell(2,11,!!nice.detected.transitionend);
toCell(3,10,nice.hasanimationframe);
toCell(3,11,nice.hascancelanimationframe);
toCell(1,12,nice.detected.hasmousecapture);
toCell(2,12,((nice.detected.cursorgrabvalue!='')&&(nice.detected.cursorgrabvalue.substr(0,3)!='url')));
});
</script>
I know about registering, enqueuing but how will it can be transformed into wordpress theme.
Explain
Technically you can include JavaScript files in the <head> just like you would on a normal website. but registering and enqueuing is the preferred mechanism for WordPress.
You could also put your <script> directly in the header.php which would make it available on all pages. However, I would strongly suggest you make it an external script.
Depending on how you enqueue the the file, it will be added to your site header or footer with wp_head() and wp_footer() respectively.
I used to build my websites based on the HTML5 Boilerplate: styles and modenizr in the head, jQuery (google CDN or hosted file) and scripts before the closing body tag. Something like that:
<!DOCTYPE html>
<!-- modernizr conditional comments here -->
<html class="no-js">
<head>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/vendor/modernizr-2.6.2.min.js"></script>
</head>
<body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.2.min.js"><\/script>')</script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
</body>
</html>
Now I want to remove all render-blocking below-the-fold css and js as suggested by Googles PageSpeed Insight.
How do I defer the css and js files including the jQuery library loaded from google?
What should I do about modernizr?
To remove this particular warning you need to do the following:
defer the load of all external CSS until after page onload
defer the load of all external JS until after page onload
In practice that means you need to do the following:
split your CSS into that required to avoid the "flash of unstyled content" (FOUC) and the rest
split your javascript likewise
inline the CSS and JS that is required
defer the load of the other CSS and JS until after page onload.
Using build tools is the only sane way of doing this. You can do it with various Grunt tools, or with the ant-based H5BP Build Script.
The basic method of deferring loads is as follows:
(function () {
// Load jQuery after page onload
function loadJS() {
var url = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js";
var n = document.createElement("script");
n.src = url;
n.onload = loadJS1;
document.body.appendChild(n);
}
// Load some JS after jquery has been loaded.
function loadJS1() {
var url = "js/main.js";
var n = document.createElement("script");
n.src = url;
// Continue chaining loads if needed.
//n.onload = loadJS2;
document.body.appendChild(n);
}
// Check for browser support of event handling capability
if (window.addEventListener) {
window.addEventListener("load", loadJS, false);
} else if (window.attachEvent) {
window.attachEvent("onload", loadJS);
} else {
window.onload = loadJS;
}
})();