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?
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 am opening a new window on clicking a hyper link.
Issue:
After minimizing the window, again if I click on hyper link, the same window should be opened(In chrome minimized window will open up). But this is not happening in firefox and IE. Can anyone please help.
<html>
<head></head>
<body>
<p>Visit our HTML tutorial</p>
</body>
</html>
window.open allows you to specify a unique identifier to your popup; this allows you to open many links always in the same popup window.
If you use different identifiers on different links, it should open multiple popup windows.
<p>
Visit our HTML tutorial
</p>
<p>
Visit our HTML tutorial
</p>
If the strWindowFeatures parameter is used and no size features are defined, then the new window dimensions will be the same as the dimensions of the most recently rendered window.
you might want to check this link
window.open web api for mozilla
The idea of Unique ID in the parameter's list simply doesn't work as suggested in another answer.
You need a function for to do what you need in IE and FF. The trick is to get a function to see if it has opened a window before and do nothing if it has.
<script>
var opened = false;
function openWindow(){
if (!opened) {
w = window.open('', 'test', 'width=1500, height=900');
w.location = "http://www.google.com";;
w.onload = function() {
w.onunload = function() {
opened = false;
};
};
opened = true;
}
}
</script>
I'm using the opened global variable to track this. We set the newly created window to set false to this variable when it closes. Now the function can decide if it should really open a new window. Please note the following points:
We use onLoad function of the new window to set onUnload. Because IE seems to replace whatever the event handlers set here soon after it loads the page.
You can see that we first open a blank window and then set the url of it. This is because IE returns nothing when opening a new window if it is from another domain.
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 would like to have a button on a web page with the following behavior:
On the first click, open a pop-up.
On later clicks, if the pop-up is still open, just bring it to the front. If not, re-open.
The below code generally works in Firefox, Safari, and IE8 (see here for Chrome woes). However, I have found a failure mode in Firefox that I don't know how to deal with:
If for some reason the user has opened a second tab in the pop-up window and that second tab has focus within that window, the popupWindow.focus() command fails to have any effect. (If the first tab has focus within that window, everything works just great.)
So, how can I focus the popup and the desired tab in Firefox?
<head>
<script type="text/javascript">
var popupWindow = null;
var doPopup = function () {
if (popupWindow && !popupWindow.closed) {
popupWindow.focus();
} else {
popupWindow = window.open("http://google.com", "_blank",
"width=200,height=200");
}
};
</script>
</head>
<body>
<button onclick="doPopup(); return false">
create a pop-up
</button>
</body>
Here's my scenario:
I have a page containing several links; each link is meant to open another window containing a pdf. The catch is, I can't have that window directly go to the PDF because I do not want to make it apparent to the end user the PDF is located on another domain, and I need to name the PDF differently than how it would regularly show up.
So then I have two pages: One is blank, and only contains a frame to be used for displaying the PDFs:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>[PDF]</title>
</head>
<frameset>
<frame id="pdfFrame">
</frameset>
</html>
And on the page with the links, I have the following function that calls this page (we'll call the above page "pdf.html"):
function OpenWindow(pdfTitle, pdfLocation)
{
var myWindow = window.open("pdf.html", "", "toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=1,resizable=1,width=700,height=600");
myWindow.document.title = pdfTitle;
myWindow.document.getElementById('pdfFrame').src = pdfLocation;
}
For the most part, this seems to work fine; however, on occasion the pop up window will not be loaded prior to the lines above that setup the title/frame source, and it will crash (or not load properly, at least).
My question is, is there a simple way for me to add in some sort of blocking call after opening the window, to wait until we're ready to run this code?
You can't really block until it's loaded but you can set an event in the popup, like this:
myWindow.onload = function()
{
document.title = pdfTitle;
document.getElementById('pdfFrame').src = pdfLocation;
}