My current code:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body onbeforeunload="return close()">
<script>
function close() {
window.open("http://www.google.com");
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body onbeforeunload="return close()">
<script>
function close() {
window.open("http://www.google.com");
}
</script>
</body>
</html>
I am trying to create a new window when the website is closed, but it just closes by itself. I am new to web coding, so please do not judge my code
This was the best way to accomplish what you're trying to do, however if it's a modal you're looking for, unfortunately they don't exist yet, upon research this was the best solution I had, you could use another script that auto runs to close this page. However, as comments above describe this looks fishy to viewers, and also causes skepticism to google as to why you're doing this for your web page.
<!DOCTYPE html>
<html>
<body onBeforeUnload=" return myFunction()">
<p>Close this window, press F5 or click on the link below to invoke the onbeforeunload event.</p>
Click here to go to w3schools.com
<script>
function myFunction() {
window.open("new 2.html"); // or whatever link you'd like, must be .aspx, or .html page etc.
}
</script>
</body>
</html>
Related
I am trying to run a function from Google Apps Script in a HTML page. Basically, I want to get a log message that says "Someone Clicked the Button" whenever the button is clicked. However, I click the button and still get nothing in my logs. I wonder what I'm doing wrong. Here's my code:
function doGet(){
return HtmlService.createHtmlOutputFromFile("page");
}
function userClicked(){
Logger.log("Someone Clicked the Button");
}
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<h1>Hello</h1>
<button id="btn">Run It</button>
<script>
document.getElementById("btn").addEventListener("click",doStuff);
function doStuff(){
google.script.run.userClicked();
}
</script>
</body>
</html>
Any help will be appreciated!
If you are using the new editor you can create a new deployment and then copy the url and go to another window paste and run it and you should see your button.
Then if you project is not a Cloud Platform Project, goto Project Setting and uncheck this item Log uncaught exceptions to Cloud logs
Now go to Executions and then move to the tab with your web app and click it and move back to the executions page and in a short time you should see a userClicked entree and if you open it, in the logs in the bottom of the screen.
Hopefully this will work the same for you.
How about this?
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<h1>Hello</h1>
<button id="btn" onclick="google.script.run.userClicked()">Run It</button>
</body>
</html>
Hello my questions is about how a webpage is loaded! Here is my code:
<!DOCTYPE html>
<html>
<head>
<title>JavaScript</title>
</head>
<body>
<h1>Waiting</h1>
<script type="text/javascript">
alert("Why?");
</script>
</body>
</html>
I cannot for the life of me figure out why the alert is running before the heading is displayed. It is my understanding that since the alert is right above the closing body tag it will be the last thing run. Why is the page waiting for me to close out the alert before displaying the heading?
Thanks for the help!
Edit: I ran this code in firefox rather than chrome and it worked how I wanted it to - the heading displayed first before the alert ran.
You need to execute your script after the page loads with
<body onload="script();">
An external script will execute before the page loads.
<body onload="script();">
<h1>Waiting</h1>
<script type="text/javascript">
function script() {alert("Why?");}
</script>
</body>
You can use setTimeout() to show the alert after a few seconds (when the page should have loaded).
<!DOCTYPE html>
<html>
<head>
<title>JavaScript</title>
</head>
<body>
<h1>Waiting</h1>
<script type="text/javascript">
setTimeout(function(){
alert("Why?");
}, 1000);//wait 1000 milliseconds
</script>
</body>
</html>
You can check if the header (the h1 tag) is there and only alert if it is there.
<!DOCTYPE html>
<html>
<head>
<title>JavaScript</title>
</head>
<body>
<h1 id="header">Waiting</h1>
<script type="text/javascript">
var x;
x = setInterval(function(){
if(document.getElementById("header")){
alert("Why?");
clearInterval(x);
}
}, 100);
</script>
</body>
</html>
The simplest workaround code without using JQuery I could write is this. Please check it.
<!DOCTYPE html>
<html>
<head>
<title>JavaScript</title>
</head>
<body>
<h1>Waiting</h1>
<script type="text/javascript">
window.onload = function(){
setTimeout(()=>{
alert("Why?");
},10)
}
</script>
</body>
</html>
The cleanest way to do this seems like it would be to put your javascript in a separate file, and load it with the defer attribute. This will cause it to fire after the DOM loads (technically, just before DOMContentLoaded, but it doesn't work consistently across browsers unless there is a src attribute, which is why you would need to move it to an external file.
<script src="myScript.js" defer></script>
Oddly, adding some CSS to your heading could also affect this since JS is supposed to execute in order after any pending CSS.
The timeout function or a $(document).ready() function will do what you need in theory, but a timeout could need to be adjusted based on the complexity of the page, and if you aren't already using jQuery, you probably won't want to add it just to use $(document).ready().
I apologize in advance if this has been asked before. So the circumstances I mentioned in the title is this:
I am writing html into a new window.document.open() object. The html I am writing also includes in the head.
This is the script I am not able to run,
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<script>
$(document).ready(function(){
alert('This is working!');
});
</script>
The interesting thing is that every other jquery code works. For example in my html I have a button with id='but' and this script works
$('#but').click(function(){
alert('you clicked a button')'
});
so why is the $(document).ready() not working? Is this because window.document.open() doesn't count as document for jquery?
Thanks in advance.
edit: I think my question is unclear. I am terribly sorry about that. Here's the situation:
I have a javascript file that essentially has this:
var w=window.open();
var temp=`
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Template for converted files</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<script type="text/javascript" src="file.js"></script>
<script>
$(document).ready(function(){
alert('This is working!');
});
</script>
</head>
<body class="body">
<button id='but'>click me!</button>
</body>
</html?
`;
w.document.open();
w.document.write(temp);
the file file.js has the following:
$('#but').click(function(){
alert('you clicked a button')'
});
now when I run the first JS file, I am able to open a new window with the button. when clicked it says "you clicked a new button"
But the alert "This is working!", isn't working.
Hope this makes the situation clear. I am really sorry for not being clear from the start.
Because jQuery has no method open() in it's api.
open() is a window method only.
You can refer to the new window by passing it to a variable:
var win = window.open(url[,options])
I have the following code (listed below). In short, when a user clicks the button "All On" it will open a popup window with yahoo.com. I want the window to remain open for 3 seconds, then automatically close with no additional interaction from the user.
Although the popup opens exactly as desired, I get this error when the close attempts to execute.
script438: Object doesn't support property or method 'close'
lights.html (11,31)
I am not a coder and cannot figure this out. Ultimately, this will primarily run on Safari iOS. And, obviously, the yahoo link will be replaced with a specific IP address. Thank you.
<!DOCTYPE HTML>
<html>
<head>
<title>Light Control Example</title>
<script type="text/javascript">
function allOn(){
var win = 'http://www.yahoo.com';
open(win,'1366002941508','width=1,height=1,left=5,top=3');
setTimeout(function() { win.close();}, 3000);
}
</script>
</head>
<body>
<h1>Lights Example</h1>
<input type=submit value="ALL ON" onclick="allOn();" />
</body>
</html>
Give this a try
<script type="text/javascript">
function allOn(){
var win = window.open('http://www.yahoo.com','windowname','width=1,height=1,left=5,top=3');
setTimeout(function() { win.close();}, 3000);
}
</script>
win is a string.
Strings obviously don't have a close() method.
You want the Window object returned by open().
<!DOCTYPE HTML>
<html>
<head>
<title>Light Control Example</title>
<script type="text/javascript">
function allOn(){
var myWindow = window.open('http://www.yahoo.com','1366002941508','width=600,height=400,left=5,top=3')
setTimeout(function() { myWindow.close();}, 3000);
}
</script>
</head>
<body>
<h1>Lights Example</h1>
<input type=submit value="ALL ON" onclick="allOn();" />
</body>
</html>
I am working on a legacy app that has an iframe involved. The back button is working on the iframe and I need it to bypass the iframe and work on the parent window only.
Here is a dumbed down version of the issue and description of what I know.
the main page "index.html" has an iframe that is being added via javascript. It loads a.html, makes an ajax call that then does a window.location = "b.html" At this point if you use the back button it essentiallys makes the iframe go back to a.html and then redirects to b.html so you are effectively stuck on the page. If I remove the ajax call and do an window.location on load everything works ok. However given the architecture and what happen on the page I can't remove the Ajax call from the picture.
Here is the code I am looking at, let me know your thoughts on how to solve this issue. Also I should mention in Chrome 41 this isn't an issue, however the newer chrome 48 and 49 it is an issue. I tried history.replaceState but wasn't able to figure out a way to use it in this situation that made things work.
index.html
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
</head>
<body>
hello world!
<div id="iframeContainer"></div>
<script>
$(function () {
var newIframe = document.createElement('iframe');
newIframe.src = "a.html";
newIframe.id = "A";
document.getElementById("iframeContainer").appendChild(newIframe);
});
</script>
</body>
</html>
a.html
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
</head>
<body style="background-color:#F00;">
<script>
$(function(){
$.ajax({
url:"b.html",
complete:function(){
window.location="b.html";
}
});
});
</script>
</body>
</html>
b.html
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
</head>
<body style="background-color:#00F;">
<script>
$(function(){
})
</script>
</body>
</html>
This is only possible in HTML5 compatible browsers, and it would go something like this..
This goes in the child frame..
// catch the back button click.
window.onpopstate = function(event) {
// make the parent window go back
top.history.back();
};
This also only works if both frames are in teh same domain.