window.opener.focus() fails in IE, and works in FireFox - javascript

i have the problem that IE cant bring up opener window when i call
opener.focus() method
window.opener.focus(); // After that, child window stay in front.
html1.htm file:
<script type="text/javascript" language="JavaScript"><!--
function toCompare() {
wCompare = window.open("html2.htm", "wCompare", "width=800,height=600,resizable=yes,directories=no,status=no,toolbar=no,menubar=0,location=no,scrollbars=yes");
wCompare.focus();
};
//--></script>
</head>
<body>
open child window
</body>
html2.htm
<script type="text/javascript" language="JavaScript"><!--
function show_Parent(url) {
window.opener.location.href = url;
window.opener.focus(); // After that, child window stay in front.
}
//--></script>
</head>
<body>
<a onclick="return show_Parent('html3.htm');">go back to parent window</a>
</body>

This works fine for me, but I have seen similar behavior. Try creating a function in the parent page that grabs it's own focus and changes the URL
html1.htm
function focusAndGo(url) {
window.focus();
// EDIT: changed document.location.href= to window.location.href=
// Reference:
// https://developer.mozilla.org/En/Document.location
// document.location was originally a read-only property,
// although Gecko browsers allow you to assign to it as well.
// For cross-browser safety, use window.location instead.
window.location.href=url;
}
and call this from html2.htm
window.opener.focusAndGo(url);

Try to blur the current window first, maybe that helps.
window.blur();
window.opener.focus();

Related

why can't I get the content of another window?

I am a javascript beginner . I wrote a javascript code to open a website in new window and then get the content of that new window and display it in the first window .. and this is the code :
<!DOCTYPE html>
<html><head></head><body>
<div id="display"></div>
<script type="text/javascript">
var newwin=window.open("http://www.w3schools.com");
newwin.onload=function ()
{display.innerHTML = newwin.document.documentElement.innerHTML;};
</script>
</body></html>
It didn't work .. the web site opened in the new window but the content didn't appear in the first window .. why?
thanks in advance.
Use _parent as a second parameter to position your webpage. (BTW I am assuming you are allowing popups in your browser settings)
var newwin=window.open("http://www.w3schools.com", "_parent");
You cannot do this if the child window is from a different domain. Each domain is sandboxed from the others for security reasons.
There are 2 errors that prevent you:
Different domains
Even if same domain, you set onload function after calling window.open(). So the new "onload" behavior never runs
Solution for same domain:
<!DOCTYPE html>
<html><head></head><body>
<div id="display"></div>
<script type="text/javascript">
var w=window.open("another.html");
var tid = setInterval function () {
if (w.document.readyState !== 'complete')
return;
clearInterval(tid);
display.innerHTML = w.document.documentElement.innerHTML);
}, 100);
</script>
</body></html>

Chrome Extension: Create a new tab by click a button

I am a beginner building a Chrome extension. I have an issue using the function described in the Chrome extension developer doc to make a button to create a new tab in "popup.html". It doesn't work no matter which methods I have tried from Stack Overflow.
My code is as follows:
<html>
<head>
<title>Facebook Connect For Chrome Extension</title>
<script type="text/javascript" src="background.js"></script>
<script type="text/javascript" src="popup.js"></script>
<script>
function showIndex(){
var index_url="/index.html",
chrome.tabs.create({
url: index_url
}),
}
</script>
<body>
<button value="tab" style="width:100px; height:100px;" onclick="showIndex();">Go to Index</button>
</body>
or
function createTab() {
chrome.tabs.create({url: "/index.html"});
}
Go to Index
Neither option seems to work.
So I wonder whether this function should be placed in background.js? If not, please tell me what's wrong with this code. Thanks in advance!
BTW I changed the URL to www.stackoverflow.com. It is still the same---not working.
It looks like you spelled create wrong in your HTML.
Your issue is probably that Chrome does not allow you to use "unsafe" code in extensions. See the documentation here. You cannot have javascript in your html. You have to subscribe to the event handler on the DOM element.
<html>
<head>
<title>Facebook Connect For Chrome Extension</title>
<script type="text/javascript" src="background.js"></script>
<script type="text/javascript" src="popup.js"></script>
<body>
<button id="index" value="tab" style="width:100px; height:100px;">Go to Index</button>
<script type="text/javascript" src="indexStuff.js"></script>
</body>
</html>
You then need a new indexStuff.js file with this
function showIndex() {
var index_url = "/index.html";
chrome.tabs.create({
url: index_url
});
}
document.getElementById('index').addEventListener("click", showIndex);
Note, the script tag could be moved to the top if you add an event handler to check when the DOM is loaded.
function showIndex(){
var index_url="/index.html",//why are you using "," instead of ";"?
chrome.tabs.create({
url: index_url
}), //why are you using "," instead of ";"?
}
why are you using "," at the end of line, instead of ";"?
You can use window.open(url, title, options) to open a popup window via JavaScript.
options is a string containing one or more of these variables (or empty):
width width of the window
height height of the window
location URL visible or not
status statusbar visible or not
menubar menubar visible or not
directories I'm guessing this is the bookmark bar
toolbar toolbar (back, home, etc.) visible or not
resizable whether or not resizable
scrollbars whether or not to enable scrollbars
e.g.:
window.open('http://website.com/popup.html', 'Popup Window', 'width=640,height=480,location=yes,scrollbars=yes');

How to call a function when close popup window

I am calling the Javascript window.open() function to load another url in a pop up window.
When the users closes the popup window, I want the MyThanks() function to be called. How I can do this?
My Script :
<!DOCTYPE html>
<html>
<head>
<script>
function openWin(){
myWindow=window.open('http://facebook.com/ekwebhost','','width=600,height=400,left=200');
myWindow.focus();
}
function MyThanks(){
alert("Thanks");
}
</script>
</head>
<body>
<input type="button" value="Open window" onclick="openWin()" />
</body>
</html>
Regarding usage of popups:
Are you aware that Facebook & Twitter still use popup windows for user like & follow. Go to http://www.ekwebhost.com and click the Facebook "Like" button or the Twitter "Follow" button. Why can't I use popup windows for my own needs?
function openWin(){
myWindow=window.open('http://facebook.com/ekwebhost','','width=600,height=400,left=200');
// Add this event listener; the function will be called when the window closes
myWindow.onbeforeunload = function(){ alert("Thanks");};
myWindow.focus();
}
Try this!
You can swap out the function(){ alert("Thanks");}; for MyThanks to call your function.
The new window that you open will have an attribute called opener that references the Window object that created it. You can then call functions on the parent window by calling window.opener.MyThanks();
Popup:
<script type="text/javascript">
function closePopup() {
window.opener.MyThanks();
window.close();
}
</script>
<div>
<h1>My Popup</h1>
<!-- Form or info to display -->
<button onclick="closePopup();">Close</button>
</div>
While there is nothing inherently wrong with browser popup windows, they can be annoying since the user can lose them behind other windows. Also, it takes their focus off of your page to do something else. The application that I currently develop is trying to move all of our popup windows to Javascript dialogs. It gets pretty annoying for users once you get 3 popups deep.
There are a bunch of ways to create dialogs within your webpage. jQuery UI is one library that I like.
You can try this:
<script>
function openWin() {
myWindow = window.open('http://facebook.com/ekwebhost', '', 'width=600,height=400,left=200');
myWindow.focus();
MyThanks();
}
function MyThanks() {
alert("Thanks");
}
</script>

Access a variable of iframe from parent

script of iframe
<script type="text/javascript" >
var a=5;
</script>
script of parent window
<script type="text/javascript" >
function close()
{
var check=document.getElementById("iframeid").contentDocument.a;
alert(check)
}
</script>
I want to access the variable which is defined inside the iframe from parent. But the above code doesn't work properly can anyone give an idea to implement this.
Using contentWindow instead of contentDocument works for me:
var check = document.getElementById("iframeid").contentWindow.a;
Also, ensure that the domains match and that you are using a webserver to test (I got a protocol warning when testing from the file system).
UPDATE: You're almost definitely better to use the postMessage API.
One method that has always worked reliably for me is for the iFrame to give its parent a reference to its own window when it first loads. The parent can then access all the variables through that reference. This does require that the parent is loaded before the iFrame, but for me that is usually the case.
So in the parent
var iFrameWin;
Then in the iFrame at some point after it has loaded and settled down
parent.iFrameWin = window; //parent now has a ref to the iframe's window
Then, in the parent when it wants a global var contents from the iFrame
alert(iFrameWin.ivar); // shows value if the global 'ivar' in the iFrame
script of iframe:
var a = 5;
window.parent.postMessage(['varA', a], '*'); // put this in some sort of function, ready, or whatever - you can call it multiple times if you need to as the code in the parent is an eventListener
script of parent window:
var b;
// you might want to write these into if statements to make sure that e.data[0] is varA if you have multiple messages coming across
if (typeof window.addEventListener != 'undefined') {
window.addEventListener('message', function(e) {
b = e.data[1];
}, false);
} else if (typeof window.attachEvent != 'undefined') { // this part is for IE8
window.attachEvent('onmessage', function(e) {
b = e.data; // you'll probably have to play around with this part as I can't remember exactly how it comes across in IE8 -- i think it will involve slice() iirc
});
}
Most of my knowledge on this topic comes from Ben Vinegar's talk on Seamless iFrames
This is a cross-domain "okay" method to deal wit this stuff. I'm sure there are some security holes, just as with anything on the web.
See if this works for you:
i created this parent.html page and put an iframe in it with a text input which will show the value passed from iframe window:
<html>
<head>
<title>IFrame Example</title>
<script language="javascript">
function hello(string){
var name=string
document.getElementById('myAnchor').value=name;
}
</script>
</head>
<body>
<iframe namne="iframe" id="iframe_id" src="inputForm.html" height="150" >
</iframe>
Name: <input type="text" id="myAnchor" >
</body>
</html>
and this iframe content page:
<html>
<head>
<title>IFrame Child Example</title>
</head>
<body>
<form name="frm2" >
<h1><font color="#000099">Input Form</font></h1>
<p>Name : </p><input type="text" name="resp" id="input" value=""/>
<input type="button" onclick="parent.hello(this.form.resp.value);" value="Submit" />
</form>
</body>
</html>
clicking the button i get the value in my parent window.
Play with it if you get something with this one.
document.getElementById('ID_OF_IFRAME').document.getElementById('f1')
Note that cross-domain restrictions will still apply.
This is how SharePoint do it when passing argument values from the parent window to the iframe. It's simple, but it works.
<html>
<body>
<iframe id="iframe1"></iframe>
<script type="text/javascript">
var ifr = window.document.getElementById("iframe1");
ifr.dialogArgs = "Hello from the other side.";
ifr.src = "iframeContent.html"
</script>
</body>
</html>
Inside iframeContent.html:
<html>
<body>
<input type="button" value="Click Me!" onclick="alert(window.frameElement.dialogArgs);" />
</body>
</html>
The other way around (accessing ifr.dialogArgs from the parent window after having its value modified by the iframe document) also works.

JQuery - Write to opener window

I have an HTML page that opens another page via JavaScript. When a user clicks a button in the other page, I want to post a message in a DIV of the opening page via JQuery. I cannot put my finger on it, but I cannot seem to get this to work. Here is my opener page
<html>
<head>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
</head>
<body>
<input type="button" onclick="window.open('dialog.html', '_blank', 'height=200, width=300');" value="launch!" />
<div id="testDiv"></div>
</body>
</html>
When the user clicks the "launch!" button, a dialog will appear. The code for the dialog looks like this:
<html>
<head>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
</head>
<body>
<input type="button" onclick="updateOpener()" value="Update Opener" />
<script type="text/javascript">
function updateOpener()
{
var testDiv = window.opener.jQuery("#testDiv");
if (testDiv != null) {
alert("here");
testDiv.html("Updated!");
}
}
</script>
</body>
</html>
Surprisingly, the alert box appears. However, I cannot seem to update the HTML of the DIV in my opening page. Does anyone know how to do this?
You're referencing "confirmDiv". Where is that DIV?
You can't do that if the parent page (the opener) resides on another domain. Otherwise, your code works perfectly.
Also, your != null check is probably not doing what you think it is doing, as the jQuery function never returns null. If you are checking for the existence of an element, you need to do it this way...
var el = $("#myElementId");
if(el.length == 0)
alert('Not found!');
Ummm, it works for me in Firefox 3.0.11, IE8 and Chrome 2... (I.e. the dialog.html button updates the HTML in the opener page to say 'Updated!'.)
Oddly, your example works fine for me in Chrome, IE 8 and FireFox. Do you have any other details?

Categories