I'm executing an internal script (and external scripts), using <script> inside <head>.
I'd like to execute some JavaScript after the document has been "loaded".
I put a "onload" attribute inside the body :
<body onload="myFunctionName();">
I call the function with the "onchange" attribute inside the jsp (inside <html:select ... > struts tag) :
onchange="javascript:myFunctionName();"
The "onchange" attribute works but not the "onload" attribute. Why ?
My code is working here !
<!DOCTYPE html>
<html>
<head>
<title>My Title</title>
</head>
<body onload="myFunctionName();">
</body>
</html>
<script type="text/javascript">
function myFunctionName(){
alert('I am here!');
}
myFunctionName();
</script>
You can try this
<!DOCTYPE html>
<html>
<head>
<title>My Title</title>
</head>
<body onload="myFunctionName();">
</body>
</html>
<script type="text/javascript">
function myFunctionName(){
alert('I am myFunctionName!');
}
</script>
But good practice is to separate javascript from html.
It doesn't work because HTML 5 doesn't support the onload attribute. (<!doctype html>)
I use a shortcut
by detecting an error of an image.
Here is an example that you can just copy&paste:
<!doctype html>
<html>
<head>
<title>Your Title</title>
<head>
<body>
<img src="noSrc" alt="" onerror="myFunction()">
<!--This img tag and all the attributes are mandatory or else it will not work-->
<script>
function myFunction() {
//code here
document.write("Document Loaded."); //example
window.alert("Document Loaded");
}
</script>
</body>
</html>
Good Luck!!
Related
I got a html file like this,
<!DOCTYPE html>
<html lang="en">
<head>
//some content
</head>
<body>
//some content
</body>
</html>
My question is how to load this file as a whole with jquery. I tried it with
append function, but it didn't work.. I searched for the solution for quite a while, but just found a lot of methods to append some parts of html file, like meta, link, not a whole file.
Can I do it with jquery?
index.html or whatever
<iframe src="filename.html"></iframe>
filename.html
<!DOCTYPE html>
<html lang="en">
<head>
//some content
</head>
<body>
//some content
</body>
</html>
You can use <link> element with rel attribute set to import, href set to path to file, type set to "text/html". Use XMLSerializer() instance .serializeToString() with replacement document .doctype property as parameter to get <!DOCTYPE> declaration from imported document; document.write() with .import.documentElement.outerHTML property of link element as parameter to replace existing .doctype and <html> node with .doctype and <html> of imported document.
<!DOCTYPE html>
<html lang="en">
<head>
<link id="doc" rel="import" href="https://gist.githubusercontent.com/guest271314/9921cb52b143437b23f23fa32284ca35/raw/86532c043b666bce15b33c91dc29e98615dd4e25/replacementDocument.html" type="text/html" />
</head>
<body>
//original content
<button>load html document</button>
<script>
var link = document.getElementById("doc");
document.querySelector("button")
.onclick = function() {
// http://stackoverflow.com/a/30565562/
var dt = new XMLSerializer().serializeToString(link.import.doctype);
document.write(dt, link.import.documentElement.outerHTML);
document.close();
}
</script>
</body>
</html>
Here is the code. I'm over Arch Linux, if this is a important thing...I'm tired of trying different libraries, in local, from jquery's site but it does't work...
<!doctype html>
<html>
<meta charset="utf-8" />
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js" type="text/javascript">
$(document).ready(function(){
$("#header").hide();
$("#header").fadeIn(2000);
});
</script>
<title>1</title>
</head>
<body>
<h1 id="header" align="center">Page content</h1>
<p align="center">
Footer
</p>
</body>
</html>
Put your jQuery call and your custom script in separate tags.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#header").hide();
$("#header").fadeIn(2000);
});
</script>
Note that with HTML5 you don't need to specify type for JavaScript.
Wrong way of using script tag !
Make sure you properly wrapped your jQuery code inside a <script></script> block. Also close all open script blocks.
This should work
<!doctype html>
<html>
<meta charset="utf-8" />
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#header").hide();
$("#header").fadeIn(2000);
});
</script>
<title>1</title>
</head>
<body>
<h1 id="header" align="center">Page content</h1>
<p align="center">
Footer
</p>
</body>
</html>
Working sample
I have an image.html file in dreamweaver.
in source code I link an js file called img.js
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>PHOTO</title>
<script language="javascript" type="text/javascript" src="js/img.js"></script>
</body>
</html>
if an use an alert in img.js
alert("My First Jquery Test");
it shows correctly in web page but if write some javascript code like
<html>
<body>
<p id="p2">Hello World!</p>
<script>
document.getElementById("p2").style.color="blue";
</script>
The paragraph above was changed by a script.
nothing shows..why and how I show this?
The script is working as you can see here.
Report your fully HTML file if still have problem.
Remember:
<html>
<head></head>
<body>
<p id="p2">Hello World!</p>
<script>
document.getElementById("p2").style.color="blue";
</script>
</body>
</html>
Do it right
edit img.js
window.onload=function(){
alert("My First Jquery Test");
document.getElementById("p2").style.color="blue";
}
I'm new to JavaScript and just want to put my JavaScript code in another file.
This is my html page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>my badass page</title>
<script type="text/javascript" scr = "testing.js"></script>//this contains the function I want to call
</head>
<body id="body">
<button type="button", onclick="showDate()">show the date</button>
</body>
</html>
This is the testing.js file:
function showDate() {
alert ("this works")
}
I'm assuming that I just make a beginner mistake because it seems really common but I can't figure it out.
you spelled the 'src' attribute incorrectly on your tag
you spelled it scr, it should be src
this:
<script type="text/javascript" scr = "testing.js"></script>
should be this:
<script type="text/javascript" src = "testing.js"></script>
change the button to
<button type="button" onclick="showDate()">show the date</button>
and change scr to src
EDIT: source that works:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>my badass page</title>
<script type="text/javascript" src="testing.js">
</script>
</head>
<body id="body">
<button type="button" onclick="showDate();">show the date</button>
</body>
</html>
Quick use of html validator such as http://validator.w3.org/nu/ will uncover lots of problems in your code. Just copy paste and correct the errors.
I'm new to JavaScript and I've learned that JavaScript can be place between the <head></head> or <body></body> sections, I have been working in a project and it works fine inside the head but not the body section of the page.
examples:
working fine like this:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example Page</title>
<script>
function yetAnotherAlert(textToAlert) {
alert(textToAlert);
}
yetAnotherAlert("Hello World");
And is not working this way:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example Page</title>
</head>
<body>
<script>
function yetAnotherAlert(textToAlert) {
alert(textToAlert);
}
yetAnotherAlert("Hello World");
</script>
</body>
</html>
Your code snippet didn't show you closing the tag. Double check if you close your script block correctly.
It's also better to specify the type of scripting language too.
<script language='javascript'>
....
</script>