I have PopUp window which goes to upload.jsp, which upload the file to directory.
The uploading logic is written in upload.jsp. My problem is I wanted get the saved path to parent popup window textfield.
The child window has a property, opener, which refers to the window that opened it. Provided they're both from the same origin, the child can access global variables on the parent like this:
opener.globalVariable
That means it can access the parent window's document as opener.document, and so can use opener.document.getElementById or opener.document.querySelector to get at elements in the parent window.
Example:
Parent page:
<!doctype html>
<html lang="en">
<body>
<input type="text"><input type="button" value="Click me">
<script>
document.querySelector("input[type=text]").value = Math.floor(Math.random() * 10000);
document.querySelector("input[type=button]").addEventListener(
"click",
function() {
var wnd = window.open("popup.html");
},
false
);
</script>
</body>
</html>
Popup page:
<!doctype html>
<html>
<body>
<script>
var field;
if (!opener) {
display("Not opened as a popup");
} else {
field = opener.document.querySelector("input[type=text]");
display("Value is " + field.value);
}
function display(msg) {
var p = document.createElement('p');
p.innerHTML = msg;
document.body.appendChild(p);
}
</script>
</body>
</html>
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 have a link in www.abc.com , clicking on which it opens up a popup from www.def.com .
There is a form in that popup from www.def.com. After clicking upon the "Save" button on the form I want the current window to be closed
and the parent will should redirect to a location.
Before this change when I was showing the form from www.abc.com, the below code was working fine .
<script language="JavaScript">
parent.window.close();
parent.opener.parent.window[1].location.replace('/abc.jsp?custid=12345');
</script>
But now "parent.opener" is returning null. So I am able to close the popup but not able to redirect the parent window to
disired location.
I know what I am asking is bit wired, But this the requirement.
At "abc.moc"
<!DOCTYPE html>
<html>
<head>
<script>
// open `popup`
var popup = window.open("popup.html", "popup", "width=200,height=200");
// handler `message` event from `popup.html`
function receiveMessage(event) {
console.log(event, event.data);
this.location.href = event.data;
}
window.addEventListener("message", receiveMessage, false);
</script>
</head>
<body>
</body>
</html>
at "def.moc"
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form>
<input type="button" value="Save">
</form>
<script>
console.log(window.opener);
var button = document.querySelector("form input[type=button]");
button.onclick = function(e) {
e.preventDefault();
e.stopPropagation();
// do stuff with `form`
// call `.postMessage()` on `window.opener` with
// first parameter URL to redirect `abc.moc`,
// second parameter `location.href` of `abc.moc`
window.opener.postMessage("redirect.html",
window.opener.location.href);
// close `popup`
window.close();
}
</script>
</body>
</html>
plnkr http://plnkr.co/edit/pK4XBJDrqFrE7awvMlZj?p=preview
i want to know how can i popup a window to a particular website when user clicks anywhere on the page.just like popup companies.Am i able to do that in html using javascript & jQuery ?
i would much appreciate any help.
Complete sample on pure JavaScript:
<html>
<head>
<title>Example</title>
</head>
<script type="text/javascript">
var popup = function() {
window.open ("http://example.com", "Window","status=1,toolbar=1");
}
</script>
<body onclick="popup()">
<h1>Click anywhere!</h1>
</body>
</html>
Result:
You can specify some parameters of your popup window:
Width and Height:
window.open ("http://example.com", "Window","status=1,toolbar=1,width=500,height=300,resizable=yes");
Complete reference on developer.mozilla.org
Bind the click to the body and enter the url
$('body').click(function(){
window.open('www.google.co.uk', 'New Window', 'height=200,width=200');
return false;
});
$('body').click(function(){window.open('www.stackoverflow.com')});
You can try this-
<script>
window.onclick = myFunction;
function myFunction() {
window.open('www.google.com', 'Popup Window', 'height=500,width=500');
}
</script>
This is my html code
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Modal Popup</title>
<body>
Please fill out my form.
</body>
</html>
May i know, how to display this contact us form as pop up and also click outside it should closed.
What my mistake in this code. can you help me?
In order to satisfy the "click outside it should be closed" requirement, you will need some JS to keep track of when the window is opened and closed. When you open the window from the parent page, it will open a popup, and if you click on the parent page again, while the window is still open, the popup will close.
<script>
var test = document.getElementById('test');
var win = null;
test.addEventListener('click', function(e) {
e.preventDefault();
e.stopPropagation();
win = window.open(test.href, null, 'height=823, width=680, toolbar=0, location=0, status=1, scrollbars=1, resizable=1');
return false;
});
window.addEventListener('click', function(e) {
if(win != null) {
win.close();
win = null;
}
});
</script>
...
Please fill out my form.
Working demo: http://jsfiddle.net/spryno724/b857X/2/
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();