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>
Related
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>
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])
My concept is to update the value of the text box in the main page from the iframe . This code is working in firefox , but not working in Internet Explorer and Chrome . Both main.html and frame.html are in same location . I need suggestions to make it work in all the browsers .
main.html
<!DOCTYPE html>
<html>
<head>
<title> main window </title>
</head>
<body>
Parent textbox :<input type="text" id="parentbox"></br></br></br>
<iframe src="frame.html" ></iframe>
</body>
</html>
frame.html
<!DOCTYPE html>
<html>
<head>
<title> frame window </title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
function PushValues()
{
var frame_value = document.getElementById("framebox").value;
window.parent.document.getElementById("parentbox").value =frame_value;
}
</script>
</head>
<body>
<input type="text" id="framebox" >
<input type="button" value ="fill" onclick="PushValues()">
</body>
</html>
As per security policies, cross-domain access is restricted. This will happen if you are trying to show a page from domain 1 in domain 2 and try to manipulate the DOM of page in domain 2 from the script in domain 1. If you are running the pages from same location on a server. This shouldn't happen. However, if you are just saving them as HTML files and trying to open them in your browser, it should not work. I have created two jsbins for your code and it is working on chrome. Try to access them using the below links.
Main.html: http://jsbin.com/afazEDE/1
iframe.html: http://jsbin.com/ayacEXa/1/
Try to run main.html in edit mode in JSBin by keeping console open in chrome (F12) and click fill button. It will not work and will show you the error. If you run them as it is (in run mode of JSBin), it will work.
Jquery -
function PushValues()
{
var frame_value = $('#framebox').val();
parent.$('body').find('#parentbox').val(frame_value);
}
It's always work for me.
Run this code on a server like xamp or wamp it wont work directly
Main.html
<!DOCTYPE html>
<html>
<head>
<title> main window </title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
Parent textbox :<input type="text" id="parentbox" value=""></br></br></br>
<iframe src="iframe.html"></iframe>
<script>
window._fn = {
printval: function (response) {
$("input").val(response);
},
};
</script>
</body>
iframe
<!DOCTYPE html>
<html>
<head>
<title> frame window </title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<input type="text" id="framebox">
<input type="button" value="fill" onclick="PushValues()">
<script language="javascript">
function PushValues() {
window.parent._fn['printval']($('input').val());
}
</script>
</body>
</html>
Since you're using jQuery try this
var frame_value = $('#framebox').val();
$('#parentbox', window.parent.document).val(frame_value);
You should try P3P policy which is highly related to iframes and Internet Explorer.
response header set to the iframe document
header key= 'P3P' header value: 'CP="IDC DSP COR ADM DEVi TAIi PSA PSD IVAi IVDi CONi HIS OUR IND CNT"'
Haven't been programming in JS for a while.
Now, I have following thing:
<html>
<head>
<script language="JavaScript">
function enlarge()
{
window.close();
}
</script>
</head>
<body>
<img src="addresstomyimg.png" onClick="enlarge()" />
</body>
</html>
(it's very simplified, as, in fact, I have WordPress platform with custom JS modifications etc, but in general, this is the idea).
I don't understand why it's not working.
JavaScript cant close the window unless it opened the window.
In your function, replace window.close() with alert('here') and you'll see the function works fine.
If you want your function to close a window, first open one:
<html>
<head>
<script type="text/javascript">
var popup;
function closewin()
{
popup.close();
}
function openwin()
{
popup = window.open('http://www.google.com');
}
</script>
</head>
<body>
<img src="addresstomyimg.png" onclick="openwin()" /> Click to open, then come back here
<br><br>
<img src="addresstomyimg.png" onclick="closewin()" /> Click to close
</body>
</html>
Demo: http://jsfiddle.net/AlienWebguy/pbFha/
If you try running this script using Firefox and use the Firefox's Error Console to look for errors, you can see that the following error gets logged when you run this script.
Scripts may not close windows that were not opened by script.
You can launch the Error Console in Firefox by pressing Ctrl + Shift + J.
On Chrome, your script successfully closes the tab in which it is running.
Note that the right way to use the <script> tag while writing JavaScript is as follows:
<script type="text/javascript">
If you're trying to close the main window, it won't work.
You can only close windows that were opened by JavaScript.
This code works on IE.
<html>
<head>
<script language="JavaScript">
function enlarge()
{
self.close();
}
</script>
</head>
<body>
<img src="addresstomyimg.png" onClick="enlarge()" />
</body>
</html>