I am opening a new browser window on a click event. Is there a way that bound the close event of the child window from the parent
Sample html:
<button id="btn">Click</button>
<label id="lbl"></label>
Script:
$(function () {
$("#btn").on('click', function () {
window.open("about:blank", "test", "height=200px,width=200px");
$("#lbl").html("Opend");
});
});
Lest say for example, I want to change the label text to closed when the child is closed.
Js Fiddle Link
Use onbeforeunload event:
var new_window = window.open("about:blank", "test", "height=200px,width=200px");
new_window.onbeforeunload = function () {
alert('closed');
}
Demo: https://jsfiddle.net/p48eu9ng/1/
try this
$(function(){
$("#btn").on('click',function(){
var new_window = window.open("about:blank","test","height=200px,width=200px");
new_window.onbeforeunload = function(){ $("#lbl").html("Closed");}
$("#lbl").html("Opend");
});
});
Try this fiddle, changing label to close after closing new window.
$(function(){
$("#btn").on('click',function(){
var newWindow = window.open("about:blank","test","height=200px,width=200px");
$("#lbl").html("Opend");
$(newWindow).bind("beforeunload", function() {
$("#lbl").html("Closed");
})
});
Related
This doesn't work as to return the focus to the parent window in Firefox 4 and 5
<html>
<head>
<script type="text/javascript">
function openWin()
{
myWindow=window.open('','','width=200,height=100');
myWindow.document.write("<p>The new window.</p>");
myWindow.blur();
window.focus();
}
</script>
</head>
<body>
<input type="button" value="Open window" onclick="openWin()" />
</body>
</html>
How can I return focus to the parent window using javascript?
You need to give your parent window a name.
Parent.html
<a id="link" href="#">Click to child.html </a>
<script type="text/javascript">
$(document).ready(function () {
window.name = "parent";
$('#link').click(function (event){
event.preventDefault();
window.open("child.html");
});
});
</script>
Child.html
<a id="link" href="#">Return to Parent </a>
<script type="text/javascript">
$(document).ready(function () {
$('#link').click(function(event) {
event.preventDefault();
var goBack = window.open('', 'parent');
goBack.focus();
});
});
</script>
Now, whenever you click the link in child.html, the parent window will be focused.
Sorry for necromancing a very old question, but I ran into the same problem and couldn't find any solution. I eventually solved this by using the following script:
e = window;
while (e.frameElement !== null) {e = e.parent;}
e.parent.focus();
Apparently, calling just window.focus(); isn't enough. You have to call the Window's parent's focus method by using window.parent.focus(); You can't access any other properties from JS from it though, it will give a cross-source error. This script will also work if your script was fired from a frame within a page, assuming the frame and main page share the same source (domain).
I don't think you can return focus, not without closing the child window:
myWindow.close()
I tried to use the above example and it didn't work for me. I had to use a recursive loop to find the opener until the window didn't have an opener (bad design, I know, but our app has several levels of child windows). Here is the code example. I hope it helps:
/* This is for the button functionality.
The button element first comes in.
This element is then used to get the document that has the element.
The document window opener is then passed to the focusMain method */
function setFocusOnMain(el){
var doc = el.ownerDocument;
var win = doc.defaultView || doc.parentWindow;
focusMain(win.opener.document);
}
/* This is a recursive method that checks for a parent window of the current document.
If the document has no window opener, focus on this element because this is the Main.
If the document has a window opener, pass the window opener's document to focusMain. */
function focusMain(doc) {
var win = doc.defaultView || doc.parentWindow;
if (win.opener == null) {
doc.focus();
} else {
focusMain(win.opener.document);
}
}
Here is how I solved this.
const ParentWindowName = 'ParentWindowName';
// here set the parent window name so that you can switch back to it later and open the new window/tab
export const openChildWindow = (id) => {
window.name = ParentWindowName;
window.ChildWindowName = window.open('/child', id);
};
// here you can change the focus back to the new window.
export const focusParentWindow = () => {
window.open('', ParentWindowName).focus();
};
If this is a Window you opened yourself you can use opener.focus();
I am trying to make it when a user clicks anywhere on the page, a new tab opens. I only want this to happen once, as it would other-wise make it hard for them to navigate around my site. Here is my code:
document.onclick = function() {
window.open('http://example.com');
};
My problem is like I said, it happens every time a user clicks. How can I make it so it only happens once?
Thanks!
You could simply keep the count !
<script type="text/javascript">
var count=0;
document.onclick=function()
{
if(count==0){
window.open('http://example.com');
}
++count;
}
</script>
Just remove that onclick should be enough:
document.onclick = function() {
window.open('http://example.com');
document.onclick = null;
};
Demo:
document.onclick=function() {
alert('only show once!');
// Unset the onclick function.
document.onclick = null;
}
Add a name for the window
window.open('http://example.com','_test');
If you can use jquery:
$(document).one('click', function() {
window.open('your-url')
});
I am completely new to javascript (and jquery) and have been experimenting with drop down menus the past couple of days. I found this one fancy notification menu, and I tried to see what happens when I have two of them on the page. Anyways, I made a quick example of my problem here:
http://jsfiddle.net/rgt03mu4/24/
The problem is that I can have both notification containers open up if I click on both.
If I am already clicked on one of the bells, then I click on the other, it should close the other one. Instead it keeps it open, and even when you click on the other container one, it still doesn't close it. You have to click off the page or click the notification bells. I am trying to make it to where you can only have one open at a time. So in order to do this, I tried changing the names of the functions:
As you can see:
$(function() {
var nContainer = $(".notification-popup-container");
//notification popup
$("#notification-link").click(function() {
nContainer.fadeToggle(300);
return false;
});
//page click to hide the popup
$(document).click(function() {
nContainer.hide();
});
//popup notification bubble on click
nContainer.click(function() {
return false;
});
});
I added the next function to be called test(), which you would think, since it's an entirely new function it would work differently. Instead, the error still persists.
What am I doing wrong? I even gave the the new bell it's own divs and link name. I also renamed container to container2.
Set the global variable for your container:
var nContainer = $(".notification-popup-container");
var nContainer2 = $(".notification2-popup-container");
$(function() {
var nContainer = $(".notification-popup-container");
//notification popup
$("#notification-link").click(function() {
nContainer.fadeToggle(300);
nContainer2.hide(); //hide the second container
return false;
});
//page click to hide the popup
$(document).click(function() {
nContainer.hide();
});
//popup notification bubble on click
nContainer.click(function() {
return false;
});
});
And you can do same with other function.
DEMO
There is no need to give the popup containers different classnames.
I would give the a-tags a common classname instead of an id. The href can be used to identify the target popup, so the binding between the link and the target popup is set in the origin of action. The JS part would be abstracted and could be reused.
<a class='notification-link' href='#firstpopup'>X</a>
<a class='notification-link' href='#secondpopup'>X</a>
<div class='notification-popup-container' id="firstpopup">
... firstpopup
</div>
<div class='notification-popup-container' id="secondpopup">
... secondpopup
</div>
The click handler first hides all the popups before opening a new one.
$(".notification-link").click(function () {
$(".notification-popup-container").hide();
var targetId = $(this).attr('href');
$(targetId).fadeIn(300);
return false;
})
working example: http://jsfiddle.net/qyLekdwk/
The problem here is how the event propgation is handled
$(function () {
var nContainer = $(".notification-popup-container");
//notification popup
$("#notification-link").click(function () {
nContainer.fadeToggle(300);
});
//page click to hide the popup
$(document).click(function (e) {
if (!$(e.target).closest('#notification-link, .notification-popup-container').length) {
nContainer.hide();
}
});
});
$(function test() {
var nContainer2 = $(".notification2-popup-container");
//notification popup
$("#notification2-link").click(function test() {
nContainer2.fadeToggle(300);
});
$(document).click(function (e) {
if (!$(e.target).closest('#notification2-link, .notification-popup-container').length) {
nContainer2.hide();
}
});
});
Demo: Fiddle
I would like to know if there is a way of changeing an image with another when clicking on a button. I have 6 images with correct feedback and i must change them in wrong feedback when i click on a button. Image to change in html is with
fiddle: http://jsfiddle.net/usPMd/107/
var btn = $('#btn');
var idd = $('#idd');
btn.click(function() {
idd.toggle(800, function() {
btn.attr('src', 'images/wrong.svg');
}
});
});
I'm not really sure what you're after with the toggle function, but it works once your syntax is fixed:
http://jsfiddle.net/isherwood/Ma4N9
var btn = $('.boxImg');
var idd = $(btn).next('p').find('.feedback');
btn.click(function () {
idd.toggle(800, function () {
btn.attr('src', 'http://placekitten.com/300/300');
});
});
This doesn't work as to return the focus to the parent window in Firefox 4 and 5
<html>
<head>
<script type="text/javascript">
function openWin()
{
myWindow=window.open('','','width=200,height=100');
myWindow.document.write("<p>The new window.</p>");
myWindow.blur();
window.focus();
}
</script>
</head>
<body>
<input type="button" value="Open window" onclick="openWin()" />
</body>
</html>
How can I return focus to the parent window using javascript?
You need to give your parent window a name.
Parent.html
<a id="link" href="#">Click to child.html </a>
<script type="text/javascript">
$(document).ready(function () {
window.name = "parent";
$('#link').click(function (event){
event.preventDefault();
window.open("child.html");
});
});
</script>
Child.html
<a id="link" href="#">Return to Parent </a>
<script type="text/javascript">
$(document).ready(function () {
$('#link').click(function(event) {
event.preventDefault();
var goBack = window.open('', 'parent');
goBack.focus();
});
});
</script>
Now, whenever you click the link in child.html, the parent window will be focused.
Sorry for necromancing a very old question, but I ran into the same problem and couldn't find any solution. I eventually solved this by using the following script:
e = window;
while (e.frameElement !== null) {e = e.parent;}
e.parent.focus();
Apparently, calling just window.focus(); isn't enough. You have to call the Window's parent's focus method by using window.parent.focus(); You can't access any other properties from JS from it though, it will give a cross-source error. This script will also work if your script was fired from a frame within a page, assuming the frame and main page share the same source (domain).
I don't think you can return focus, not without closing the child window:
myWindow.close()
I tried to use the above example and it didn't work for me. I had to use a recursive loop to find the opener until the window didn't have an opener (bad design, I know, but our app has several levels of child windows). Here is the code example. I hope it helps:
/* This is for the button functionality.
The button element first comes in.
This element is then used to get the document that has the element.
The document window opener is then passed to the focusMain method */
function setFocusOnMain(el){
var doc = el.ownerDocument;
var win = doc.defaultView || doc.parentWindow;
focusMain(win.opener.document);
}
/* This is a recursive method that checks for a parent window of the current document.
If the document has no window opener, focus on this element because this is the Main.
If the document has a window opener, pass the window opener's document to focusMain. */
function focusMain(doc) {
var win = doc.defaultView || doc.parentWindow;
if (win.opener == null) {
doc.focus();
} else {
focusMain(win.opener.document);
}
}
Here is how I solved this.
const ParentWindowName = 'ParentWindowName';
// here set the parent window name so that you can switch back to it later and open the new window/tab
export const openChildWindow = (id) => {
window.name = ParentWindowName;
window.ChildWindowName = window.open('/child', id);
};
// here you can change the focus back to the new window.
export const focusParentWindow = () => {
window.open('', ParentWindowName).focus();
};
If this is a Window you opened yourself you can use opener.focus();