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();
Related
I know that this question is been asked tons of times, but I'm asking not exactly that. This code belongs to website menu bar, so I have to keep this code, otherwise design would be totally different.
Code:
<li class="removable-parent">
<a class="removable-parent" href="http://88.88.209.56:12/player.html" data-
link-type="EXTERNAL" target= "_blank">
<span id="4884dd90" class="preview-element Link item-link magic-circle-
holder text-element custom" data-menu-name="PREVIEW_LINK" >Spiller</span>
</a>
<script>
function clickHandler() {
window.open(this.href, "_blank", "width=640,height=480");
return false; // to prevent default action.
} document.getElementById("http://88.88.209.56:12/player.html").onclick=clickHandler
}
</script>
</li>
So how can I make that this code opens window in decided size?
You will need to use javascript.
Get a reference to your object and handle the click event. In that event, use window.open with the proper parameters to set the width and height of your pop-up window.
Make sure you cancel the original event so you don't end up with two pop-ups.
Something like:
<script>
function clickHandler() {
window.open(this.href, "_blank", "width=640,height=480");
return false; // to prevent default action.
}
var elems = document.querySelectorAll(".removable-parent");
for (var i = 0, elem; elem = elems[i]; ++i) {
elem.onclick = clickHandler;
}
</script>
Or, if you wish to apply this behavior on one link, first add an id attribute to your link:
<a class="removable-parent" id="myelement" href="http://88.88.209.56:12/player.html" data-link-type="EXTERNAL" target= "_blank">
The script should then be simplified so it applies only on that element:
<script>
function clickHandler() {
window.open(this.href, "_blank", "width=640,height=480");
return false; // to prevent default action.
}
document.getElementById("myelement").onclick = clickHandler;
</script>
I'm using this for the preview of a saved HTML code (also live)
But for the 1st time I have to click and enter to view the preview
How can I see preview once the browser window opens?
Code:
function showHTML () {
textarea1 = document.getElementById('htmltxt');
viewHtml = document.getElementById('htmlpreview');
viewHtml.innerHTML = textarea1.value ;
}
As far as I have understood the requirement is to call showHTML() on page load..
<body onload="showHTML()">
<textarea id="htmltxt">
aksjdhkasjdhakjds
</textarea>
<span id="htmlpreview"></span>
<script>
function showHTML() {
textarea1 = document.getElementById('htmltxt');
viewHtml = document.getElementById('htmlpreview');
viewHtml.innerHTML = textarea1.value;
}
</script>
</body>
Simply call your function when the document loads, as well as in your click handler:
function showHTML() {
textarea1 = document.getElementById('htmltxt');
viewHtml = document.getElementById('htmlpreview');
viewHtml.innerHTML = textarea1.value;
}
document.addEventListener('DOMContentLoaded', showHTML)
Note that instead of attaching a DOMContentLoaded listener, you could just call showHTML() somewhere inside a <script> tag that sits after both your #htmltxt textarea and your #htmlpreview element (so that they will have been parsed before execution begins).
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");
})
});
How can I get the ID of my Window ?
$(window).unload(function () {
if (alterado == 1) {
window.opener.location.reload();
}
});
How can I get the ID of my window.opener.location ?
I need to put a block in this window like $("#window").block(message:"loading");, or a div that exists in the parent window.
window.opener.$("#window").block(message:"loading");
Your can use window.opener.document to get access to the opener document.
like
var doc = window.opener.document;
doc.getElementById("xyz").innerHTML = "Loading"
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();