Develop Reference

how to call function in parent window when closing child window

I have a parent window and a child window. I want to call a function when closing the child window .
The code of parent window is below:
function Button4_onclick(){
newWin=window.open("http://10.10.19.22:8086/childwindow.jsp");
newWin.onunload = updatet();
}
function updatet()
{
if(newWin.location != "about:blank"){
document.getElementById("SerialNumber24").value='2345';
}
But this code not work and the function is called when opening the child window instead. So which event listener can I use for closing ? Thx.

That is possible if you own the child window. You need to set event onbeforeunload on the child.
Working fiddle: https://jsfiddle.net/itgoldman/9mafwu2L/33/
window.foo = function foo() {
alert("hello i am parent")
}
function open_window() {
var win = window.open("", "Title", "toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=600,height=200,top=" + (screen.height - 400) + ",left=" + (screen.width - 840));
if (!win) {
alert("window open was blocked");
return;
}
win.document.write(str);
win.window.parent = this;
}
var script = `
window.onbeforeunload = function(ev) {
window.parent.foo();
return;
}
`;
var str = '<scri' + 'pt>' + script + '</scr' + 'ipt><h1>close me</h1>'

Closing a JavaScript window with an onclick event

We have to make a JavaScript that opens a new Window, and then you need to be able to close it again with a click inside the window.
But my code does not work, could someone please provide me an answer to how this is done best?
function swipe() {
var largeImage = document.getElementById('largeImage');
var url = largeImage.getAttribute('src');
var w = largeImage.naturalWidth;
var h = largeImage.naturalHeight;
window.open(url,"Image", "height="+ h +", width="+ w +", resizable=yes");
var myWindow = window.self;
myWindow.addEventListener("click", clickHandler);
var elementIsClicked = false;
function clickHandler(){
elementIsClicked = true
}
function isElementClicked (){
if(elementIsClicked){
newWindow.close();
}
}
setInterval(isElementClicked, 500);
}

A comment says that newWindow is not defined anywhere. I think you meant to use the myWindow object. myWindow.close() will work, since it closes the window.
If you want to execute this when this first loads, you should put this in a window.onload function or a self-invoking function. Also, for full compatibility within all browsers, you should omit the resizable=yes part, because that is supported in only IE.
Also, if you want to use jQuery, you can execute this method within an $(window).load() function.

You can utilize document.write()
window.onload = function() {
var largeImage = document.getElementById("largeImage");
// var url = largeImage.getAttribute('src');
var w = largeImage.naturalWidth;
var h = largeImage.naturalHeight;
// open blank `window`
var popup = window.open("", "Image"
, "height="+ h
+", width="+ w
+", resizable=yes");
// write `img` `outerHTML` to `popup` `window`
popup.document.write(largeImage.outerHTML);
window.onclick = function() {
// close `popup`
popup.document.write("<script>this.close()<\/script>");
// remove `onclick` handler
this.onclick = null;
}
}
plnkr http://plnkr.co/edit/0KUPw3UlEF0ONO1vDoOU?p=preview

var newWindow;
function windowOpener() {
var url = "http://stackoverflow.com/questions/36387144/closing-a-javascript-window-with-an-onclick-event";
newWindow = window.open(url, "Popup", "width=700,height=500");
var timer = setInterval(function() {
if (newWindow.closed) {
alert("window closed");
clearInterval(timer);
}
}, 250)
}
<button onclick="windowOpener();">Open a window</button>
Here is the code for opening and detecting whenever it closes.
Here is the sample code on codepen.io http://codepen.io/sujeetkrjaiswal/pen/vGebqy
The code is not runnig in the stackoverflow for some reason, try it on codepen.

Thank you all for your answers.
Here is the solution to my problem:
function swipe() {
var largeImage = document.getElementById('largeImage');
var url = largeImage.getAttribute('src');
var w = largeImage.naturalWidth;
var h = largeImage.naturalHeight;
var popup = window.open(url,"Image", "height="+ h +", width="+ w +", resizable=yes");
popup.document.write('<img src="women_running_small.jpg" id="largeImage" style="width:95% ;height:95%; object-fit:contain"/>');
popup.onclick = function() {
// close `popup`
popup.document.write("<script>this.close()<\/script>");
// remove `onclick` handler
this.onclick = null;
}
}

javascript code is not opening in new tab

I've come across many forum posts regarding opening window as a new tab instead of new window but no use. When I click on a link/something.. at present it is opening in a new window but i want a tab instead of window.
Here is my sample code:
$(document).on('click', '#myTabs li', function (event) {
if ($(event.target).attr('class') != 'closeIcon') {
var temp_id = $(this).attr('id');
selectedId = temp_id.substring(0, temp_id.length - 6);
$('input:radio[id=all]').prop('checked', true);
loadAll();
}
});
function loadAll() {
var clientForm = document.createElement("form");
var target = "Map" + (windowCount++);
clientForm.target = target;
clientForm.method = "POST"; // or "post" if appropriate
clientForm.action = "../Test.jsp";
var idInput = document.createElement("input");
idInput.type = "hidden";
idInput.name = "id";
idInput.value = id;
clientForm.appendChild(idInput);
document.body.appendChild(clientForm);
var nameDisplay = document.createElement("input");
nameDisplay.type = "hidden";
nameDisplay.name = "idText";
nameDisplay.value = idText;
clientForm.appendChild(nameDisplay);
document.body.appendChild(clientForm);
var dateDisplay = document.createElement("input");
dateDisplay.type = "hidden";
dateDisplay.name = "dateText";
dateDisplay.value = dateText;
clientForm.appendChild(dateDisplay);
document.body.appendChild(clientForm);
map = window.open('', target, '_blank');
map = window.open("", target, "status=0,title=0,height=600,width=800,scrollbars=1");
if (map) {
clientForm.submit();
} else {
alert('You must allow popups for this map to work.');
}
}

I see this line in your code, which specifies width and height of the new window:
map = window.open("", target, "status=0, title=0,height=600,width=800,scrollbars=1");
When you specify a width and a height the browser will always open in a new window instead of a new tab.
If you specify three parameters, your statement will always open a new window, not a new tab.
Your statement should probably read:
window.open(<URL>, '_blank');
You can find more details here.

How to open a new browser tab from within a jQuery callback

I have tried the following to achieve this:
Jquery Open in new Tab (_blank)
How can I open a link in a new window?
But neither works when calling window.open from inside the callback. Here's my code
$.post('api', {
}, function() {
var win = window.open('target-file', '_blank');
win.focus();
});

Try this:
$.post('api', {
}, function() {
window.open('target-file', '_blank');
});

try it with the name of the window
Like
window.open("url", "NameOfNewWindow");
SEE HERE

use MySurfaceWindow = window.open("url","windowname","settings");
see below example:
MySurfaceWindow = window.open('/DesktopModules/DMS/DMS.PatientEChart/Surface Pages/Surface6.aspx?SurfaceTooth=' + $("#lbl" + $(this).val()).text() + '&ProcedureID=0' + '&ColorD=I' + '', '', 'height=240,width=200,top=' + top + ',left=' + left + 'status=no,toolbar=no,menubar=no,location=no,resizable=no,scrollbars=no');

ou can add this simple jQuery snipplet to your source to open every external link in a new tab of the web browser
$(document).ready(function(){
$('a').each(function() {
var a = new RegExp('/' + window.location.host + '/');
if(!a.test(this.href)) {
$(this).click(function(event) {
event.preventDefault();
event.stopPropagation();
window.open(this.href, '_blank');
});
}
});
});

Set title in the window popup

Is it possible to set a title in the window popup?
I have this in javascript:
var popup = window.open('......');
popup.document.title = "my title";
but this does not work..still can't see any title
EDIT: the page popup is displaying is .aspx and it HAS a title tag, but still can't see that on the popup window..

Since popup.onload does not seem to work, here is a workaround: http://jsfiddle.net/WJdbk/.
var win = window.open('', 'foo', ''); // open popup
function check() {
if(win.document) { // if loaded
win.document.title = "test"; // set title
} else { // if not loaded yet
setTimeout(check, 10); // check in another 10ms
}
}
check(); // start checking

I was having problems with the accepted answer until I realized that if you open an existing, slow page that already has a <title> the browser will 1) set your title, then 2) once the document fully loads it will (re)set the popup title with the "normal" value.
So, introducing a reasonable delay (function openPopupWithTitle):
var overridePopupTitle = function(popup, title, delayFinal, delayRepeat) {
// https://stackoverflow.com/a/7501545/1037948
// delay writing the title until after it's fully loaded,
// because the webpage's actual title may take some time to appear
if(popup.document) setTimeout(function() { popup.document.title = title; }, delayFinal || 1000);
else setTimeout(function() { overridePopupTitle(popup, title); }, delayRepeat || 100);
}
var openPopupWithTitle = function(url, title, settings, delay) {
var win = window.open(url, title, settings);
overridePopupTitle(win, title, delay);
return win;
}

None of these answers worked for me. I was trying to open a popup with a PDF inside and kept getting permission denied trying to set the title using the above methods. I finally found another post that pointed me in the correct direction. Below is the code I ended up using.
Source: How to Set the Title in Window Popup When Url Points to a PDF File
var winLookup;
var showToolbar = false;
function openReportWindow(m_title, m_url, m_width, m_height)
{
var strURL;
var intLeft, intTop;
strURL = m_url;
// Check if we've got an open window.
if ((winLookup) && (!winLookup.closed))
winLookup.close();
// Set up the window so that it's centered.
intLeft = (screen.width) ? ((screen.width - m_width) / 2) : 0;
intTop = (screen.height) ? ((screen.height - m_height) / 2) : 0;
// Open the window.
winLookup = window.open('', 'winLookup','scrollbars=no,resizable=yes,toolbar='+(showToolbar?'yes':'no')+',height=' + m_height + ',width=' + m_width + ',top=' + intTop + ',left=' + intLeft);
checkPopup(m_url, m_title);
// Set the window opener.
if ((document.window != null) && (!winLookup.opener))
winLookup.opener = document.window;
// Set the focus.
if (winLookup.focus)
winLookup.focus();
}
function checkPopup(m_url, m_title) {
if(winLookup.document) {
winLookup.document.write('<html><head><title>' + m_title + '</title></head><body height="100%" width="100%"><embed src="' +m_url + '" type="application/pdf" height="100%" width="100%" /></body></html>');
} else {
// if not loaded yet
setTimeout(checkPopup(m_url, m_title), 10); // check in another 10ms
}
}

You can use also
var popup = window.open('......');
popup.onload = function () {
popup.document.title = "my title";
}

Not sure if this will help,
function GetInput() {
var userInput;
var stringOutput;
userInput = prompt('What should the title be?', "");
stringOutput = userInput;
document.title = stringOutput;
}
<button type="button" onclick="GetInput()">Change Title</button>

var win= window.open('......');
win.document.writeln("<title>"+yourtitle+"</title>");
This works for me, tested in chromium browsers.

I ended up creating a setTitle method in my popup window and calling it from my parent page.
//popup page:
function setTitle(t) {
document.title = t;
}
//parent page
popupWindow.setTitle('my title');

Try this, it will work.
var timerObj, newWindow;
function openDetailsPopUpWindow(url) {
newWindow = window.open(url, '', 'height=500,width=700,menubar=no,resizable=yes,scrollbars=yes');
timerObj = window.setInterval("fun_To_ReTitle('~~newTitle~~ ')", 10);
}
function fun_To_ReTitle(newTitle){
if (newWindow.document.readyState == 'complete') {
newWindow.document.title=newTitle;
window.clearInterval(timerObj);
}
}