I am using colorbox for showing pop ups. Is this possible to reload parent window without closing pop. I mean I want to do actions/events in the pop up and the changes should be displayed at parent window.
Thanks
You can definitely play with the elements in the page from within the colorbox. You can't, however, "refresh the parent window" as you stated in the question title, because then you will also lose the colorbox (which is a part of that page).
But judging from the rest of your question, you simply want to make changes in the page. If your colorbox is not in an iframe (e.g., you have not explicity set the option iframe:true) then it's pretty straightforward. Just create event handlers that are called from actions performed in the colorbox.
If you are setting the colorbox to open an iframe, there's a couple things to be aware of:
The iframe page (the contents of your colorbox) must be within the same domain
Use the parent. in the iframe's JS that references the parent page
Here's an example of the colorbox code you would have in the iframe page:
$(document).ready(function() {
$("a.internalColorboxLink").click(function() {
parent.$("body").append(
parent.$("<div/>").text("MY NEW TEXT")
);
});
});
In fact, this is the almost the same code as would be in the inline colorbox (that is, the js in the parent page). Simply remove the parent references.
I can post more concrete examples if you update your question with exactly what you want to do.
Related
I am opening a popup in my web page using JavaScript. From the popup, I access an element in the parent page using windows.parent.document.getElementsById("...") and this gets me the required element, which I can then process.
Now, there are couple of occasions when the web page is opened in another page using an IFrame. For this, the above JavaScript breaks, as windows.parent points to the outermost page (which contains the IFrame).
Q: How do I get a reference to the immediate parent page of a popup in JavaScript, when the parent page is opened from another page via IFrames?
Edit
What we are doing now is get the element using document.getElementsById("...") from the page calling the popup and then pass this value to the popup. Wanted to to know if there are any other elegant way to get the reference.
What you want is
window.opener
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
So I have a page that contains an iframe. Inside the iframe, there are links that opens up new page in the same window (self.location.href) (window.open(urlstring,'false') etc...etc...
Is there a way that I could force all links inside this window to open up their contents in a new window/pop up? Overrides their redirect settings and without changing the code inside the iframe?
The reason I'm asking this is because that, I think the iframe page still references the parent window as their window, therefore, when the function like "window.self.open" was triggered, it took my whole parent window away...
Maybe anyway to embed the iframe as an separate window inside the page? Just not sure how to avoid the same window referencing...
Thanks!
You can set the links to open in a new window by adding target="_blank" to the a element (e.g. Example).
If you want to have this applied to all links without touching the links themselves, you can include a jquery function to do it for you:
$("a").attr("target","_blank");
You could also add the target attribute to a base-tag within the header.
<base target="_blank">
This will be applied to all links as well.
I got stuck in a problem here. I have a fancybox inside an iFrame, and it works normally, but I need it to extend outside the iFrame so it can fill the whole screen (I mean extend to it's parent).
Does anybody knows how to do that?
If both the page and the iframe are in the same domain, you can open the fancybox window in the parent from inside the iframe. Check out the demo.
Parent Window (contains fancybox script, css and iframe)
<iframe src="child-page.htm" height="250" width="500"></iframe>
Child Page (contains script to call fancybox in the parent)
$('a').click(function() {
// target the parent window (same domain only)
// then call fancybox in the parent
// You can add any HTML you want inside the fancybox call
window.parent.$.fancybox('<img src="http://farm5.static.flickr.com/4058/4252054277_f0fa91e026.jpg" height="333" width="500">');
});
It's not possible. Iframes are independent pages and can only interact to the parent via JavaScript, and even then it's shady behavior.
Your fancybox cannot extend out of the iframe no matter what you do, but with some work you could call to one on the parent page via JavaScript.
This post will answer your question in both directions (parent -> iframe, iframe -> parent): Invoking JavaScript code in an iframe from the parent page
As a side note, iframes fell out of vogue about 5 years ago. I'd avoid them in any new production.
Cheers. :)
I have some pages with iframes in them. I want to add a link/button inside the iframe, to make the browser go back one page in history. But I want the PARENT to go back, not the iframe itself.
I originally had this, which makes the iframe page go back (if it exists):
« Go back
I've tried window.parent.history.back() and window.parent.document.history.back() but neither one works. There are no cross-domain issues accessing the iframe from the parent and vice-versa.
I've done some toying around to try and answer this question - at least in IE8.
Navigation within the iframe appears to impact the parent's history. I tested this by adding code within the parent page and within the linked child pages that uses alert to show the value of history.length. Navigating to a new window within the iframe causes history.length to increment on the parent page and on the child page.
The only way I can think to control the back behavior as you desire would be to use history.go(XXX) where XXX is a hard-coded number or is derived by keeping track of the number of page loads since they loaded the iframe.
My personal suggestion would be to explore an alternative to iframe if you can - this approach has a bit of a code smell to it. :)
You can use this:
back
or:
back
It's work for me!
;)