I tried my code on chrome, opera, firefox and edge but it's not working. My onload code works perfectly, but onunload doesn't work on all. Do not know why?
Here is my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body onload="loaded()" onunload="unloaded()">
<script type="text/javascript">
function loaded(){
alert("The page loaded!");
}
function unloaded(){
alert("Come again!");
}
</script>
</body>
</html>
Some operations are not allowed on onunload event showing alert is one of them. Check this answer.
You can use below code to display a warning message to users.
window.onbeforeunload = function(e) {
return 'Bye now!';
};
when you invoke the unload function,the DOM is completely unload now.
So there can't show an alert window for you.
But you can see the log printed in the console if you use
---> console.info("Come again!");
Related
So I'm just learning about load event handler and when I run the code in Google chrome it doesn't work can someone tell me why and how I can fix
it. By the way as u can see I want the alert function to execute as soon as everything is loaded thanks
This is my code below 👇
<!DOCTYPE HTML>
<html>
<head>
<title>Button</title>
<meta charset="utf-8">
<style>
body{
display:grid;
height:100vh;
}
h2{
margin:auto;
}
</style>
</head>
<body>
<h2>experiment</h2>
<script>
var exp =document.querySelector("h2");
function fun(){
alert("is it a success?");
}
exp.addEventListener("load", fun);
</script>
</body>
</html>
Use DOMContentLoaded instead
The DOMContentLoaded event will trigger earlier and is usually
considered the better option.
document.addEventListener('DOMContentLoaded', fun);
[the load event] should be used only to detect a fully-loaded page. It
is a common mistake to use load where DOMContentLoaded would be more
appropriate.
If you must use the load event
If you must use the load event, you can add a listener to window instead:
window.addEventListener('load', fun);
The following code doesn't work in Chrome, but it work in Firefox
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<main>
<button onclick="origin.haha()">This is a test button</button>
</main>
<script>
A = {
haha: function() {
alert(5);
}
}
</script>
<script>
var origin = A;
</script>
</body>
</html>
When I click the button, I was expected to see the alert message, but when I open the code in chrome, and click button, it raise an error which said that the origin.add is not a function, I have check it, and I think it was because that origin variable is a builtin variable, and it's identified to window.origin. And chrome doesn't allow user redefined the variable.
But when I open chrome debug console, and enter origin.haha(), it can show the alert message...
And which make me more confusing, the following code can work in chrome.
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<main>
<button onclick="testFunc()">This is a test button</button>
</main>
<script>
A = {
haha: function() {
alert(5);
}
}
</script>
<script>
var origin = A;
testFunc = function() {
origin.haha();
}
</script>
</body>
</html>
Can anyone tell me that what happened to the origin variable? Why chrome can show alert message in the 2nd code but can't show alert message in the 1st code?
I wish that I have describe the question clearly...
I have some problems calling a function of a specific iframe after reloading another iframe. It works on all major browser but behaves a little weird on Microsoft Edge. You will need the following constellation to get the error. All files are in the same directory on the same server. I haven't set any Content Security Policy.
If you load the Frame1.html everything will be fine and you will get the "alert" message.
But if you click the "Click me" a-tag on the frame4.html, the frame2.html will be reloaded and you will get the "permission denied" error because the parent object (var tmpParent = parent;) is not accessible. If you click the a-tag again it will work without any error.
I think it is a Edge bug, because all other browser can handle it and it only occur on the first click.
The error will also occur if you use top insted of parent.
The code of topFrame.js is used to find the top-most Frame of my site.
I cannot simply use top because it should be possible to embed my site.
Does anybody have a clue?
Thanks a lot!
Frame1.html
<!DOCTYPE html>
<html>
<head>
<title>Frame 1</title>
<script type="text/javascript">
var topFrame = this;
function myAlert() {
alert('alert');
}
</script>
</head>
<body>
<iframe id="overallContentWrapper" name="mainFrame" src="frame2.html" frameborder="0"></iframe>
</body>
</html>
Frame2.html
<!DOCTYPE html>
<html>
<head>
<title>Frame 2</title>
<script src="topFrame.js" type="text/javascript"></script>
<script type="text/javascript">
window.addEventListener("load", function load(event) {
window.removeEventListener("load", load, false);
try {
topFrame.myAlert();
} catch (e) {
alert(e);
}
}, false);
</script>
</head>
<body>
<iframe name="subFrame" src="frame3.html" frameborder="0"></iframe>
</body>
</html>
Frame3.html
<!DOCTYPE html>
<html>
<head>
<title>Frame 3</title>
</head>
<body>
<iframe name="subsubFrame" src="frame4.html" frameborder="0"></iframe>
</body>
</html>
Frame4.html
<!DOCTYPE html>
<html>
<head>
<title>Frame 4</title>
</head>
<body>
Click me
</body>
</html>
topFrame.js
try {
var tmpParent = parent;
var topFrame = tmpParent.topFrame;
while (topFrame === undefined) {
tmpParent = tmpParent.parent;
topFrame = tmpParent.topFrame;
}
} catch (e) {
alert(e);
}
Well i know im putting my neck on the line here trying to guess what IE is trying to tell you but i would assume that using this type of communications is going against what iframes are intended to do.
If you wish to communicate between child frames to parnet frames i suggest using postMessages instead. I think(I did say think) your script is getting blocked against XSS - cross site scripting. So if you wish to communicate some information between parent frame and child frames or the other way around i suggest having a look at postMessges.
My code is:-
<html>
<head>
<script>
function welcome()
{
alert("Successfully loaded");
}
function bye()
{
alert("Unload");
}
</script>
</head>
<body onload="welcome()" onunload="bye()">
</body>
when i execute this only the function for "onload()" is called. Can you tell me how to trigger "onunload()" event also...
It really depends on what browser you test it
The onunload event is supported in IE, Firefox, and Safari, but not supported properly in Chrome or Opera.
please try onbeforeunload
<body onload="welcome()" onbeforeunload="bye()">
</body>
https://developer.mozilla.org/en-US/docs/DOM/window.onbeforeunload
I'm running into an odd problem where window.addEventListener (or window.attachEvent) doesn't seem to be firing when called from within an if/else block. For example, say I have the following html and javascript files:
test.html
<!DOCTYPE html>
<html>
<head>
<META HTTP-EQUIV="cache-control" CONTENT="no-store">
<script type="text/javascript" src="test.js"></script>
<script type="text/javascript">
var tst = new Tester();
if (window.addEventListener) {
window.addEventListener("load", tst.onloadFunc, false);
console.log("addEventListener in conditional");
} else if (window.attachEvent) {
window.attachEvent(window.attachEvent("onload", tst.onloadFunc));
console.log("addEvent in conditional");
}
//window.addEventListener("load", tst.onLoadFunc, false);
</script>
</head>
<body>
</body>
</html>
test.js
function Tester() {
this.onLoadFunc = function() {
console.log("in Tester");
}
}
If I visit test.html and fire up a javascript inspector, I see "addEventListener in conditional" logged. However, I do not see "in Tester" logged.
Now, if I uncomment the addEventListener line outside of the if/else, I do see "in Tester" logged.
Can someone explain why this is happening? Is there any way around it or a better way of accomplishing the same thing?
Javascript is case-sensitive.
You should pass tst.onLoadFunc instead of tst.onloadFunc as an argument to addEventListener.
Your capitalization of onLoadFunc is wrong in the conditional window.addEventListener call.