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.
Related
I have to load outside server URL within iframe which has some links, when user clicks on a link it opens outside the iframe. But I want to open it within the same iframe.
How is it possible?
You should specify target name of the iframe.
<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p>www.google.com</p>
Links in documents loaded in iframes will, by default, open in the same frame.
If the document overrides that default behaviour (e.g. with target="_top") then the document will load elsewhere.
There is no way for the document containing the frame to change that behaviour (of the document loaded into the frame) if it is from an "outside server" since security restrictions prevent interaction with the DOM of documents form other origins.
You can not influence an iframe with a source on a different domain.
If it was on the same domain you could remove the target blank with javascript, but since its in a different domain you have no influence over the html.
Hope that helps and saves you countless hours trying the impossible.
You will need to set the target=_self attribute in the link like this:
Google
but if you are loading an external website you have no control over this may not be possible.
checkout the _target attribute on a hyperlink:
http://www.w3schools.com/tags/att_a_target.asp you want "_self" e.g.
link
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
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.
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.