Well, i want that when body is completely loaded then call a function for show a hide image. I tryed a lot of things and searched a lot but anything work. I think it's pretty simple and easy but i don't know why doesn't work...I wish that anyone be able to help me.
<body onload="start()">
<div id="bg" style="display:none"></div>
</body>
function start() {
document.getElementById("bg").style.display = 'block';
}
Here Jsfiddle link
you have to option:
1- add script at before starting
<script type="text/javascript">
$(document).ready(function () {
//Add your code here to run after fully page load
document.getElementById("bg").style.display = 'block';
});
</script>
2- or add your script at end of <body> before ending </body> tag:
<script type="text/javascript">
//Add your code here to run after fully page load
document.getElementById("bg").style.display = 'block';
</script>
just remove onload="start()" from your body and replace your function start for
<script>
window.onload=function() {
document.getElementById("bg").style.display = 'block';
};
</script>
if you want use jquery, then
<script>
$(document).ready(function (){
$("#bg").css("display", "block");
});
</script>
That's because you need to run your Javascript inside the body tag. Actually at the end.
Conversely, the start function will be undefined and nothing happens:
<body onload="start()">
<div id="bg" style="display:none"></div>
<script>
function start() {
document.getElementById("bg").style.display = 'block';
}
</script>
</body>
Related
I wish to add code to a click event in a file and a script tag. But they seem to conflict. How can I achieve this?
javascript:
window.onload = function()
{
document.getElementById("button3").addEventListener("click", respond3);
}
function respond3(e)
{
alert("Way to go!!");
}
html:
<head>
<title>Second Javascript</title>
<script src="Second.js"></script>
<script>
window.onload = function()
{
document.getElementById("button2").addEventListener("click", respond);
}
function respond(e)
{
alert("getting better");
}
</script>
</head>
<body>
<h1>The quick brown fox jumps over the lazy dogs</h1>
<button onclick='alert("bad practice");'>Inline</button>
<button id='button2'>Script tag</button>
<button id='button3'>Separate file</button>
</body>
Per Quentin's suggestion I changed the script tag to this:
<script>
window.addEventListener('load', AddClick2)
function AddClick2()
{
document.getElementById("button2").addEventListener("click", respond);
}
function respond(e)
{
alert("getting better");
}
</script>
The on* properties can only have one function assigned to them. It's not so much a conflict as you are simply overwriting the first onload function with the second.
While you could do something along the lines of checking to see if there is already a function there, then copying it to a new variable, then calling it from the new variable inside your new onload function … that gets messy.
Use addEventListener instead.
window.addEventListener('load', a_function);
window.addEventListener('load', a_different_function);
I need to call a function which is in iFrame from developer console. But I'm unable to do that.
I tried the following and I get a error that its not a function.
document.getElementById('firstWindow').contentWindow.document.myFunction()
window.frame["firstWindow"].myFunction()
The scritp is inside
document.getElementById('firstWindow').contentWindow.document. But how do I call it?
Here is how the code looks like:
<html>
<body>
<--- Content from iFrame -->
<iframe id="firstWindow" name="firstWindow" src="/test">
<html>
<head>
<script>
myFunction(){
console.log('test');
};
</script>
</head>
<body>
some text
</body>
</html>
</iframe>
</body>
</html>
There are several ways to call the iframe function.
Way 1
In your case, you can use document.getElementById("firstWindow").contentWindow.myFunction() to trigger.
Way 2
Use window.frames.
window.frames is an array, you can set the iframe name with window.name="this is iframe test" in "test.html"
Then you can iterator the array, and compare the name, then trigger it.
for (let i = 0; i < window.frames.length; i++) {
if (window.frames[i].name === "this is iframe test") {
window.frames[i].myFunction()
}
}
Way 3
Use postMessage.
In the way1 and way2, you need to assign function in the window object.
<body>
<script>
// this one
window.myFunction = function(){}
// or this one
function myFunction(){}
</script>
</body>
In the Way3, you can hide the myFunction then you also can trigger it.
Here is an example.
// a.html
<html>
<body>
<iframe id="firstWindow" src="/b.html">
</iframe>
<script>
setTimeout(function(){
document.getElementById("firstWindow").contentWindow.postMessage({data: "hi"});
}, 500)
</script>
</body>
</html>
// b.html
<html>
<body>
<script>
(function() {
function myFunction() {
console.log("test");
}
window.addEventListener("message", (event) => {
myFunction()
})
})()
</script>
</body>
</html>
Then in a.html, you can try use the way1 or way2, like document.getElementById("firstWindow").contentWindow.myFunction().
myFunction will not be called becuase the scope problem.
I have an auto refresh script here, it works beautifully, but calling LoadPage via body onload blocks several other scripts on my pages. I've tried calling it through many other suggested alternatives to body onload, but nothing so far works. Here is the code:
<head>
<script>
var asdf = false;
function StartTime(){
if(asdf)clearTimeout(asdf)
asdf = setTimeout("RefreshPage()",15000);
}
function RefreshPage(){
clearTimeout(asdf)
if(document.autorl.RFCB.checked)
document.location.href = document.location.pathname + '?Checked'
}
function LoadPage(){
var findCheck = document.location.href.split("?Chec");
if(findCheck.length == 2){
document.autorl.RFCB.checked=true;
window.location='#bottom'
StartTime()
}
}
</script>
</head>
<body onload="LoadPage()">
<div>
<form name="autorl">
Auto-Refresh: <input type="checkbox" name="RFCB" onclick="StartTime()">
</form></div>
<a name="bottom">
Could anybody here lend a hand with this?
You could instead use something like the document.ready() handler in jQuery to accomplish this:
$(document).ready(function() {
LoadPage();
});
http://api.jquery.com/ready/
you can try and call the function from the end of html file just before the </html> tag add a <script>LoadPage();</script>
I've created links to transition yet when the function is supposed to be called using the onmousedown event I get an uncaught undefined function. Clearly my function is defined. I'm am still learning code so what is it I don't see or understand. Any tips will be greatly appreciated.
<html>
<head>
<script type="text/javascript"src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
<script type="javascript">
$(document).ready(function (){
var url = "phpajaxtut.php";
});
function swapContent(cv){
$("#myDiv").html("animated gif goes here").show();
.post(url, {contentVar:cv}, function(data){
$("#myDiv").html(data).show();
});
}
</script>
Click the text
Click the text
Click the text
</head>
<body >
<div id ="myDiv">My default content</div>
</body>
</html>
Why not just use $.click(); instead, since you're already using jQuery, and forgo the hyperlinks? You can easily style some spans to look like as if that's what you want. My example just updates some text, but in there you can place / call your function.
See here:
// html
<span>Click Me</span>
<br />
<span>Click Me</span>
// js
var n = 0;
$("span").click(function(){
$(this).text($(this).text() + " " + n++);
});
Do you need a $ before .post?
$.post(url, {contentVar:cv}, function(data){
$(document).ready(function (){
var url = "phpajaxtut.php";
});
The var url isn't global. It can only be used inside the function
var url; //global url
$(document).ready(function (){
url = "phpajaxtut.php"; // set global url
});
Can I use body onload and window.onload at the same time? I've tried it using this code
<body onload = "alertFirst()">
</body>
<script>
window.onload = alertSec;
</script>
But it didn't work. I just need someone to confirm it to me. Many thanks
The answer to your question is "no". However there are ways around it.
Adding both calls to one onload function is ideal, but if you /have/ to add an onload handler after one is already added, and you are not using a framework which facilitates this, you can get by like this:
<html>
<head>
<script type="text/javascript">
function alertFirst(){
alert('First');
}
function alertSec(){
alert('Second');
}
</script>
</head>
<body onload="alertFirst();">
content
</body>
<script>
var func = document.body.onload;
window.onload=function(){
func();
alertSec();
}
</script>
</html>
You can (by adding event handler(s)) but you should NOT have both
Instead add the call to the window.onload:
<html>
<head>
<script>
window.onload = function() {
alertFirst();
alertSec();
}
</script>
</head>
<body>
</body>
No, document.body.onload is actually mapped to window.onload. You can check yourself—when you have <body onload="a()"> and to console.log(window.onload), a() is printed out into the console.
What you can do is to have one onload event handler that calls two other functions.
window.onload = function () {
a();
b();
};
or two event listeners
window.addEventListener('load', a, false);
window.addEventListener('load', b, false);
If one or more of the scripts you want to use has the event handler in the BODY HTML tag, you can still move it to into javascript code. See the example below:
Script #1:
<script language="javascript">
function start(){
...code for script #1...
}
</script>
<body onload="start()">
Script #2:
<script language="javascript">
function init(){
...code for script #2...
}
window.onload=init;
</script>
Result:
<script language="javascript">
function start(){
...code for script #1...
}
function init(){
...code for script #2...
}
window.onload=function(){
start();
init();
}
</script>
<body>
I think it may can help you.