Open window from iframe - javascript

This is the situation. I'm trying to provide a service where someone embedds an iframe on their website with a form in it. At the end when an ajax request comes in again I want to pop a new window with a thank you note in it. window.open does not work and my guess is because the window object belongs to the page that embedds it and not the iframe and would then be considered cross-site scripting. Is there another way of doing this?
A thought I had was, that I can create links with target="_new" in my iframe, and clicking that would actually pop another window. Maybe I could create this link and "click"/trigger it with javascript?
I do have control over what the user embedds so potentially I could include a script there too, but the less code there, the better obviously.
Any takes?

window.open does not work and my guess is because the window object belongs to the page that embeds it
I don't think so. window as seen by your script will generally be the window object of the document inside the iframe.
More typically, a window.open on an XMLHttpRequest completion will be blocked by browsers' built-in pop-up-blockers. They usually only allow new windows to be opened in direct response to user interaction (typically, in the onclick event handler).
Maybe I could create this link and "click"/trigger it with javascript?
No, otherwise everyone would be doing that to circumvent blockers!
If you're starting an XHR and you know you're going to need a pop-up in the future you'll have to open it now and put some filler content in until the XHR returns, at which point you can update its contents.

Related

Force iframe (on different domain) links to open in a new window

Contained within my web page is an iframe that's src is set to load a page from another domain.
This domain has links with target="_top".
What I'm trying to achieve is, when someone clicks one of these links, I'd like it to open in a new window rather than load in the current window.
Is there any way to "catch" this and do what I require?
Thanks!
The domain has probably very good reasons to put target="_top" in their links. They don't want to be ran inside a(n) (i)frame. The correct answer to this is "No, this can't be done." Obvious security reasons prohibit us to do this.
You don't want somebody messing with your page by running it in an iframe. Phising and password retrieval becomes kind of easy when this is allowed. Browsers will not allow this these days.

Auto-loading page on start up into pop-up window when pop-up window is active

Hard to come up with a title, my apologizes.
Problem is this: Since modern web-browsers disable pop-up windows I am in need of a work-around.
When a visitor comes to the website they are prompt to press a button. Once the button is pressed a pop-up window is launched with the following code:
w = window.open('/audio/audioplayer.php?id='+audioId, 'audioplayer', params);
Now that the pop-up is open I would like when the visitor views other pages the pop-up is loaded with specific information based on whatever page they are on.
I am not sure if this is possible or how I can do this (check if the pop-up window is open, and if it is load the information, and if its not re-display the button)
I don't think it is possible to detect where the popup is open of not.
Have you thought about using a dialog? Rather than a popup?
window.open returns a windowObjectReference - this is the only way you can talk to the popup window. In particular, you can tell if that window is closed with the windowObjectReference.closed attribute. And the popup window has a window.opener attribute that references the parent window back. You can use both to communicate.
However, it seems you want to keep this communication between page loads. You have a few options:
Try to keep the link between windows as long as possible. The problem is that when the parent window reloads, all the javascript variables reset and there's no way to recover the reference to the popup - unless the popup sets it using window.opener. This link shows this approach and also another one with frames.You could consider it either ugly or clever. But it's not perfect. (You can't do anything if the user opens a page in a new link)
Communicate with the server using ajax from both main pages and the popup page. When a top level page wants to send a message to the popup, they start an XMLHttpRequest to your server which notifies a script which leaves a message in a "queue". The popup page regularly polls/long-polls the server with XHR too (or server sent events, my personal favorite) and updates its own contents accordingly.This might be a bit more complex/expensive than you'd like but it's also the safest solution.
Don't use popups, like the other answer suggested. A div with position: fixed could get you a similar result, and might save you from that method of communication between windows, however it also leads to having one dialog per page, so you need to ask the server if another instance of the dialog is running. Not quite sure if other methods of sync are viable for this (localstorage?)

Javascript Launch Popup and Fill a text field

I am struggling with this, hope something can shed some light.
On click of a button, I want to open a popup window, and transfer data from parent window to a text field in the popup. And, ensure popup is fully loaded before data is filled.
I tried using document.ReadyState=="complete", but it fires before the popup is fully loaded. I also tried to check the popup.body in a setTimeOut method, but to no avail.
Can you please help ?
PS: Popup window is a form from another domain !.
You won't be able to do this unless you control both domains due to XSS restrictions, but if you do control the content on both domains it's fairly simple with a bit of JS in the page you have opened in a frame.
Using window.opener in the frame will allow you to call any functions defined in the main window, this along with the seconds pages onload event is all you need to trigger a function when it loads.
If the content of the second page is not under your control the best thing you can do is an AJAX request which you will then need to be inserted into your page, this is a little nasty but will work.

Window.open reloading window

I have a an iframe that has a report within it. What I also have, is a feature to allow the user to detach the report within the iframe and open it up in it's own window, using window.open() call.
My problem is, when I press on the detach button, the whole report that initially loaded in the iframe actually goes through the motions of re-running the query again and so presents the user with a white screen until the report eventually renders again.
Is there anyway of not re-running the report in the detached window or somehow grabbing a cached version?
Thanks.
If you already have the HTML on the client side, you can write that to the popup window without going to the server.
var w = window.open();
w.document.write("Text in new Window");
That will open a window and write some text to it. All you need to do now is get the content from your iframe and write it to the new window. Bingo :)
BTW IMO: Opening new windows in browsers should be avoided where possible as many browsers block it and most automated UI testing tools don't support it.
EDIT (in response to comment):
Here is an example of reading from and writing to an iFrame using the jQuery JavaScript library.
// Write to
$("iframe").contents().find("body").html("Test Html")
// Read from
alert($("iframe").contents().find("body").html());
This basically finds iframe elements in the document and reads and write content to them. If your not using a JavaScript library I highly recommend learning up and using one of them.
BTW: My advice on popup windows also holds for iframes. You should avoid using them where possible.

Accessing the content of other tabs in a browser

I am using Mozilla Firefox and I am trying to figure out a way to access the content of other tabs in the same window using JavaScript and the DOM (I am open to other techniques if exist).
E.g., I want to run JavaScript code in tab1 which can find the title of some other tab. Basically I need this so that I can identify a tab which has opened due an href in my current page without using window.open method. All I want is a simple hyperlink which opens a page belonging to the same domain as the current page (the page should be opened in a new tab). Now I want to be able to access this new tab from the current tab.
Whilst you can easily open a new window using JavaScript, I'm sure that is as far as it goes. From a security point of view you wouldn't want JavaScript in one tab being able to query / access the DOM in another tab. Any site would then be able to gain access to your bank account details, etc. if both sites were opened in separate tabs.
You can access the new window/tab if it was opened with JavaScript and the page indeed is in the same domain.
You can open the window/tab like so
var win = window.open("/path_to_page");
Then you'll have to wait for the page to load before you can access e.g. the title.
win.onload = function(){ alert(win.document.title); };
You could use HTML5 cross-window messaging (archive.org link...but that's kind of cutting edge.
Even in that case, you'd probably need to hijack the <a> tag 'click' event with JavaScript and open the window yourself so that you'd have access to the new window object for posting messages.
Try setting a cookie which is accessible to any page in the same domain. On other pages, use a JavaScript timer to check if the cookie value has changed and when it has you can use its value and take an action.
It worked for me.
Well, this would not be possible, you could try
<a target="_blank" rel="opener" href="about:blank"></a>
This makes a link that opens an about:blank, this will have the same domain as the page that opened It because of the Same-Origen-policy.

Categories