I have following js includes:
<script src="~/js/api/config.js"></script>
<script src="~/js/authentication.js"></script>
<script src="~/lib/es6-promise-polyfill/promise.min.js"></script>
<script>Vue.use(VeeValidate)</script>
<script src="~/js/home.js"></script>
authentication.js has an ajax call. home.js must not be called before authentication and its ajax calls has completed. Is this possible?
You can call the following function from xmlhttp.onreadystatechange event
function loadJS() {
var s = document.createElement("script");
s.type = "text/javascript";
s.src = '/js/home.js';
document.getElementsByTagName('head')[0].appendChild(s);
}
Related
I have a base.js file that called from my index.html file and this base.js call script script1.js or script2.js according to parameter passed to the base.js file and then I have another script called editor.js will call a function -with the same name but different implementation- from script1.js or script2.js, so my question is how I execute the function after loading the script1.js or script2.js
Samples of what I mean:
index.html
<html>
<head>
<meta charset="utf-8">
<title>Rich Text Editor</title>
<link rel="stylesheet" type="text/css" href="content/css/app-min.css">
</head>
<body>
<div class="new-question page">
<p>
<textarea id="textBox1" class="html-editor" cols="70" rows="10">
</textarea>
</p>
<p>
<button id="submit">Submit</button>
</p>
</div>
<script type="text/javascript" src="base.js"></script>
<script>
LoadFunction("multiply");
</script>
<script type="text/javascript" src="editor.js"></script>
<script type="text/javascript" src="content/js/script.js"></script>
<script type="text/javascript" src="content/js/custom-script.js"></script>
</body>
</html>
base.js
let LoadFunction = function (type) {
//loading localization script
let script = document.createElement('script');
script.type = 'text/javascript';
document.querySelector('body').appendChild(script );
if(type == "multiply")
script.src = `script1.js`
else
script.src = `script2.js`
}
script1.js
function Calculate(a,b){
return a*b;
}
script2.js
function Calculate(a,b){
return a+b;
}
editor.js
var result = Calculate(5,9);
console.log(result);
Consider reading more about Promises
https://developer.mozilla.org/he/docs/Web/JavaScript/Reference/Global_Objects/Promise
the following is an example using your code,
I don't think it fully do what you're looking for (as I called the loadFunction in the editor.js and not in the main file, but I believe this example + the documentation above will help you get the idea). Good luck :)
base.js
let loadFunction = function (type) {
//loading localization script
let script = document.createElement('script');
script.type = 'text/javascript';
document.querySelector('body').appendChild(script );
if(type == "multiply")
script.src = `script1.js`
else
script.src = `script2.js`
// return a promise
return new Promise((res, rej) => {
script.onload = function() {
res();
}
script.onerror = function () {
rej();
}
});
}
editor.js
loadFunction('multiple')
.then(() => {
// The script file has been loaded.
// We can use the function.
var result = Calculate(5,9);
console.log(result);
})
.catch(() => {
console.error('Could not load the script file.');
});
Haven't fully tested the code.
I'm trying to pass java script code to the script tag and it is being displayed as plain text. How should i correctly pass the object so that the value is populated correctly
var script = $('<script>', {
type: 'text/javascript',
src: 'mcbz.com/models?type=c43&geo=true&languageselected='+ window.location.pathname.substring(1,6)
});
script[0].setAttribute("async", "");
$('script:first').before(script);
Expected result
<script async src="mcbz.com/models?type=c43&geo=true&languageselected=en" ></script>
You can try this out.
const script = document.createElement("script");
script.type = "text/javascript";
script.src = `mcbz.com/models?type=c43&geo=true&languageselected=${ window.location.pathname.substring(1,6)}`;
script.setAttribute("async", "");
$("head").append(script);
I want to create 2 scripts, 1 for client 1 for server side.
I found snippet which allows call asyncrhonously js
<html>
<head>
</head>
<body>
<script>
(function() {
var projectId = "script";
var protocol = ('https:' == document.location.protocol ?
'https://' : 'http://');
var scriptTag = document.createElement('script');
scriptTag.type = 'text/javascript';
scriptTag.async = true;
scriptTag.src = protocol + 'localhost/wp/' +
projectId + '.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(scriptTag, s);
})();
function optimizelyTimeout() {
window.optimizely = window.optimizely|| [];
if (!window.optimizely.data) {
window.optimizely.push("timeout");
}
}
setTimeout(optimizelyTimeout, 1000);
</script>
</body>
</html>
This produces below code:
<script type="text/javascript" async="" src="http://localhost/wp/script.js"></script>
Now I would like script.js to return some custom js code which will be injected into original webpage. I tried with:
-return("code");
-response.write("code");
but non of that worked for me.
How script.js should look like in order to return some custom js code to be executed on client side?
How can I pass arguments from client to server side call?
How script.js should look like in order to return some custom js code
to be executed on client side?
if the javascript code returned by script tag has to be invoked immediately then you need to return a self invoking function
(function(){
/* code that you want to invoke immediately after the script has been loaded*/
})(this);
How can I pass arguments from client to server side call?
just push the parameters in the script src itself
scriptTag.src = protocol + 'localhost/wp/' + projectId + '.js?param1=value';
and intercept the same on your server side
I have one javascript program in my module; say test1.js. It has IF..ELSEIF statements. My challenge is I want to call different .js programs based on conditions in IF-ELSE statements.
TEST1.js looks like -
-----
if(cond1) {
//want to call test2.js here
}
else if(cond2) {
//want to call test3.js here
}
How do I do this in javascript?
if(cond1)
{
//want to call test2.js here
var js = document.createElement("script");
js.type = "text/javascript";
js.src = "test2.js";
document.body.appendChild(js);
}
else if(cond2)
{
//want to call test3.js here
var js = document.createElement("script");
js.type = "text/javascript";
js.src = "test3.js";
document.body.appendChild(js);
}
test1.js
var arr={}; //array
test2.js
function alertOne() {
if(cond1) {
//from test1.js here
alert(arr);
}
else if(cond2) {
}
}
in HTML
<head>
<script src="test1.js" type="text/javascript"></script>
<script src="test2.js" type="text/javascript"></script>
<head>
Use this method.
I am making a small project that will let:
different websites to load my external javascript file: something like this:
<script type="text/javascript">
var vsid = "SA89696";
(function() {
var vsjs = document.createElement('script'); vsjs.type = 'text/javascript'; vsjs.async = true; vsjs.setAttribute('defer', 'defer');
vsjs.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 'example.com/robot/robot.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(vsjs, s);
})();
</script>
now I want to use jquery in my javascript file, I dont have problem to load it by myself,
but I dont want to cause errors to the curresnt website if it already loaded jquery.
do you have any suggestions how to load jquery with no overrides.
You need something like this:
<script>
if(!window.jQuery)
{
var script = document.createElement('script');
script.type = "text/javascript";
script.src = "path/to/jQuery";
document.getElementsByTagName('head')[0].appendChild(script);
}
</script>
It checks if jQuery is loaded or no..
Source