This is natural with a frame but not with an iframe. A top.window refresh with an iframe will reload the iframe as well. So use frame right? Well, no. In their infinite wisdom they deprecated it.
So I lose this functionality if I follow the rules?
I have to bring in an outside site and place it in a frame/iframe and it will process everything inside the frame/iframe. The URL, mysite.com has a frame/iframe with example.com by default. Then as the users navigates the content inside the frame/iframe, going to example.com/about.html, and then decides to reload top.window, I don't want it going back to example.com but to stay on example.com/about.
With the deprecated frame this works. With the "proper" iframe, this doesn't work. What can I do?
You can communicate from the child page to the parent on differnt domains through the hash. You do have to have control of both domains in order to do this but it is definetly an option. What you would have to do is everytime the pages changes you update the hash on the iframe with the current url of the content in the iframe.
http://www.shubho.net/2010/08/cross-domain-communication-between.html
Related
If you link to something downloadable with a simple <a href, the user will download the file while staying on the current page. You can get this behavior with files that the browser has no plugin for (like .bin), or by sending a content-disposition header to force downloading.
Is there any method or header which keeps the user on the current page while still requesting the page? The idea is that the user clicks a link, the request is made, but the page doesn't change—like when downloading a file.
This could be done with an iframe I guess, which is not really pretty and makes another request when loading the page. Javascript is another obvious answer, but that's actually the reason for asking this question: compatibility with JS-less clients.
A form with the method set to HEAD is another ugly solution, but doesn't work anyway. Chromium ignores the method and simply performs a GET request...
Anymore ideas?
You could place an iframe on your page that is hidden. Then, give that iframe and id.
Use this id as the target of a link to the file you want to pull down.
I've created a demo at http://jsfiddle.net/dancrumb/N87nL/ to show you how this would work. Just style the iframe as being invisible and you're good to go
The page will load in the iframe, you'll stay on your page, it doesn't require JS. Oh boy!
Note that the iFrame doesn't have an initial value for src, so no request is made on page load.
This seems to be the opposite of a common question, which implies that maybe I'm missing something obvious.
I have a little app that displays some other page (from a different domain) inside an iframe, with my header on top. So far, so good. But when someone clicks a link on that inner page, it just navigates the iframe - I want it to navigate the entire page instead (including, and especially, updating the URL in the URL bar).
This is basically the opposite of clickjacking. I just want the navigation to work as if it weren't an iframe. Is there an easy way?
The content in the iframe can modify the link's target: use _parent or _top.
<a href='#aboutus' target='_parent'>About Us</a>
If the contents of the <iframe> are in a different domain you can't do it due to security reasons.
If you have access to the other domain and html code you could do something like this on the link:
href="javascript:parent.window.location.href='http:/google.com'
This violates the same-domain origin policy if you don't control both the site inside and outside the iframe.
Imagine you put a user's bank inside the iframe. If you could register event handlers for things inside the frame (from outside), you could record the user's bank account number, watch the things they click for advertising purposes, misdirect them when they go to take certain actions you don't like... And the frame would show up as being a secured connection to their bank!
If it's your site inside the frame, it's possible, via handing the state through the server, or with the new(ish) HTML5 Web Messaging standard, or by manipulating parent.window from inside the frame.
Is there any way for a iframe nested in a div on my page not to reload when I change pages in the nav? Because when I change pages it will load the code of the page and the iframe on the previous page will be reloaded. Is there any way that I can select it and make that it won't reload when I change pages?
If you reload the entire page, the IFRAME element is getting reloaded with it. Unless you used AJAX or a second IFRAME, there is no way to have the whole page except one element reload.
My initial reaction is: "Why the hell would you want to do that, it sounds awful?"
The only way for this to work is to change the page content dynamically, with the exception of the iframe, rather than loading a new page.
But to answer your question, yes you can do it.
If you have all the page content except the iframe inside a div, lets call it #page and the iframe is at the same level in the DOM, or higher, relative to #page, you could use something like jQuery's load() function to load new content for everything inside the #page div.
However, if SEO or Accessibility matter to you at all, you shouldn't do this.
A users browser will cache a lot fo the content in the iframe anyway, so it shouldn't be too demanding to reload it.
If the contents of the IFRAME are simple enough it might be a simple case of using some light query string parameters to indicate the state the IFRAME is in to persist it across pages.
Your options also depend on any development frameworks you might be using (.NET, Ruby, etc.).
Otherwise, additional IFRAMEs seem to be the only other solution.
Is there any way to apply the CSS of a parent page to a page within a frame without adding another http request in the page in the frame? Is this possible or would I have to add the CSS via http request in every page loaded in the frame? In the case that it wouldn't work, would it be more convenient to use style tags or link rel if each page were to have a unique CSS? I ask this because they're pages from my site which are only made to contribute to the parent page which has them in frames. The reason for frames being that there is more going on in other areas of the page and everything acts in unison; it'd be convenient not to reload everything for one section.
Set up your cache control headers right and using a <link> will fetch the CSS from the browser cache and not from the server.
No, you would have to put a link element in the iframe's source, which would
1) trigger a new http request
2) it wouldn't work on cross domain websites, because
a) XSS (en.wikipedia.org/wiki/Cross-site_scripting)
b) you would likely not have access to the source to edit it, because it's on a different server.
lists like these are fun. you should try making some of them :)
I have a site that displays other sites through an iframe on certain pages. It does this in order to display a toolbar that is relevant to the reader (like Facebook and Owly does). However, when the user chooses to leave the original site I want the bar to go away. As you might gather, I don't control the sites in the iframe, and they're on another domain than the iframing page.
I tried target="_parent" on the <iframe>, no luck. Then I tried various scripting solutions, but they all fail due to the same domain restriction. My last try was to have a timeout check for changes in the iframe URL, but iframe.contentWindow.location.href is restricted when page is on another domain (unlike the object iframe.contentWindow.location which I found a bit weird).
Any solutions to this problem? I know iframes aren't the hottest thing around, but they do the job in this case.
Try target=_top That should open the page in the full body of the window.
No solutions.
The only way to get a link to open in the top frame is to have access to the link itself. As you observed, the same origin policy prevents JS from outside the frame accessing it.