I'm newer in web programming so maybe my question will seem naive to some of you, I need to pass data from parent window to child popup window.
I found in google only opposite examples(i.e passing data from child to parent).
I will appreciate if you could share with example, or short explanation.
Thank you in advance.
As long as the popup you open abides by the Same-Origin policy you have full access to the document. And then you can just do something like this:
var child = window.open('about:blank'),
something = document.createElement('div');
something.innerHTML = "<h2>Something!</h2>";
child.document.body.appendChild(something);
Related
I would like to get a value of an input that is on an Iframe.
I would like to get this value when I click on a button that is on the mainPage.
well, I have this piece of code
Javascript on the MainPage:
var targetDiv = document.getElementById('CP_dem');
Html on MainPage:
A tab that when you click on it, it load the Iframe
and a button that call the javascript function
Html on the Iframe:
Zip Code : <input class="textForm" id="CP_dem" type="text" name="CP_dem" maxlength="5" size="5" value="42101">
I would like to get the input value when I click on my MainPageButton.
The javascript code show that "targetDiv" is null.
Can you please help me.
thx
The first thing you have to tell is is:
Is the iframe hosted on the same http host as the parent website? If not, you will run into javascripts same origin protection, read about it at: http://en.wikipedia.org/wiki/Same_origin_policy
In short: You will not be accessible to access the content. But wait! There is a workaround which I will explain after dealing with the second case, where the http host is the same!
So lets talk about that second case. Well then the job is easy...
You just have to access the iframe (probably give the iframe tag an id "example"). Then you can access the window using example.contentWindow.document or example.contentDocument
Whichever is set, depends on the browser. You will have to do some checking in js. Something like
if(document.getElementById('contentWindow.document').contentWindow) {
ifdoc = document.getElementById('contentWindow.document').contentWindow.document
} else {
ifdoc = document.getElementById('contentWindow.document').contentDocument
}
Then you can access the form and element just as you do in javascript, i will not cover that here...
So lets jump to the interesting part of this answer! Lets work around the same origin poliy. This is also called "cross site scripting" (go ahead and google that...)
So basically it comes down to one thing:
There is one property that is accessible from the child as well as from the parent document!
It is the document.location property!
So what can you do?
The child site can modify it and then the parent site can monitor it and react to changes.
Another nice feature is the url fragment (the part which comes after the #). This part does not reload the website, so javascript can modify it happliy and the parent site can poll it in regular intervals and react to it...
Basically this provides a ground for communication for parent and child document which can be worked on. There are beautifully designed librarys for that! The javscript version of "log in with facebook" was based on the same principle!
What this means is that the child document has to cooperate with the parent, therefore it is intentional and both parties basically work together on the job.
So this is OK and it is ok that they work around the same origin policies.
Hope this covers your question in theory and gives you something to work with in praxis!
Have a nice day on SO :)
I have written a function to remove an iFrame, however the iFrame I want to remove is called in another php-script. I am wondering how i can refer to this script. This is the code for when the iFrame would be in the same script:
function removeFrame(framename,action){
iFrameObject = document.getElementById(framename);
iFrameObject.style.display = action;
}
So i want something like 'otherpage.php.document.getElementbyId(framename)' but I don't really know how to do this..
Before I answer your question, I would highly recommend avoiding situations like this - communication between frames - if at all possible because it becomes messy very quickly.
However, you can accomplished what you're asking for with a small modification to your code. The amended function will when invoked from the iframe or from the parent window itself. Keep in mind, though, that inter-window communication are subject to the same origin policy.
function removeFrame(framename,action){
iFrameObject = window.parent.document.getElementById(framename);
iFrameObject.style.display = action;
}
This change involves pointing to the current window's parent, which in the case of the iframe is the page that embeds it. When the current window has no real parent window, window.parent references the current window (which explains why this function works on the parent page or within an iframe).
I'm trying to put together a quick Firefox sidebar for internal use only.
I'm struggling a bit in understanding how sidebar and main browser window communicate. What I want to do exactly is call existing javascript functions that reside in the main browser window only.
My code looks like this;
ff-sidebar.xul
<checkbox label="Button hover" checked="false" oncommand="add_enhance(this)"/>
ff-sidebar.js
function add_enhance(cb){
if (cb.checked) {
// this bit is wrong I know
window.content.document.NEWSTYLE.buttonHover();
}
}
So the question is, how do I call a function called NEWSTYLE.buttonHover() that lives in the main window?
Theoretically, this should work:
window.content.NEWSTYLE.buttonHover();
window.content points to the browser content window and the variable NEWSTYLE is defined on this window. In reality things are a bit more messy due to security mechanisms - privileged code cannot access objects of unprivileged code directly. Instead you get to access them through XPCNativeWrapper (see https://developer.mozilla.org/en/XPCNativeWrapper). Technical details changed somewhat in Firefox 4 but essentially it is still the same.
The easiest way to do what you want without introducing security issues is changing the location of the content window to a javascript: URL. Like this:
window.content.location.href = "javascript:void NEWSTYLE.buttonHover()";
You won't be able to get the result of this function but it doesn't look like you need it.
I've opened a new window with window.open() and I want to use the reference from the window.open() call to then write content to the new window. I've tried copying HTML from the old window to the new window by using myWindow.document.body.innerHTML = oldWindowDiv.innerHTML; but that's doesn't work. Any ideas?
The reference returned by window.open() is to the child window's window object. So you can do anything you would normally do, here's an example:
var myWindow = window.open('...')
myWindow.document.getElementById('foo').style.backgroundColor = 'red'
Bear in mind that this will only work if the parent and child windows have the same domain. Otherwise cross-site scripting security restrictions will stop you.
I think this will do the trick.
function popUp(){
var newWindow = window.open("","Test","width=300,height=300,scrollbars=1,resizable=1")
//read text from textbox placed in parent window
var text = document.form.input.value
var html = "<html><head></head><body>Hello, <b>"+ text +"</b>."
html += "How are you today?</body></html>"
newWindow .document.open()
newWindow .document.write(html)
newWindow .document.close()
}
The form solution that Vijesh mentions is the basic idea behind communicating data between windows. If you're looking for some library code, there's a great jQuery plugin for exactly this: WindowMsg (see link at bottom due to weird Stack Overflow auto-linking bug).
As I described in my answer here: How can I implement the pop out functionality of chat windows in GMail? WindowMsg uses a form in each window and then the window.document.form['foo'] hash for communication. As Dan mentions above, this does only work if the window's share a domain.
Also as mentioned in the other thread, you can use the JSON 2 lib from JSON.org to serialize javascript objects for sending between windows in this manner rather than having to communicate solely using strings.
WindowMsg:
http://www.sfpeter.com/2008/03/13/communication-between-browser-windows-with-jquery-my-new-plugin/
myWindow.document.writeln(documentString)
I could write this, but before I do, I wanted to check to see if there are existing solutions out there since it seems a lot of websites already do this, so I was wondering if there was a quick way to do this.
Also, I am talking about "popout" windows, not "popup" windows. All JavaScript libraries support "popup" windows, but I want ones where they originally open as "popup" windows in the same browser window, but there is also a link to open them up in a brand new browser window.
Check out Cappuccino, it's more of a windowing framework than a web 2.0 framework. It's based off of Apples Cocoa, and uses a Superset of Javascript called Objective-J. Superset meaning that any JS is valid, but it extends on the language with additional syntax that is similar to Cocoa and Objetive-C.
http://cappuccino.org
var oDiv = document.getElementById('mydiv');
var oWindow = window.open("about:blank");
oWindow.document.body.appendChild(oDiv.cloneNode(true))
You will probably also need to move stylesheets there as well.
I don"t know a framework to do that for you. But the JS code to do that might be simple.
For the in-page-popup part, just open an absolute div. If you want the div to become a real popup, open a popup window then remove your div content from the main document and append it to the popup window document (you way have to clone it because JS may not like passing around DOM nodes between different documents).
JQuery - Look for Dialog.
http://docs.jquery.com/UI/Dialog
You can customize with CSS to control the title bar, if it can be moved or resized, etc.
PS: Follow the link for an example.
you can try http://mochaui.com/demo/, it's written in mootools