Ok, I know how to register my js file in my html and call functions in the .js from my html file. Here I am trying to do the opposite , I have a function in the .js file and I want to call a function that is in my html file. How do I go about registering the html (it's actually .aspx ) but that really shouldn't matter for the scope of this question.
Just make sure that the JavaScript function in your HTML is defined on the page before the code in the .js include calls it.
Simply include your external script to the page at the end your body tag or at any place after your function declaration.
Aspx page:
<body>
content content
<script>
/* Function to be called */
function s(){
alert('Hello World!');
}
</script>
<script src="myJS.js"></script>
</body>
myJS.js:
/* Call a page function */
s();
By the time your external file is loaded your function s() will be declared.
Related
I the defer attribute of the script tag in the <head> section of HTML files. This almost always means that I cannot run js functions in the HTML since the js file is only loaded after the HTML file has been loaded..
I have run into a situation where I needed to run a js function in my HTML file, but would not want to remove the defer attribute from the script tag because of other functions in the js file. I looked at the possibility of using async, but it also was not helpful.
Any idea on how this could be done... other than using defer? I would still like to keep the script tag in the head, but going that way would mean that I have no open (non-function based) instructions in the linked js file... which is not always ideal.
Here is a sample of the HTML file
temp.html
<!DOCTYPE html>
<html lang="en">
<head>
<script src="temp.js" defer></script>
<title>Defer et al</title>
</head>
<body>
<script>
runThisFunction('Home');
</script>
</body>
</html>
And here is a sample of the js file
temp.js
function runThisFunction(varin) {
console.log(varin);
}
If I remove the defer from the js file, the function will run; if I leave it there, or use async instead, the function will not run because it has not loaded yet.
Any assistance in this small issue will be appreciated.
The best way to do this would be to refactor your script to contain an entry point in a function, and run that function once the DOM loads. Instead of, for example
// temp.js
function runThisFunction(varin) {
console.log(varin);
}
document.querySelector('.foo').textContent = 'doing stuff';
// other code here
put all of the functionality that depends on the page being loaded into its own function:
// temp.js
function runThisFunction(varin) {
console.log(varin);
}
function init() {
document.querySelector('.foo').textContent = 'doing stuff';
// other code here
}
window.addEventListener('DOMContentLoaded', init);
This way, if you also remove the defer attribute, runThisFunction will be available immediately, but the other parts of your code won't run until the page is loaded.
I hava many jsp page using the common function in body's onload and onunload event when using ocx control.So I extract the common function in one js file call common.js and import the js file in the jsp page.But I find the sometimes the jsp page could not execute the function in js file.Finally,I solve the problem in two way but I think there must have the other simple way?How to simplify my js code?
write all the js function in each jsp,it works well
in the each jsp file,includ the common.js,and in the jsp file the script call the function before load the common.js,but I think it have already be loaded two times
//init(),asynclogin_onclick(),logout_onclick() function is in the common.js file
<head>
<script type="text/javascript" src="/js/common.js"></script>
</head>
<body onload="init()" onunload="logout_onclick()">
$(function(){
$.getScript("/js/common.js")
.done(function(script,textStatus ) {
asynclogin_onclick();
});
});
I try to write the code like this,but it could not work.
$(function(){
asynclogin_onclick();
});
I have created a new electron application.
It consists of the following files:
index.html
main.js
renderer.js
In the index.html I have added a button with an onclick event:
<button onclick="myfunction()">Call Function</button>
And the function is just an alert for testing purposes:
myfunction() {
alert('I am the js function');
}
My problem is that I've added the function code to both the renderer.js and to the bottom of main.js and when I click the button I see no alert.
How can I get js functions to be called from the index.html?
Let the myFunction reside in a separate javascript file. Let's say it's named "functions.js". To use this function in the HTML file (index.html), simply add the Javascript code using tag in the following manner -
<html>
<body>
...
</body>
<script type="text/javascript" src="./functions.js"></script>
</html>
Now, we will need to attach an onclick listener to the button that is rendered using the HTML code.
To do that, add the following in functions.js
document.getElementById('btn').addEventListener("click", function(){
myFunction();
});
I have to use a plugin which bundles js files inside html files (gadgets). For one use case I need to drop and re-instantiate a gadget to run updated code.
So say I have foo.html:
<html>
<head>
<script src="foo.js"></script>
</head>
<body>...</body>
</html>
and foo.js which is the file being injected into my actual document's head:
alert("hello");
Problem is I can only cachebust the html file dynamically and declare my gadget as foo.html?x=123, but the JS file I'm after will still be foo.js so the browser will not re-run it.
Question:
Once a <script> tag is inserted into the document and run, is there any way to run it again without using a module-loader or eval?
Thanks!
You could wrap your code in your <script> tags in a function then call your function. This will allow you to call your code to be called multiple times. Like this:
<script>
function loaded(){
// JavaScript here
}
loaded();
</script>
</body>
I want to call a function from my master .js file - from within my php page. Is this possible?
<script type="text/javascript">
functionName(); //calling function from master.js file
</script>
Doesn't seem to work.
It should be as long as the external script is loaded first and "functionName()" is attached to the global scope