Develop Reference

How to get links in an iframe I don't control to open in parent window

Is this even possible?
Background
I have a page that's basically just a logo and an iframe.
I have complete control over the parent page and can use whatever tricks I want (html, javascript, php, etc.).
The page in the iframe, however, is a third party page that I have very little control over. I can use no javascript, no css, I can't even modify any links. All I can do is modify some text.
Problem
I only need the logo on the initial page. Once the user logs in or clicks to a different page, I want that new page to open in the parent window. I know about target="_top" and target="_parent", but those won't help me because I have no real access to the links in the iframe.
Question
Is there any attribute I can put on the iframe or javascript I can use in the parent page that will force new pages in the iframe to load in the parent window?

Creating iframe embeds and using modals

The company I work for is trying to come up with their own version of embed buttons. The logic is similar to what Twitter and Facebook offer. Unlike Twitter, we are using modals in-place of opening a new window. As the moment, we have developer a modal library which suits our needs.
Now, I will explain the process we are following:
Our embed script will be loaded in the user's website.
It looks for a link which we will provide to the user, and an iframe will be loaded in place of it.
The iframe uses two scripts — jQuery and our modal library.
On clicking the button present inside the iframe, the modal should open but it is present on our domain and it should open in the parent window.
From my analysis of the situation, I have come up with the following questions:
I have looked around the net but I have a feeling that opening a modal inside a parent window is not possible. Is there a workaround for this?
To prevent clickjacking we have set X-Frame-Options to SAMEORIGIN. How can we load content in an iframe from our website?
If we skip loading the button inside the iframe and modify the parent DOM, we can use our modal script, but applying our own styles to the buttons becomes a pain as we will be using important! for all styles. What other options are we left with?

To answer your first question, it isn't impossible as I've done something similar, thus I think it should solve your third question as well.
So on the parent page you would have a script such as
function showModal(display) {
var colorbox = $('#colorbox');
var overlay = $('#cboxOverlay');
if (display) {
colorbox.fadeIn("medium");
} else {
colorbox.fadeOut("medium");
overlay.fadeOut("medium");
}
}
I've used colorbox but you could use your custom modal, I've also used a parameter so you can show and hide it as you please.
Then from your iframe you could use this script to call your modal
javascript: window.parent.showModal(true);
Hope this helps.

1) Why dont you just open the modal from the iframe? It will make no difference if you call it from parent window or the child window.
2) Use JSON-P

Communicate with iFrame code (Chrome Extension)

Happy new year :)
I have a Chrome extension which is a popup that contains an iframe, inside that iframe i load a whole web app. my question is
How can i communicate with the code inside that iframe form popup.html or from the background page? I would need to either read DOM elements inside that iframe or better be able to make js calls to different methods.
Thanks for all the help!

Use a content script that loads inside that frame. They can access the DOM of that page and make calls to the background page, though it's a bit harder to be able to communicate with the JavaScript on that page - but DOM elements should be fine if you control both the iframe and the extension.
See http://code.google.com/chrome/extensions/content_scripts.html

Closing a modal box with an iframe inside the iframe

I'm trying to programmatically close a Facebox modal with JavaScript code that's called
within the iframe. That doesn't seem to work well with the JavaScript DOM.
https://github.com/defunkt/facebox
More generally, how would I close a generic modal that embeds an iframe with the code to close it inside the iframe. (sorry for the tounge(or eye) twisting)
Here's my example:
I have a facebox with something like this:
jQuery.facebox("stuff goes here <iframe src="example.php"...." more stuff"); //opens the modal(works great)
Then INSIDE the iframe, I want to call jQuery(document).trigger('close.facebox');. It only seems to work if I call it on the parent page or on the modal page, but not in the actual iframe. Is there a way I can make it close by calling it within an iframe example.php?
Edit: I was asking how I can access the parent frame from inside an iframe with jQuery to oversimplify the question.

You can't modify an element that "belongs" to the parent page from within that popup page. As far as I know you will have to issue your hide code from the parent. You could always have your code inside the dialog do something like this:
parent.$("#dialog").hide();
I think that's what you're asking...

Here's what worked for me:
My page has an IFRAME inside a DIV, the DIV is what facebox is supposed to fadeIn and fadeOut. The SRC of the IFRAME is a page that has a link on it that looks like this:
close this facebox modal
In the HEAD of the page that contains the DIV and IFRAME (NOT the page called into the IFRAME), I have the JavaScript function "close_QM_facebox()" that looks like this:
function close_QM_facebox() { jQuery(document).trigger('close.facebox'); }
That's all. Not tested cross-browser or in production yet. I spent hours Googling this problem and trying everything from changing single quotes to double quotes, document-dot-this and parent-dot-that, window.frames['whatever'], and this one-line function does it. If you're trying to trigger the function from the page that is called into the IFRAME, you have to be sure to use parent.close_QM_facebox(). Hope this helps.
BTW, see lines 47 and 49 of facebox.js ver 1.2 - this solution was right there in the commented-out "Usage" section of the .js file itself. I copied & pasted line 49 into my function, didn't change a thing except un-commenting it :)

The embedded iframe is pointing to a URL on a different domain correct? In this case no, you cannot for security reasons make any calls to the parent document from within the iframe.

I think, you can use FancyBox. There is public methods allowed to close the modal dialog within an iframe, also an option to make the fancy box act like modal window:
- Within an iframe use - parent.$.fancybox.close();
No problem if you use scripting on the same domain, if you want to use cross domain just provide each page (.php/html etc) that call each other an exchange paramater/query safely using POST/GET. But to close the fancybox modal you have to run this methods with the same domain page.
Hope it works for you Stan.

How can I refresh parent window from an iframe?

I've got a parent page and an iframe inside that page. The links in the parent control the page that gets loaded in the iframe. What I want to do is refresh the parent page when the iframe gets loaded.
I've got this in the iframe:
RefreshParent(){
parent.location.reload();
}
<body onload="RefreshParent();">
But, the above code refreshes the whole parent page along with the iframe inside it which in turn reloads the parent page and goes into an infinite loop.

You can't refresh the parent page without reloading the iframe.
What you could do is use AJAX to update the parent's content, but that could be a fair amount of work (using the jQuery or Prototype frameworks would make this easier).

You won't need to use ajax techniques either. You can simply call a javascript function in parent page from the page contained in the iframe of parent page. This way you can easily perform actions on parent page. How to refresh parent page partially from page in iframe without affecting the iframe illustrates how.
Hope this helps.

You can't tell the parent window to refresh and exclude any part of its own page, including the iframe contained within it. You can do this using AJAX techniques though.

As long as your on the same domain you can use something like:
window.parent.location = window.parent.location + '?parent-updated=true'

You'll need to have your iframe become a "regular" frame in order to preserve it while refreshing another part of the page. Since the iframe is technically part of the parent (it's an inline frame, after all), refreshing the parent will reload the iframe content as well.

Depends what your layout is, but as other posts have observed you cannot refresh the parent frame without refreshing the iframe itself as it is part of the page.
If you do not wish to use ajax, and layout permits, one solution is to place the contents of the parent frame in an iframe itself. You can then tell the parent page to refresh the iframe containing the 'parent content' when your iframe loads. If your 'parent' iframe is borderless and there is no scrolling then this is all transparent to the user.
You could push this technique as far as a couple of iframes for the parent contents and it can be quicker and simpler to implement than ajax, beyond that you're as well to bite the bullet and implement an ajax solution.