Why does the following code throw an 'Unspecified error' (on the appendChild line) in Internet Explorer 11 which I click the button?
<!DOCTYPE html>
<html>
<head>
<script>
function go() {
var popUp = window.open('about:blank');
popUp.document.body.appendChild(document.createElement('div'));
}
</script>
</head>
<body>
<button onclick="go()">Click Me</button>
</body>
</html>
You're using the document of the current page to create the div, try using the document from the popup window
popUp.document.body.appendChild(popUp.document.createElement('div'));
Popup blockers will typically only allow window.open if used during the processing of a user event (like a click). That might be causing the problem if you have popups blocked.
You need to call window.open from an event initiated by the user, e.g. clicking on a link, and that link needs to have target="_blank". Otherwise, Chrome and Firefox will block the popup.
Also, the error is triggered because popUp is not checked for null before attempting to append the div to it. If there's no popup, you can't append an element to it.
(I forgot this bit and Musa made me remember, so thanks) IE will block appending any element created in a different window context from the window context that the element is being appending to. So, instead of creating the DIV node using the current document, you need to create it using the popUp's context.
Summing it all up, this is how it would look the code.
<!DOCTYPE html>
<html>
<head>
<script>
function go()
{
var popUp = window.open('about:blank');
try
{
// Make sure you have a body document when creating the new window....
popUp.document.write("<html><head><title></title></head><body></body>");
popUp.document.body.appendChild(popUp.document.createElement('div'));
}
catch(e)
{
console.log(e);
}
}
</script>
</head>
<body>
<button onclick="go()">Click Me</button>
</body>
</html>
Related
How can I close browser current tab open by url without a reference (I want to close it on button click)?
If you don't have a reference to the window, and you don't have the window's name (if it has one), you can't close the window. There's no way to look up the window by its URL.
(The name of the window would be the value of the target attribute if the window was opened by a link, or the second argument to window.open if opened that way.)
You used the word "current" in your question, but also said you don't have a reference to the window. If you really meant "current" (the page the button is on), you do have a reference to the window: window. (Also self.) In that case, you may or may not be able to close the window with this code in a click handler on the button calling close:
window.close();
Thank you, now I got answer to close the browser tab for IE, chrome, mozilla
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<input type="button" value="closeWindow1" onclick="windowClose()" />
<script>
function windowClose() {
var win = window.open("about:blank", "_self");
win.close();
}
</script>
</body>
</html>
thank you all
I want to know if the user has focus on the http or https.
So everytime the user clicks on one of the childwindows - i want to know which one is "active".
I checked the W3C. The Page Visibility API
Is there a way to detect if a browser window is not currently active?
But for me it only was working with tabs but not windows.
EDIT: And only tested on the Parentwindow.
Any Help?
Thanks in advance.
Here is what i got.
<html>
<head>
<title>checkfocus</title>
</head>
<body>
Click me.
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
var w;
var w2;
function loadChild() {
w = window.open("","",'width=400,height=200');
w.location.href="https://www.facebook.com";
w.moveTo(0,0)
w.addEventListener('focus',function(){
console.log("w")
})
w2 = window.open("","",'width=400,height=200');
w2.moveTo(400,0)
w2.location.href="http://www.facebook.com";
w2.addEventListener('focus',function(){
console.log("w2")
})
}
</script>
</body>
</html>
the Events is fired 2 times in chrome one time when the window is opened and one time location.href is set... but nothing afterwards
try to put the code in a div, put the div in a table and put the table in a top-frame...!
I need JavaScript code or HTML to make two websites open in two new browser tabs when clicking on one link. I do not want them to open in new windows, or on the current page that the link is on.
It probably won't work because the browser might consider it a popup and block it.
If the user allows popups you can do:
window.open(url, '_blank');
Like:
<a id="mydoublelink" href="http://site1.com" target="_blank">foo</a>
document.getElementById("mydoublelink").onclick=function(){
window.open('http://site2.com', '_blank');
}
If you call window.open in the onclick event you should be fine. Built-in popup blockers allow those. The kind of popups that get blocked come from other events or from scheduled events like a setTimeout.
document.getElement("my_link").onclick = function () {
window.open(/*..*/); // works
}
document.getElement("my_link").onclick = function () {
setTimeout(function () {
window.open(/*..*/); // will probably get blocked
});
}
This means, for instance, that if you open a popup after an AJAX call it will very likely get blocked. A workaround in this case is to open the popup right away and fill in the content later. This is outside the scope of this question but I feel like this is information that everyone should know.
Something like this?
<!DOCTYPE html>
<html>
<head>
<script>
function open_win()
{
window.open("URL");
open_win_two();
}
function open_win_two()
{
window.open("URL");
}
</script>
</head>
<body>
<a onclick="open_win()">luyfl</a>
</body>
</html>
Yu can try the new target _newtab:
blabla
It works in Firefox, don't know if it's supported in other browsers.
I solved a problem I had, by realizing that if you define a javascript function in a certain context, you cannot call it to run in a different context. Now, I have been exploring ways to accomplish that.
My goal is: I have three windows: The first one is the main window, where my function was created. The second is a newly opened window using window.open. This second window has a button to open the third and last window, making that after opening, that third one should run the same function that was defined in the first window.
I have tried to reference this third window in the main function like this:
(assuming that the name of my window.open variable is w )
var w;
function main() {
console.log(w);
...rest of the code....
}
so I was hoping that it would give a hint to the main function, of the existence of W, the window that I would open later on.
Then, from the second window I would create a button and make an onclick:
w.main;
which wouldn't work...
Is there a different method (or a way to change this one) to make a function aware of the existence of a different context where it was created, so when the moment arrives in the future, is able to run inside of it?
I am reading now about adapting call() to my purpose. Does it make sense, or you would suggest a different way?
Assuming window 1 opens window 2 and window 2 opens window 3
and you are trying to call the main method in window 1 from window 3
window.opener.opener.main();
to set w in window 1 to the window 3 reference when opening it in window 2:
window.opener.w = window.open();
Ok i tested this out.
A dialog opens displaying "test" in window 1 after window 3 opens
window1.html:
<html>
<head>
<script type="text/javascript">
var child = window.open("window2.html", "window2");
function test() {
alert("test");
}
</script>
</head>
<body>
</body>
</html>
window2.html:
<html>
<head>
<script type="text/javascript">
var child = window.open("window3.html", "window3");
</script>
</head>
<body>
</body>
</html>
window3.html:
<html>
<head>
<script type="text/javascript">
window.opener.opener.test();
</script>
</head>
<body>
</body>
</html>
We have a client requirement that has stumped me, embarrassingly enough.
The client has a set of links that need to open in a popup window - if you click on any of the links, it should reuse the same popup window. Easy enough, I thought, so I threw something like this together:
<html>
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
var popupWin = null;
function openWindow(url) {
if (popupWin == null) {
popupWin = window.open(url,'p2p','');
} else {
if (!popupWin.closed) {
popupWin.location.href = url;
} else {
popupWin = window.open(url,'p2p','');
}
}
popupWin.focus();
}
</script>
</head>
<body marginheight="0" marginwidth="0" leftmargin="0" topmargin="0" bgcolor="#ffffff">
<ul>
<li>Google</li>
<li>FB</li>
<li>Apple</li>
<li>ESPN</li>
</ul>
</body>
</html>
If you put that into an html file, all behaves as expected.
My problem is that when I use the client's intranet URLs per their requirement, the behavior I see is as follows:
Click on one of the popup links (popup link opens in a new window)
Click on another of the popup links (link replaces page opened in the first popup)
Close the popup window.
Click one of the popup links (doesn't matter which, opens in a new popup window as
expected)
Click on another of the popup links (popup opens in a new popup window, not reusing the popup window as expected)
The weird thing is that if I step through the javascript code in Firebug, it correctly gets to the branch of the if statement that determines that the popup window exists and is not closed (so it should be reused), but the line of code:
popupWin.location.href = url;
Ends up opening a new window for some reason.
So, any idea what's going on? I'm guessing something bizarre on the pages that the client wants me to popup is screwing things up in some mysterious fashion, but I can't figure out what it is. Wish I could provide the links to you, but unfortunately they're private.
Thanks much for any help.
Mustafa
Isn't this functionality inherent in HTML? Shouldn't it work without the javascript?