is it possible to close child window from parent window? - javascript

i am with stuck an unorthodox requirement, i have opened a window on page load using jquery like this
$(document).ready(function() {
loadLifeCare();
});
and the function goes like this
function loadLifeCare()
{
window.open('/abc/abc/abc','','width=100,height=100');
}
now this function loads a url in the new window which creates a session for the user on different
domain.
i just need to know if it is either possible to close this window after few seconds or change the href and reload it to a different link,
and i can't code on the child window.

This will open the window and then close it after 10 seconds...
function loadLifeCare()
{
var wnd = window.open('/abc/abc/abc','','width=100,height=100');
setTimeout(function() {
wnd.close();
}, 10000);
}
If you want to redirect it elsewhere, you can do this...
function loadLifeCare()
{
var wnd = window.open('/abc/abc/abc','','width=100,height=100');
setTimeout(function() {
wnd.location.href = "http://wherever.com";
}, 10000);
}

Related

Javascript - run function in iFrame after parent window has loaded

Is there a way to know if parent window has loaded from within iframe?
I want to run a function which is in iFrame but I need to run it after all the parent windows are loaded and the event listener will be inside the iframe.
I tried the following but it runs before parent windows are loaded.
window.addEventListener('load', function () {
alert("It's loaded!")
});
One way would be to add the iframe dynamically:
parent:
window.addEventListener('load', function () {
var iframe = document.createElement('iframe');
iframe.src = "https://www.example.com";
document.body.appendChild(iframe);
});
iframe:
window.addEventListener('load', function () {
alert('hello world!');
//doSomethingUseful();
}
This way, you could be certain that they will load in a specific order. However, as they'd be loading in series, the increase in total page load time could become noticeable.
Alternatively, you could use this approach. This one may not work as is, if one page happens to finish loading before the other. If you do opt for this approach, it may be necessary to communicate in both directions so that the first page to load finds out when the second page has loaded. That may look like this:
parent:
newEvent();
window.document.addEventListener('myCustomEventI', newEvent, false);
function newEvent() {
var data = { loaded: true }
var event = new CustomEvent('myCustomEventP', { detail: data })
window.parent.document.dispatchEvent(event);
}
iframe:
newEvent();
window.document.addEventListener('myCustomEventP', handleEvent, false);
function newEvent() {
var data = { loaded: true }
var event = new CustomEvent('myCustomEventI', { detail: data })
window.parent.document.dispatchEvent(event);
}
function handleEvent(e) {
alert('both loaded!');
//doSomethingUseful();
}

jQuery Preloader with min-time

Heyo,
I was wondering if there would be a way to set a min-time to an onload function so that the div is shown min 2sec. Basicly the same as with min-width or min-height. If the site is taking longer than 2sec to load, the div will still be shown untill the site is fully loaded but when the site takes less than 2sec to load the div will still be displayed for a minimum of 2sec.
Here is my current code:
$(window).on('load', function() {
$('.preloader').delay(350).fadeOut('slow');
});
Try this:
$(window).on('load', function() {
setTimeout( function(){
$('.preloader').fadeOut('slow');
}, 2000 )
});
So I take it you want a function to be run when either: the page loads or after 2 seconds, whatever comes later.
First, define a function to be called:
function load_func() {
$('.preloader').delay(350).fadeOut('slow');
}
Then, let's define a way to call the function in either situation:
var pageLoaded = false;
var timeoutElapsed = false;
$(window).on('load', function() {
pageLoaded = true;
if (timeoutElapsed) {
load_func();
}
});
setTimeout(function() {
timeoutElapsed = true;
if (pageLoaded) {
load_func();
}
}, 2000);
This way, if the page loads before 2 seconds, it will wait the timeout to call the function.
Otherwise, if the page loads after 2 seconds, it will call it whenever that load event happened.

How to determine if content in popup window is loaded

I need to set some contextData for a popup window from its parent. I try this:
var some contextData = {};
$(function() {
$('#clickme').click(function() {
var w = window.open('http://jsfiddle.net');
w.contextData = contextData
//w.context data is null in the popup after the page loads - seems to get overwritten/deleted
});
});
It doesn't work, so my next thought, wait until content is loaded
var some contextData = {};
$(function() {
$('#clickme').click(function() {
var w = window.open('http://jsfiddle.net');
w.onload = function() {
//Never Fires
w.contextData = contextData;
}
});
});
See this fiddle. My onload method never fires.
This works:
var some contextData = {};
$(function() {
$('#clickme').click(function() {
var w = window.open('http://jsfiddle.net');
setTimeout(function(){
if(w.someVariableSetByThePageBeingLoaded) {
w.contextData = contextData;
}
else{
setTimeout(arguments.callee, 1);
}
}, 1);
});
});
But has obvious elegance problems (but is the current work around).
I know you can go the other way (have the popup call back to a method on the opener/parent, but this forces me to maintain some way of looking up context (and I have to pass the key to the context to the popup in the query string). The current method lets me capture the context in a closure, making my popup a much more reusable piece of code.
I am not trying to do this cross domain - both the parent and popup are in the same domain, although the parent is an iframe (hard to test with jsfiddle).
Suggestions?
If you are doing this with an iframe try it this way
HTML
<button id="clickme">Click Me</button>
<iframe id="framer"></iframe>
​
Javascript
$(function() {
$('#clickme').click(function() {
$("#framer").attr("src","http://jsfiddle.net");
$("#framer")[0].onload = function(){
alert('loaded');
};
});
});​
I updated your jsfiddle http://jsfiddle.net/HNvn3/2/
EDIT
Since the above is completely wrong this might point you in the right direction but it needs to be tried in the real environment to see if it works.
The global variable frames should be set and if you
window.open("http://jsfiddle.net","child_window");
frames["child_window"] might refer to the other window
I got javascript access errors when trying it in jsfiddle - so this might be the right track
EDIT2
Trying out on my local dev box I was able to make this work
var w = window.open("http://localhost");
w.window.onload = function(){
alert("here");
};
the alert() happened in the parent window

Trigger an event in the popup from a parent

I have two windows , the second is a popup , and I want to trigger an event from the parent (the first one where I have a link to this popup).
here's a javascript code for the trigger (in the parent window's javascript code):
winPop=window.open(opts.url,opts.nom,"width="+opts.width+",height="+opts.height+",top="+opts.top+",left="+opts.left);
winPop.onload=function(){
$(winPop.document).trigger('connected', {
jid: "jid",
password: '123'
});
}
This javascript code launchs the popup and tries to trigger an event bound in popup (ready) function:
$(document).ready(function () {
$(document).bind('connected', function () {
alert("Hello , I'm here");
});
The problem is that using the previous javascript code .. the bound event is not triggered as predicted.
Thanks in advance
I had done this earlier with something like this:
var realWindowOpen = window.open;
window.open = wrappedWindowOpen;
function wrappedWindowOpen(url, name, specs, replace) {
window.open = realWindowOpen;
var windowHandle = window.open(url, name, specs, replace);
if (windowHandle)
console.log("New Popup Window created: ", {name:name});
else
console.error("New Window Failed. " + {name:name});
if (popupFnCreationNotify) {
popupFnCreationNotify(windowHandle);
popupFnCreationNotify = null;
}
window.open = wrappedWindowOpen;
}
// Calling example
var popupFnCreationNotify = function() {
console.log("I got called back");
};
window.open("my url");
Please note:
realWindowOpen always points to window.open.
I wrap the actual window.open with wrappedWindowOpen as you can see in the code.
Before calling window.open, the caller sets the popupFnCreationNotify to any callback function they wish.

Open popup and refresh parent page on close popup

I opened a popup window by window.open in JavaScript, I want to refresh parent page when I close this popup window.(onclose event?) how can I do that?
window.open("foo.html","windowName", "width=200,height=200,scrollbars=no");
You can access parent window using 'window.opener', so, write something like the following in the child window:
<script>
window.onunload = refreshParent;
function refreshParent() {
window.opener.location.reload();
}
</script>
The pop-up window does not have any close event that you can listen to.
On the other hand, there is a closed property that is set to true when the window gets closed.
You can set a timer to check that closed property and do it like this:
var win = window.open('foo.html', 'windowName',"width=200,height=200,scrollbars=no");
var timer = setInterval(function() {
if(win.closed) {
clearInterval(timer);
alert('closed');
}
}, 1000);
See this working Fiddle example!
on your child page, put these:
<script type="text/javascript">
function refreshAndClose() {
window.opener.location.reload(true);
window.close();
}
</script>
and
<body onbeforeunload="refreshAndClose();">
but as a good UI design, you should use a Close button because it's more user friendly. see code below.
<script type="text/javascript">
$(document).ready(function () {
$('#btn').click(function () {
window.opener.location.reload(true);
window.close();
});
});
</script>
<input type='button' id='btn' value='Close' />
I use this:
<script language='javascript'>
var t;
function doLoad() {
t = setTimeout("window.close()",1000);
}
</script>
<script type="text/javascript">
function refreshAndClose() {
window.opener.location.reload(true);
window.close();
}
</script>
<body onbeforeunload="refreshAndClose();" onLoad='doLoad()''>
when the window closes it then refreshes the parent window.
window.open will return a reference to the newly created window, provided the URL opened complies with Same Origin Policy.
This should work:
function windowClose() {
window.location.reload();
}
var foo = window.open("foo.html","windowName", "width=200,height=200,scrollbars=no");
foo.onbeforeunload= windowClose;​
In my case I opened a pop up window on click on linkbutton in parent page.
To refresh parent on closing child using
window.opener.location.reload();
in child window caused re open the child window (Might be because of View State I guess. Correct me If I m wrong).
So I decided not to reload page in parent and load the the page again assigning same url to it.
To avoid popup opening again after closing pop up window this might help,
window.onunload = function(){
window.opener.location = window.opener.location;};
If your app runs on an HTML5 enabled browser. You can use postMessage. The example given there is quite similar to yours.
Try this
self.opener.location.reload();
Open the parent of a current window and reload the location.
You can reach main page with parent command (parent is the window) after the step you can make everything...
function funcx() {
var result = confirm('bla bla bla.!');
if(result)
//parent.location.assign("http://localhost:58250/Ekocc/" + document.getElementById('hdnLink').value + "");
parent.location.assign("http://blabla.com/" + document.getElementById('hdnLink').value + "");
}
You can use the below code in the parent page.
<script>
window.onunload = refreshParent;
function refreshParent() {
window.opener.location.reload();
}
</script>
Following code will manage to refresh parent window post close :
function ManageQB_PopUp() {
$(document).ready(function () {
window.close();
});
window.onunload = function () {
var win = window.opener;
if (!win.closed) {
window.opener.location.reload();
}
};
}

Categories

Resources