Confusion about the origin variable in Chrome browser - javascript

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...

Related

onunload on body is not working

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!");

The Bounce on Mouse Hover and Pop Up when we Try to Close the Window

I have a question we must have seen many a time that when we are about to close the window and Just hover mouse over the cross on Browser Tab, a pop up appears asking for us to subscribe or highlighting some coupon. This Functionality is based on which feature of the browser, does it exploits some PHP code or some artificial intelligence.
It is run on client-side as everything that interact with user interface.
The example bellow shows how to do this with pure javascript (not tested with all browsers, but works well with Chrome)
<!DOCTYPE html>
<html>
<head>
<title>Page exit example</title>
<script type="text/javascript">
var showMessage = true;
window.onmouseout = function(){
if(showMessage){
showMessage = false;
document.getElementsByTagName('body')[0].innerHTML = "Dont leave yet!";
}
};
</script>
</head>
<body>
<h1>Hello world</h1>
</body>
</html>

Why do I get "permission denied" in Microsoft Edge when accessing parent iframe

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 console.log does not work in my html page

I am very new to javascript but I can't go forward in learning because my console.log doesn't work AT ALL I will type in the console.log message and on my html page nothing shows up. i have try to debug it but I'm so new I don't know how all I can do is go to the forums and ask, it seem some people have the problem but, there is no good answer to the problem. I've tried every thing i know how to do (which isn't very much) but nothing works PLEASE HELP!!
this is my program
<html>
<head>
<title>My First proper HTML page</title>
</head>
<body>
<h1>Hello</h1>
<p>My First web page.</p>
<script type="text/javascript">
console.log("Hello World!"</script>
</body>
</html>
i know that it has to be in dev tool to see it now but how do i make it show up in the html not in dev.?
there has to be a way!
i now now that document.write is the right way but that isn't working either
<html>
<head>
<title>My First proper HTML page</title>
</head>
<body>
<h1>Hello</h1>
<p>My First web page.</p>
<script>
var name = "Nicholas";
document.write("Hello " + name);
if (name.length > 7 {
document.write("Wow you have a Really Long name!");
}
</script>
</body>
</html>
Technically, console.log is not supposed to show up on your HTML page. Rather, it shows up on your console's (web browser) log.
Even with all the correct answers provided, you can view your answer by visiting the Developer Tool -> Console (For Chrome, on Apple, it's Option + Command + J). For Windows, using Chrome, you hold the following keys: Ctrl+Shift+J
Here is a clip of the code and the log recorded by the console:
because you have to type console.log()
not control.log
Also, console.log needs to be either inside script tags, or in a separate javascript file. In your case you would have to do:
console.log("Hello, World!");
Try the below sample
<html>
<head>
<script type="text/javascript">
console.log("Hello World")
</script>
</head>
<body>
Hello
</body>
</html>
Unless you typed/edited your post.. that has an invalid Javascript.
<html>
<head>
<title>My First proper HTML page</title>
</head>
<body>
<h1>Hello</h1>
<p>My First web page.</p>
<script type="text/javascript">
console.log("Hello World!");
</script>
</body>
</html>
You did not have a closing )
Ah, as others have explained.. Console is not your HTML page, its part of the web browser itself. For example, in google chrome press CTRL+SHIFT+J to show it.
Your after document.write

Onload event not working with Internet Explorer

I've written some very simple code on Internet Explorer 8 and I don't understand why nothing happens when I open the page with IE (why the text 'test' doesn't appear on the page).
I've tried on Firefox and Chrome and it works perfectly.
my code :
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso 8859-1" />
<script type="text/javascript">
function display() {
output.innerHTML+='test';
}
</script>
</head>
<body onload="display()">
<div id="output">
</div>
</body>
</html>
Edit : let IE change your setting, don't do it by hand or it gets weird :-))
document.getElementById('output').innerHTML += 'test';
Try:
function display() {
document.getElementById('output').innerHTML+='test';
}

Categories