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.
Related
I have to add a script tag via some JavaScript and have it execute in full as the later statements rely on it.
<html>
<head>
<title>Injecting Script Tags</title>
</head>
<body>
<h1>Injecting Script Tags</h1>
<script>
console.log('starting');
var newScriptTag = document.createElement('script');
newScriptTag.src = 'https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.js';
newScriptTag.type = 'text/javascript';
document.head.appendChild(newScriptTag);
try {
var now = moment().format('HH:mm');
console.log(`moment loaded. The time is ${now}`);
} catch (e) {
console.log(`Moment not loaded: ${e}`);
}
</script>
</body>
</html>
As the snippet above shows, the moment() isn't available on the statement after the tag insertion.
I think it could be done with eval(...), but that option isn't popular.
use onload event
<html>
<head>
<title>Injecting Script Tags</title>
</head>
<body>
<h1>Injecting Script Tags</h1>
<script>
console.log('starting');
var newScriptTag = document.createElement('script');
newScriptTag.src = 'https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.js';
newScriptTag.type = 'text/javascript';
newScriptTag.onload = function(){
try {
var now = moment().format('HH:mm');
console.log(`moment loaded. The time is ${now}`);
} catch (e) {
console.log(`Moment not loaded: ${e}`);
}
};
document.head.appendChild(newScriptTag);
</script>
</body>
</html>
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);
}
I am using cocos2d-js for game development. In a script of index.html I want to load main.js only when some conditions will be fulfilled.
The sample code is the below
<script>
if(user_id == data.id)
{
// call the main.js
}
</script>
I tried the below
<script>
if(user_id == data.id)
{
(function(document){
var s = document.createElement('script');
s.id = "external_content";
s.async = true;
s.src = "main.js";
document.getElementsByTagName('body')[0].appendChild(s);
s.onload = function() {
document.write(external_content);
}
}(document));
}
</script>
But it does not work. I can not call the main.js from inside another sript. What can I do ? Please help.
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.
My client puts our below JS code in his website in the <head> and is complaining our tags are not firing. Below is the sample code from client:
<html>
<head>
<script type="text/javascript">
function create() {
try {
var baseURL = "https://serv2ssl.vizury.com/analyze/analyze.php?account_id=VIZVRM1125";
var analyze = document.createElement("iframe");
analyze.src = baseURL;
var node = document.getElementsByTagName("script")[0];
node.parentNode.insertBefore(analyze, node);
} catch (i) {
}
}
var existing = window.onload;
window.onload = function() {
if (existing) {
existing();
}
create();
}
</script>
</head>
<body onload="javascript:clientfunction();">
<script type="text/javascript">
function clientfunction()
{
//client code is replcad here
document.write("Hello testing");
}
</script>
</body>
</html>
On page Load clientfunction() is calling, our create() function is not firing.
Please can anybody help me why our tags are not firing and what is the alternative solution for this issue?
copy paste and check running following
<html>
<head>
<script type="text/javascript">
function create() {
alert("Gdfg");
try {
var baseURL = "https://serv2ssl.vizury.com/analyze/analyze.php?account_id=VIZVRM1125";
var analyze = document.createElement("iframe");
analyze.src = baseURL;
var node = document.getElementsByTagName("script")[0];
node.parentNode.insertBefore(analyze, node);
} catch (i) {
}
}
window.onload=create;
window.onload=clientfunction;
</script>
</head>
<body onload="clientfunction(); create()">
<script type="text/javascript">
function clientfunction()
{
alert("fdsfsdf");
//client code is replcad here
document.write("Hello testing");
}
</script>
</body>
</html>