Open a div in new window - on-click of button - javascript

Guys I am trying to open a div in new window and I tried with window.open ,its working as expected.
HTML:
<div id="pass">pass this to the new window</div>
click
JS:
function openWin() {
var divText = document.getElementById("pass").outerHTML;
var myWindow = window.open('', '', 'width=200,height=100');
var doc = myWindow.document;
doc.open();
doc.write(divText);
doc.close();
}
http://jsfiddle.net/KZYJU/
Issue : If the window is already opened, when I click the button again, it should not open a new window again.
User should be able to see only one window.
In my case if I click the button 10 times ,10 windows is getting opened.
Guys please assist me on this.

You can do it like this:
var popup;
function openWin() {
if (popup && !popup.closed) {
popup.focus();
/* or do something else, e.g. close the popup or alert a warning */
} else {
var divText = document.getElementById("pass").outerHTML;
popup = window.open('', '', 'width=200,height=100');
var doc = popup.document;
doc.open();
doc.write(divText);
doc.close();
}
}
This will check if the popup window is open or not, and if it is then it will focus it.
Demo

Since you can write some script into the new window, you could use cookies to store a flag-like data in it so that you know the window is currently open.
On the main page, you first set the flag (I will name it windowOpen) to false, and check every time the link is clicked. If it is false then open new window; otherwise, do nothing.
On the subsequent window, set the flag to true on open and set it to false on close.

Set a window name in your call to window.open
window.open('', 'popupWindowName', 'width=200,height=100');
windowName is a DOMString specifying the name of the browsing context (window, or tab) into which to load the specified resource; if the name doesn't indicate an existing context, a new window is created and is given the name specified by windowName. This name can then be used as the target of links and forms by specifying it as the target attribute of or elements. The name should not contain whitespace. Keep in mind that this will not be used as the window's displayed title.
If the string is empty, the browser will create a new window every time (this behaviour doesn't work when the string is replaced with NULL).
Source

Just play with the Boolean flag. make it true when you click it first time. and restrict it with that.
var flag = false;
function openWin() {
if(!flag) {
var divText = document.getElementById("pass").outerHTML;
var myWindow = window.open('', '', 'width=200,height=100');
var doc = myWindow.document;
doc.open();
doc.write(divText);
doc.close();
flag = true
}
}
<div id="pass">pass this to the new window</div>
click

Related

How to open new HTML tab after clicking on the button

I have the landing page with some buttons to function.
When I click the Send Money button, it opens the sendMoney.html in the same tab. The code is following,
$("#sendMoney").click(function () {
var address = $('#address').find(":selected").text();
location.href = 'sendMoney.html#' + address;
});
How to open the sendMoney.html in the new tab?
To do what you require you can use window.open(). Although the name suggest it'll open a popup window, the request will actually be redirected to a new tab in all modern browsers. Try this:
$("#sendMoney").click(function () {
var address = $('#address').find(":selected").text();
window.open('sendMoney.html#' + address);
});
$("#sendMoney").click(function () {
var address = $('#address').find(":selected").text();
window.open('sendMoney.html#' + address);
});
Instead of using window.location, use window.open("your link");. With window.location its not possible to do that.
You can use <a> button text here <a/> to make a button and use attribute target as _blank to open page in new tab
Or
you can use window.open() function as
window.open(URL, name,)
Value for name can be
blank - URL is loaded into a new window. This is default
_parent - URL is loaded into the parent frame
_self - URL replaces the current page
_top - URL replaces any framesets that may be loaded name - The name of the window (Note: the name does not specify the title of the new
window)
You need to use window.open() which will open new tab in most of the new browsers. Here is the updated code:
$("#sendMoney").click(function () {
var address = $('#address option:selected').text();
window.open('sendMoney.html#' + address);
});

Allow user to change URL in window.open()

I have the following code which opens a new window when a user clicks on a button:
$('.loginButton').click(function () {
var strString = $("#medlineSearch").val()
var strSearch = "http://google.com&query=";
var url = strSearch + strString;
alert(strSearch+strString);
var windowName = $(this).attr('id');
window.open(url, windowName, "height=750,width=1250,scrollbars=1,resizable=1,location=1");
// custom handling here
return false;
});
What I am looking to do is allow the user to enter something else in the address bar which seems to be read only.
Is there any way to change that?
If you want to be able to change it, set the target to _blank.
This will prevent the new page to open as popup, but as new page.
window.open
( 'http://google.com'
, '_blank'
);
The jsfiddle.
You cannot change the url in popup window.
Read change url of already opened popup
Trick to do so
open console and type location.href='http://link.com'

if window is popup

Is there a way to determine if the current window is a popup? This is what I have right now but for some reason it is not working. I am trying to make sure that certain pages are only shown in popup window.
if(!opener)
window.location = 'error.php';
The value of opener is [object DOMWindow] even though the window is not popup.
Assuming you're opening popup windows yourself- set a flag:
var myWindow = window.open(...);
myWindow.isPopup = true;
then, in your popup window, check for the flag:
if (!window.isPopup) {
window.location = 'error.php';
}

Javascript: Check for duplicate opened window

Is it possible to check if same window is already opened?
For example i have opened a window via javascript.
Can i check if that's opened on another page via javascript?
Just want to focus on page if it's been opened already to avoid duplicate windows.
Thanks ;)
Look at window.open() method. You must specify the name of the window as the second parameter. If there already is a window with that name, then the new URL will be opened in the already existing window, see http://www.w3schools.com/jsref/met_win_open.asp
If you really want to check, if the window is opened by your own scripts, then you have to keep a reference to the opened window in a global variable or the likes and create it with
var myOpenedWindow = myOpenedWindow || window.open(URL, "MyNewWindow");
You can also encapsulate this behavior in a method:
var myOpenWindow = function(URL) {
var myOpenedWindow = myOpenedWindow || window.open(URL, "MyNewWindow");
myOpenedWindow.location.href= URL;
myOpenedWindow.focus();
}
And call that function with myOpenWindow('http://www.example.com/');
If you have parent--child window then here is a solution that will allow you to check to see if a child window is open from the parent that launched it. This will bring a
focus to the child window without reloading its data:
<script type="text/javascript">
var popWin;
function popPage(url)
{
if (popWin &! popWin.closed && popWin.focus){
popWin.focus();
} else {
popWin = window.open(url,'','width=800,height=600');
}
}
</script>
<a href="http://www.xzy.com"
onclick="popPage(this.href);return false;">link</a>
one more thing ::--- If the user refreshes the parent window, it may loses all its
references to any child windows it may have had open.
Hope this helps and let me know the output.
This will help if you want to open a url from a link
var Win=null;
function newTab(url){
//var Win; // this will hold our opened window
// first check to see if the window already exists
if (Win != null) {
// the window has already been created, but did the user close it?
// if so, then reopen it. Otherwise make it the active window.
if (!Win.closed) {
Win.close();
// return winObj;
}
// otherwise fall through to the code below to re-open the window
}
// if we get here, then the window hasn't been created yet, or it
// was closed by the user.
Win = window.open(url);
return Win;
}
newTab('index.html');

JavaScript Pop Up Issue

This happens in IE only (works in Chrome, Firefox):
The first time I click on the link, it opens the pop up, the second time, it just redirects me to the page.
When I refresh the page, the popup works the first time and then the second time, it again redirects.
function popUpWindow(win) {
myWindow = window.open(win, "popupwin", "height=310,width=570,resizeable=0, menubar=0,toolbar=0,location=0, directories=0,status=0");
}
This is how I call the function
User Status
EDIT: I apologize, the second time, it does not redirect, nothing happens when i click on the link It is redirecting.
EDIT: I close the popup when it opens up the first time and then click the popup link again.
I tried all the solutions presented below, what I found is that the JavaScript method is not called the second time I click on the link.
If the issue is that the popup is being redirected the second time, this is correct behavior according to the code. The name parameter is specified so that a popup can be reused. I don't necessarily recommend this, but you could use this to open multiple popups:
var popupIndex = 0;
function popUpWindow(win) {
myWindow = window.open(win, "popupwin" + popupIndex++, "height=310,width=570,resizeable=0, menubar=0,toolbar=0,location=0, directories=0,status=0");
}
Check whether the window has already been opened or been opened and subsequently closed. The following will focus the pop-up if it exists or open a pop-up otherwise. It's not clear whether you always want a new pop-up or whether focussing an existing one is good enough.
var myWindow = null;
function popUpWindow(win) {
if (!myWindow || myWindow.closed) {
myWindow = window.open(win, "popupwin", "height=310,width=570,resizeable=0, menubar=0,toolbar=0,location=0, directories=0,status=0");
} else {
myWindow.focus();
}
}
If you always want to close an existing pop-up before opening a new one:
var myWindow = null;
function popUpWindow(win) {
if (myWindow && !myWindow.closed) {
myWindow.close();
}
myWindow = window.open(win, "popupwin", "height=310,width=570,resizeable=0, menubar=0,toolbar=0,location=0, directories=0,status=0");
}
I assume you want to refresh the window which you would do like this:
var myWindow = null;
function popUpWindow(win) {
if (myWindow && !myWindow.closed) {
myWindow.close();
}
myWindow = window.open(win, name, options);
}

Categories