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
Related
I've got some help here a few days ago, but the the answer I've got did not work for me eventually and I am still looking how to fix the issue.
I have this page test:
http://cpanel2.secured.co.il/~iherbcoi/test.html
I have many links that include:
A URL that opens in HREF in a new TAB.
An onclick event that opens a second URL inside an iframe on the source page.
I've taken the original link that worked good and wanted to change the onclick URL into a value that will be taken from a JS from the HEAD of the page.
This was my original HREF/onclick that worked fine:
<a href="http://www.cnn.com" target="_blank" onClick=document.getElementById("if").src='http://www.yahoo.com';>Original Link</a>
The issue is that the URL that opens in iframe is the same as the one that opened in a new TAB, instead of the onclick URL.
I also have an issue that cause the page source to refresh in a whole once the iframe is loading its content. How can avoid this please?
This is the code that is used at the moment:
The HEAD code:
<script type="text/javascript">
function Link() {
document.getElementById("iframe_test").href = "http://www.yahoo.com";
}
</script>
The link:
JS HEAD code based link
The iframe:
<iframe id="iframeid" name="iframe_test" frameborder="0" scrolling="no" width="400px" height="400px"></iframe>
Unless I've misunderstood, try onclick="Link()" to actually call the function in your script. At the moment you are telling the window to open the href in the iframe.
Then change your target back to _blank
You also have a few typos which will stop stuff being called
HTML:
Click
<iframe id="iframe_test" src="" frameborder="0" scrolling="no" width="400px" height="400px"></iframe>
JS:
function Link() {
document.getElementById("iframe_test").src = "http://www.yahoo.com";
}
I'd like xul window to always load pages in current window instead of new window
I have 3 files in the same directory, main.xul
<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin" type="text/css"?>
<window xmlns:html="http://www.w3.org/1999/xhtml"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<browser type="content" src="page_a.html" width="100%" height="100%" />
</window>
page_a.html
<html>
<body>
<a href="page_b.html"
target="_blank" >I'm page a, click to navigate to page_b.html</a>
</body>
</html>
page_b.html
<html>
<body>
<a href="page_a.html"
target="_blank" >I'm page b, click to navigate to page_a.html</a>
</body>
</html>
When i run the xul using xulrunner and click the link, the whole
window disappear
but i want to load the target page "page_b.html" in current window,
I tried both <browser> and <iframe> approach, neither of them
work.
the window disappears as long as it tries to open a new window to
load target webpage.
If I replace target="_blank" to target="_self", the code runs
successfully.
but the matter is what if i load a remote page that contains
target="_blank" and is not written by me, for example
http://www.google.com/ ?
So how to always load pages in current window despite the attribute
of <a> element?
Thanks.
You'll need to implement nsIBrowserDOMWindow and set it to the window.
In your openURI implementation, you'd then call .loadURIWithFlags on your <browser> (compare with the linked implementation from browser.js).
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>
<html>
<title>iframe_test</title>
<head>
</head>
<body>
<iframe src="test_page_with_links.html" width="whatever" height="whatever" /></iframe>
</body>
</html>
I'm trying to figure out a way to make an iframe people can add to their own websites that adds additional navigation links, but if I try to change the window.top.location from within the iframe to let's say /profile, the browser goes to my website that's housing the iframe /profile instead of the website the iframe is on /profile — hope this makes sense
add target="_top" to your links
give your iframe a name and the link a target that matches the name.
<iframe src="whatever.html" name="my_frame">
<a href="http://www.somewhere.com" target="my_frame">
I have a website which I host myself. I do not have a static IP address so I have all traffic for my domain forwarded with masking to my DDNS account. The resulting page looks like this...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>mydomianname.com</title>
</head>
<frameset rows="100%,*" border="0">
<frame src="http://myddns.dyndns.org/mydomainname" frameborder="0" />
<frame frameborder="0" noresize />
</frameset>
</html>
How can I update the URL of the "parent" frame as users navigate within the "child" frame?
UPDATE: Success?
I have tried doing this with javascript but had an issue getting the correct href to my javascript function with out having adverse side effects (having two windows open up, having my main window go to the wrong location, or making it so the back button didn't work right). All I needed was an attribute of my a tag to hold a value that I could use in my javascript, but would do nothing else at all. Adding the attributed value event though it is not a native attribute to the a tag works great.
The a tag...
<a onclick="url_update(this);" value="test/test.html" href="javascript:void(0);">test link</a>
and the javascript function...
function url_update(element){
base_url = 'http://mydomain.com/';
window.parent.location.href = base_url + element.getAttribute('value');
}
the resulting updated URL is...
http://mydomain.com/test/test.html
... and there are none of the previously mentioned side effects.
The only "side effect" that I would like to fix is display of the link in the info bar at the bottom of a browser window. Right now it says javascript:void(0); because that is what is written in my href attribute, but I would like it to show the updated URL when the link is hovered over... any thoughts?
It would be even better if I could scrap all of this javascript and use IIS 7 URL Rewrite 2.0 to do this instead... but I have yet to master the black art of URL rewriting.
javascript:
window.top.location = 'anther url'
--UPDATE to your updated question
use element.getAttribute('value') instead of element.value
--UPDATE #2
Use the href attribute, however, add a return false; to the onclick function:
<a onclick="url_update(this);return false;" value="test/test.html" href="test/test.html">test link</a>
Once you are doing that, you might aswell skip the value attribute and just use the href property, update your url_update function to use element.href instead of element.value
It's hard to tell from your question exactly which frames are doing what, but if The Scrum Meister's solution works for you, than you can easily implement what you want by adding this to each of your A tags.
target="_top"
Your example modified.
test link
You could also do this with jquery...
On the page where all A tags should have target="_top" you can implement the following jquery code on the page and it will dynamically add the target to all links.
<script language="javascript" type="text/javascript">
$(function()
{
$("A").attr("target","_top");
});
</script>
That is assuming that you have normail A tags with the href attribute, you can get rid of the onclick all together, no other javascript is required with the target solution.
First you need to be on the same domain... otherwise for security reasons you can not change it.
Declare and call this function in your child frame
function change(theUrl){
window.parent.reloadContent(theUrl);
}
In your parent have the following function :
function reloadContent(theUrl){
if (theUrl != ""){
document.getElementById("frameID").src= theUrl ;
}
}