I have a popup window, and from there, I want the parent window to reload, but a specific frame not the entire page.
So a user clicks a button from within a frame, it opens the popup. Now from the popup, based on a specific event, I want to reload a frame from the parent window.
Is this possible in IE?
I have a page index.php that has 2 iframes in it.
From the 2nd iframe a new popup window opens.
When the user clicks on a button or closes the popup window, I want to reload iframe#2 (the one that opened the window).
How can I do this?
I have tried:
opener.location.reload();
opener.top.document.getElementById('myIFrameId').location.reload()
opener.myIFrameId.location.reload();
Nothing seems to work.
I found a great jQuery plugin that works in all modern browsers, including IE8.
It allows you to easily call up a secondary browser window with parameters and then your allowed to pass data between the two, similar to how postMessage API works.
These data messages in turn can load new content or alternate webpage into the original iframe2 that's on your parent page once you analyze the incoming jQuery data.
Article: jQuery plugin for communication between browser windows
Online Demo: Parent Page
Download Project: windowmsg.zip
The downloaded files will work directly from your desktop, unlike jsFiddle since it's not permitted there.
Yet another solution that works great when you don't need a secondary browser window and the use of a floating iframe is acceptable, just use a lightbox clone that's iframe capable, such as Shadowbox-js.
The benefit of this method is that your in complete control of how the iframe closes, unlike the above secondary browser window that has it's own browser close button which may not trigger your desired events.
The callback during the lightbox clone closure event can take care of changing the contents in the parent pages iframe 2 as needed. Also, you can choose to have the lightbox bound within the iframe 2 (lightbox clone installed in iframe page), or have it fullscreen (lightbox clone installed in parent page).
In your case, window.opener is the window object of the iframe that opened the popup, so opener.location.reload() should work: Demo
Demo sources:
Main page: http://jsfiddle.net/jefferyto/DWeYZ/
Iframe: http://jsfiddle.net/jefferyto/WWbg9/
Popup: http://jsfiddle.net/jefferyto/TKQUJ/
I kind of rebuilt this functionality here:
http://jsfiddle.net/JBWTn/3/
Clicking the button in the popup will change the border look of a frame in the original window . The key here is navigating through the original window's frames using
window.opener.document.getElementById('[ID_OF_YOUR_FRAME]')
(quite similar to what Frank van Puffelen suggested)
To reload the frame instead of just changing its style, use
window.opener.document.getElementById('[ID_OF_YOUR_FRAME]').location.reload()
...like you tried in your question already.
This question reminded me of the functionality in phpMyAdmin (where you can run SQL queries from a popup window and have the results shown in the main window), so I had a quick look ;)
Have you tried:
opener.frames["myIFrameId"].location.reload();
it will show error "Error: Permission denied to access property 'reload'"
that's possibly "the same origin policy" problem.
or you create a div wrapper over the iframe and re generate iframe again
Related
I have added an iframe to my webpage that is used for converting video links to mp3 format.
iframe shows a button that, when clicked, opens a new tab before starting to download the wanted mp3 file. I would like to know if there is a way in javascript to close that newly opened tab to ensure a better user experience. I know that window.close() can do that, but not sure if we can apply that to a tab opened by a script from an iframe.
This is the iframe in question, It sends a get request to the link specified in the src attribute.
<iframe id="downloadIframe" src="https://loader.to/api/button/?url=${vidLink}&f=mp3&color=0964D3"></iframe>
When the iframe is loaded, you can see this in the code it loads with it:
<a id="downloadButton" onclick="onClick();window.open('https://loader.to/ajax/a.php');" href="#">
I believe that the opened window is caused by window.open().
Knowing that I cant change the code that is within an iframe, any idea how I can close that tab?
Open the dowlnoad in a iframe instead of a tab.
Then you can later drop the iframe from the DOM making it disappear.
you can block the iframe from opening new tabs by using the sandbox attribute.
sandbox=""
Sandbox Applies extra restrictions to the content in the frame. The value of the attribute can either be empty to apply all restrictions or space-separated tokens to lift particular restrictions.
You can read more about it here
So I've read about the HTML5 sandbox property and I understand that if I want to prevent an iframe redirect its parent window I can use the sandbox property leaving allow-top-navigation out. However when this is done, if the iframe was originally relying on top level redirection, what happens in its place is that it redirects to a blank page, effectively breaking navigation.
Can I prevent the iframe from tinkering its parent window while still allowing "top level" redirects, only letting these work within the context of the iframe instead of being top level?
Edit: For context, I'm working with a third party and its page has a form with a target _top. If the iframe is sandboxed, upon submitting the form users get a blank page, if it's not sandboxed the entire page is redirected. I'm looking for something that would allow to submit the form and show the result within the iframe itself.
With HTML5 the iframe sandbox attribute was added.
At the time of writing this works on Chrome, Safari, Firefox and recent versions of IE and Opera but does pretty much what you want:
Allows the iframe content to be treated as being from the same origin as the containing document
<iframe src="url" sandbox="allow-same-origin"></iframe>
Browser Compatibility
Some Useful links
w3schools for sandbox
developer.mozilla.org iframe
-
You can use the onbeforeunload property and determine if you wan to redirect or not.
Here is the docs page for it
Basically what I would try is this:
Make a function that adds the sandbox attribute with everything, just leaving out the allow-top-navigation, to the iframe
Bind a function to the onbeforeunload property of the iframe that calls the function that adds the sandbox attribute (be sure not to return anything because a dialog will pop-up)
This should work because the request is made in the iframe first, and then we can prevent it from carrying over to our top level window.
Another thing you should check is if you maybe left out the allow-formsoption, which can cause what you are describing.
Please let me know if any of this worked.
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?)
I want to open a remote url inside a javascript popup instead of doing window.open().
I came across libraries like lytebox,lightbox,thickbox which do that if the popup is opened from main webpage.
However my requirement is to open the popup from the link which occurs in a small iframe within the main page.( I can not alter the code of the main page, however Iframe webpage is fully in my control)
When I include those libraries in my iframe webpage, it opens the popup, but restricted only
to within iframe.How to make it appear over whole browser window ?
This is what i want : The user clicks on "click here" and it opens a javascript layer,not
restricted to within iframe.
you can just use
parent.document
from the iframe to access the parent window, if it is from the same domain. Otherwise, security concerns are raised.
You can inject the javascript by creating a script element in the parent's document, and then will be able to access the necessary functions.
I have this script on my html page:
<script language='javascript'>parent.resizeTo(550,510);</script>
I'd like to add to it so it positions the window in the middle of the screen. Also, I want to remove the address and tool bars (I've managed to hide the scrollbars by using body{overflow:hidden;}).
I know how to do this using JS upon opening a new window from the browser but this needs to work from clicking a link on a PDF.
Does anyone have any suggestions? Thank you!
You can't remove address bars, etc. from the user's browser window (even if the user is only you) unless you create a new window object. And the trend is toward removing more and more of your ability to "customize" such popup windows, for security reasons.
This is actually a feature, not a bug. Think about it.
If you're opening a browser window from a separate application, the page starts off its life with a completely-decorated browser window. There's no way to make those decorations go away after the page is loaded.
While I seriously doubt the justification of your desires the way to do it is to somehow open a window. That means that your pdf links to a page that as its action will open a window with an url that has the actual content. The pdf links to a page that is basically a redirector. You give the final URL as a parameter and launch it. Of course you need to disable the popup blocker for this to work, but you should not even consider doing this on a public (no browser control) website anyway. You also might want to add to the redirector page a button that the user can click to open the page if it was blocked by the popup blocker.