I need to open the link in the same parent page, instead of open it in a new page.
note : The iframe and parent page are the same domain.
I found the best solution was to use the base tag. Add the following to the head of the page in the iframe:
<base target="_parent">
This will load all links on the page in the parent window. If you want your links to load in a new window, use:
<base target="_blank">
Browser Support
Use target-attribute:
<a target="_parent" href="http://url.org">link</a>
With JavaScript:
window.parent.location.href= "http://www.google.com";
You can use any options
in case of only parent page:
if you want to open all link into parent page or parent iframe, then you use following code in head section of iframe:
<base target="_parent" />
OR
if you want to open a specific link into parent page or parent iframe, then you use following way:
<a target="_parent" href="http://specific.org">specific Link</a>
Normal Link
OR
in case of nested iframe:
If want to open all link into browser window (redirect in browser url), then you use following code in head section of iframe:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
$(window).load(function(){
$("a").click(function(){
top.window.location.href=$(this).attr("href");
return true;
})
})
</script>
OR
if you want to open a specific link into browser window (redirect in browser url), then you use following way:
<a href="http://specific.org" target="_top" >specific Link</a>
or
specific Link
specific Link
Normal Link
There's a HTML element called base which allows you to:
Specify a default URL and a default target for all links on a page:
<base target="_blank" />
By specifying _blank you make sure all links inside the iframe will be opened outside.
As noted, you could use a target attribute, but it was technically deprecated in XHTML. That leaves you with using javascript, usually something like parent.window.location.
Try target="_parent" attribute inside the anchor tag.
If you are using iframe in your webpage you might encounter a problem while changing the whole page through a HTML hyperlink (anchor tag) from the iframe. There are two solutions to mitigate this problem.
Solution 1. You can use target attribute of anchor tag as given in the following example.
<a target="_parent" href="http://www.kriblog.com">link</a>
Solution 2. You can also open a new page in parent window from iframe with JavaScript.
<a href="#" onclick="window.parent.location.href='http://www.kriblog.com';">
Remember ⇒ target="_parent" has been deprecated in XHTML, but it is still supported in HTML 5.x.
More can be read from following link
http://www.kriblog.com/html/link-of-iframe-open-in-the-parent-window.html
The most versatile and most cross-browser solution is to avoid use of the "base" tag, and instead use the target attribute of the "a" tags:
<a target="_parent" href="http://www.stackoverflow.com">Stack Overflow</a>
The <base> tag is less versatile and browsers are inconsistent in their requirements for its placement within the document, requiring more cross-browser testing. Depending on your project and situation, it can be difficult or even totally unfeasible to achieve the ideal cross-browser placement of the <base> tag.
Doing this with the target="_parent" attribute of the <a> tag is not only more browser-friendly, but also allows you to distinguish between those links you want to open in the iframe, and those you want to open in the parent.
<a target="parent"> will open links in a new tab/window ... <a target="_parent"> will open links in the parent/current window, without opening new tabs/windows. Don't_forget_that_underscore!
Yah I found
<base target="_parent" />
This useful for open all iframe links open in iframe.
And
$(window).load(function(){
$("a").click(function(){
top.window.location.href=$(this).attr("href");
return true;
})
})
This we can use for whole page or specific part of page.
Thanks all for your help.
Try target="_top"
<a href="http://example.com" target="_top">
This link will open in same but parent window of iframe.
</a>
<script type="text/javascript"> // if site open in iframe then redirect to main site
$(function(){
if(window.top.location != window.self.location)
{
top.window.location.href = window.self.location;
}
});
</script>
I have found simple solution
<iframe class="embedded-content" sandbox="allow-top-navigation"></iframe>
allow-top-navigation
Allows the iframe to change parent.location.
For more info https://javascript.info/cross-window-communication
Could anyone help me?
Is it possible to code this?
Redirect page inside iframe to another one but we must stay in iframe .
Without influence to parent site.
I tried many scripts but nothing worked.
Here is main code which i use. width and height is only for testing.
I use HTML5 sandbox to prevent iframe breaks to main site.
I need that to hide referer. Now parent site is showed as referer in iframed site, but i want to first site in iframe was used as referer to redirected one. Maybe it is crap, but i need that.
<!DOCTYPE html>
<html>
<body>
<iframe width="1025" height="350" sandbox="allow-same-origin allow-scripts allow-popups allow-forms" src="URL"; </iframe>
</body>
</html>
If you want the script to run from the frame:
document.location.href = "http://...";
If you want the parent page to redirect (change) the frame location:
HTML:
<iframe name="myFrame" ... />
JavaScript:
window.frames["myFrame"].location = "http://..."
$(function() {
if ('app' !== $('body').attr('id')){
window.setTimeout(function(){
window.top.location.href = 'your redirect url';
}, 5000);
}
});
in IFRAME use
sandbox="allow-top-navigation allow-scripts allow-forms"
I am attempting to create some functionality which will get and set the document of an iframe. I have been unsucessful at performing this with jquery.
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" ></script></head>
<body>
<iframe sandbox="allow-same-origin allow-scripts" id='a' height="700" width="700" src="http://localhost:8181/website"></iframe>
<iframe sandbox="allow-same-origin allow-scripts" id='b' height="700" width="700" src="http://localhost:8181/website"></iframe>
</body>
</html>
When the page loads I need to navigate around in iframe a. At which point I will use javascript or jquery to take the doucment of A and replace B's document with it. Is this even possible? I don't necessarily need to use iframes if there are other options.
Scenario:
1. Page loads, iframe a & b are rendered
2. User navigates inside iframe A to different pages
**below this is functionality I cannot figure out
3. User clicks button to take DOM from iframe a and replace the DOM for Iframe b
This will essentially set the content of iframe b to be where the user had navigated in iframe a
There is a question about jquery and iframe.
The .contents() method can be used to get the content document of an iframe, if the iframe is on the same domain as the main page.
This should work:
var theHtmlStringToSet = $('#frameA').contents().find('body').html();
$('#frameB').contents().find('body').html(theHtmlStringToSet);
I have a page where I want to display content from a website inside my app. I have a parser which in this case grab the element from their site and into mine. But I have this problems, the links serverside are like campaign.aspx?wfege, when a users clicks it, I want to add a http://example.com/ before so the link will result in looking like http://example.com/campaign.aspx?wfege. It this possible in javascript? If so, how? Please look at my fiddle, it's fully working and is an exact copy of my site.
Fiddle: http://jsfiddle.net/4vdck/
Cheers
This can be done in your HTML.
You need to add the base tag with the appropriate href, like this
<html>
<head>
<base href="http://example.com/" target="_blank">
....
....
</head>
<body>
ClickHere <!-- Because of the base tag this href will lead you to http://example.com/campaign.aspx?wfege -->
....
</body>
</html>
I have the following code in my page
<html>
<head>
<title>testpage</title>
<script language = 'javascript'>function fchange(){alert(document.getElementById("ifrm").value);</script>
</head>
<body>
<iframe id = 'ifrm' src = 'http://www.google.com' width = '700' height='500'></iframe><input type='button' onclick = 'fchange()' value = 'clickhere'>
</body>
</html>
From this I click the button and an alert box dispalys undefined. But I need the content or the source of the page ('http://www.google.com'). Please help me to do this.
Thanks in advance...
You can't do this, as it breaks the same-origin policy.
If both pages are on the same domain then you can with do what #Joel suggests, or the slightly more old fashioned:
window.frames['ifrm'].document.body.innerHTML;
You'll need <iframe name="ifrm" ...> for this to work.
If you want the source of the iframe, you would need to access the document object of the iframe.
function fchange()
{
alert(document.getElementById("ifrm").contentWindow.document.body.innerHTML);
}
As mentioned by others, you cannot get the source of an iframe which points to a page outside your domain.
You need to have back-end script for that. I think that's the only way. AJAX would not allow to make a request to other domains for security reasons.