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
Related
I was working on tag and let say my domain was www.abc.com. If I use href="http://example.com" it does properly navigate to intended url. However if I use href="www.example.com" it doesn't navigate to intended url.
not properly navigate
properly navigate
properly navigate
I was reading the anchor specs in https://html.spec.whatwg.org, unfortunately could not find this specific case.
The browser must know if you want to link to another website or a different file/page of your own website. The browser always asumes that you want to link to a file on your own server if you do not specifiy the protocol.
In fact: The only reason you can leave the protocol out when typing a url into the addressbar of your browser is because the browser just asumes that you want to use the http-protocol. This is not possbile with urls inside the A tag.
If you don't specify an absolute url it will think it's a route inside your site.
Possible values using href attributes:
An absolute URL - points to another web site (like href="http://www.example.com/default.htm")
A relative URL - points to a file within a web site (like href="default.htm")
Link to an element with a specified id within the page (like href="#top")
Other protocols (like https://, ftp://, mailto:, file:, etc..)
A script (like href="javascript:alert('Hello');")
Because When you click on it.. Your Browser Will suppose he need to find this link in the same file extension.
Example: if your html file extension is e://tst.html
when click on tag at Browser it will go to e:// and search about file with name "www.google.com" and not find it..
Use not properly navigate to inform Browser you need to navigate to Another website
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
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 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.