jQuery iBox (lightbox clone) and IFRAMES - javascript

Hey there you lot, is there a way that I can open a lightbox (in this case iBox) from within an IFRAME and have the actual lightbox open in the Parent page?
sigh I am confusing myself here!

Only if you have control of the parent page too.
If so you could either invoke methods directly using parent.foo() if on the same domain, or using e.g easyXDM if on different domains.
Either way, you will have to load the correct scripts and css on the parent to do so.

Related

How to make javascript that'll click automatically inside iframe's link?

Is it possible ?
I've made on page with iframe, I want a script that'll click automatically inside in one iframe's link.
But I also want that script to detect half link, I mean the link which is in iframe changes everytime, but the first part of the link doesnt change, so the javascript should detect half link which doesnt change and redirect to it...
Why don't you write a "client" library and import it within iFrame. This library listen to a message from HTML5 postMessage call with certain attribute and react appropriately. Since you have access to the parent object through the event object (or window.parent), you can also send response back with the result. This way, it doesn't matter if it's cross-domain and as long as this library exists, you can communicate back-and-forth and even has the iFrame initiate if you write it properly.
I can't share the code with you since it's our proprietary library, but that's part of the idea.
If the content of your iframe is from a different domain, you can't. Allowing this would be a major security concern.
If your iframe content is in the same domain, then you can access the iframe content through its contentWindow property. You can then work with your iframe link the same way you would if the link was in the main page.

colorbox refreshing parent window without closing popup

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.

Extend Fancybox inside an iFrame to outside

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. :)

Javascript/iframe/embed/object question

OK, so here is my issue. I'm building a system which will allow people to embed lists of links on their pages. When the link is clicked, i'd like to use something like Lightview or Lightwindow to open it up over the whole window, not just in the iframe.
I don't have access to the page that the user will be embedding this object into. Everything I've tried so far tells me that I can't open anything over the parent window, since I don't have access to it from the iframe or object, javacript security issue.
However, I've seen sites that do that kind of overlay. so it must be possible. If anyone can point me to any resources that could help, that would be great.
if it matters, i'm using Ruby on Rails...
Thanks...chris
It can't be done if the iframe is from another domain than the website, because:
You cannot change the dimensions of
the iframe from within it.
You cannot access the parent
document from within the iframe.
I suggest trying using some sort of JS file people will embed in they're website, in the place they want your links to be (something like Google Ads) and do a document.write to place
your links in their webpage. then, you will have access to the page, and can do a whole lot more :)
is this helping you?
As vsync said, you will have to have the user embed a script instead of the plain HTML.
This script has full control of the page, and if you also want it to be able to communicate with the framed document (your site), then you could use something like easyxdm to do cross document communication.

Javascript and CSS Popups

I've got a question about CSS based popup windows, like those generated by jQuery UI's dialog system, or Colorbox. If I use those (or something like them) to open a popup window to an HTML page and that page has Javascript in it, does the Javascript in the popup window run in its own context, or does it become part of the context of the Javascript in the parent window that opened it? I ask so that I can write the Javascript on both pages (parent and popup) so there is no namespace collision.
Thanks in advance!
Doug
That depends on the type of popup. (I'm assuming we are talking about in-page popups here and not window.open() ones that open a new browser window.)
If it contains an IFRAME in which you load a separate page, then that page will have its own styles. You will have to re-load any CSS and JavaScript files you need.
If it doesn't contain an IFRAME, but just a regular DIV or other element into which content is loaded through AJAX (or directly output in the "parent" HTML page) then the popup will run in the context of the parent page.
If you use real popups (new windows) it is definitly in its own context.
If you use modal windows purely in HTML it depends. It can be an iframe (own context) or injected elements (parent context).
With Colorbox, you can set the iframe property to true and it will load the content in an iframe. This gives the page its own scope. If you don't use an iframe, then the page will be loaded in the context of the current document.
$('a.someLink').colorbox({ href:"somePage.html", iframe: true });

Categories