I have a specific part of my website that runs in an iFrame. Now in the webpage that is run inside the iFrame, I specified <base target="_parent" /> for all links, and they all open inside the iFrame(so if I would link to my main website home page, it would open inside the iframe). Now I want one specific link to open outside of the iframe and inside of the normal parent webpage.
How do I force that one specific link to do that? Tried target="_blank" but still opens inside the iFrame.
If you are using JavaScript:
parent.document.location = "http://www.google.com"
And if you are using HTML:
Google
I've come across this solution a while back and I've been using it ever since. Force the link with a Javascript function:
<script type='text/javascript'>
function newWindow(){
top.location.href = 'http://yourURL';};
</script>
YourLink
Add this to the link onclick="window.location = 'url.html';"
When I make menus I make an iframe inside my index.html:
<div id="nav">
<iframe frameBorder="0" height="35px" width="950px" src="navframe.html"></iframe>
</div>
Then in the navframe.html these are my buttons:
<button type="button" onClick="window.parent.location='index.html'">
Home</button>
<button type="button" onClick="window.parent.location='contact.html'">
Contact</button>
that tend to work
Related
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
I would like to create an HTML button that acts like a link to an item on the same page. So, when you click the button, it redirects to item on the same page.
How can I do this? (I would limit the solution to HTML, CSS, and JavaScript, because currently I am not using any other language)
Current Button (Bootstrap):
<a class="btn btn-large btn-primary" href="">Democracy</a>
Try:
<button onclick="window.location.href='location'">Button Name</button
This is assuming that you are not talking about scrolling down to a regular anchor, and instead you want to scroll to actual HTML elements on the page.
I'm not sure if jQuery counts for you, but if you're using Bootstrap, I imagine it does. If so, you can bind to the "click" event for your button and put some javascript code there to handle the scrolling. Typically you might associate the link/button with the element you want to scroll to using a "data" attribute (e.g. data-scroll="my-element-id").
Without jQuery, you'll have to make a function that contains the code as described, and put in an onclick attribute that references your function, and passes "this" as a parameter to your function, so you can get the reference to the link/button element that called it.
For the code to use to actually scroll to the corresponding element, check out this article:
How to go to a specific element on page?
Quick example without jQuery:
<a class="scrollbutton" data-scroll="#somethingonpage"
onchange="scrollto(this);">something on page</a>
<div id="somethingonpage">scrolls to here when you click on the link above</a>
<script type="text/javascript">
function scrollto(element) {
// get the element on the page related to the button
var scrollToId = element.getAttribute("data-scroll");
var scrollToElement = document.getElementById(scrollToId);
// make the page scroll down to where you want
// ...
}
</script>
With jQuery:
<a class="scrollbutton" data-scroll="#somethingonpage">something on page</a>
<div id="somethingonpage">scrolls to here when you click on the link above</a>
<script type="text/javascript">
$(".scrollbutton").click(function () {
// get the element on the page related to the button
var scrollToId = $(this).data("scroll");
var scrollToElement = document.getElementById(scrollToId);
// make the page scroll down to where you want
// ...
});
</script>
Note: If you literally want a "button" rather than a "link", you can really use any element and make that clickable, e.g.:
<button class="scrollbutton" data-scroll="#somethingonpage">something on page</button>
hey try this : -
<button>Click Me</button>
then to which ever place you want to go in your site : -
u may just place the line below wherever you want,
<a name="A"></a>
hope it works for you
Bookmark your item on the same page that you want to redirect to by assigning it an id. Assume id="itemId", then use<a class="btn btn-large btn-primary" href="#itemId">Democracy</a>. When you click the button, you will be redirected to the part of the page containing that item.
Read More
<section id="sectionA">
<p>You will be directed to this section. You can use id inside div/section/p tags etc</p>
</section>
which section or div using same id in <a href="?">
Democracy
div or section eg:
<section id="democracy">
your content
</section>
try this method abosolutly work
This is the easy way to do it
<button type="button""> Click </button>
try this following code :
<button>Click Over Here</button>
then to which ever place you want to go in your site u may just place the line below wherever you want :
<a name="Link"></a>
Please I need your help with the code below. I want to add an onclick event to a whole DIV to redirect to an url but I cannot bypass the href included in a child anchor inside the DIV.:
i.e. (The goal is to redirect to google.com clicking anywhere on the image or the text):
<html>
<div onclick="location.href='http://www.google.com'">
<div>
<a href="http://en.wikipedia.org/">
<img height="200" width="200" src="http://upload.wikimedia.org/wikipedia/commons/6/63/Wikipedia-logo.png">
</a>
Test
</div>
</div>
</html>
This works fine when I use a local URL like 'file:///E:/Documents/Blog/Design/Tmp1.html' (I don't know why).
Thank you.
Update: I'm adding the idea behind this request: I need this for the Index section of my blog that Blogger builds with the same routine that it uses for individual posts. In the Index I want that every click in the main Div redirects to the Post, but inside the post a click in the image must goes to the image's href. My idea was that the "onclick" event it's added dinamically to the DIV only for the Index section.
If you're intent on doing this inline (not recommend but it's your code), you can add a return false; to the inner anchor:
<html>
<div onclick="location.href='http://www.google.com'">
<div>
<a href="http://en.wikipedia.org/" onclick="return false;">
<img height="200" width="200" src="http://upload.wikimedia.org/wikipedia/commons/6/63/Wikipedia-logo.png">
</a>
Test
</div>
</div>
</html>
Update: based on step 2 of your request (this is a terrible, terrible idea for a number of reasons but it works):
<html>
<div onclick="location.href='http://www.google.com'">
<div>
<a href="http://en.wikipedia.org/" onclick="if ( this.parentElement.parentElement.onclick ) { return false; }" id="demo">
<img height="200" width="200" src="http://upload.wikimedia.org/wikipedia/commons/6/63/Wikipedia-logo.png">
</a>
Test
</div>
</div>
</html>
Set an onclick handler using javascript. the code would look something like this:
document.getElementById("mydiv").onclick = function(){
// navigate to new page
window.location.href = 'URL';
}
You will need to add an id to your div and pass it properly in the getElementById function.
You can also try something like this:
<div onClick="window.open('http://www.google.com','_blank');">
Change _blank with _self if you want it to open in same window.
I have an iframe:
For ex.
Now when a link is clicked in this frame i want my whole page to go that page and not just that frame.
How do i do it ?
Thanks
There are two options:
1st option: If you can edit the page in the frame, set all the links in that page to
target="_top"
So it should be like this
EXAMPLE.HTML
This is an example website.
This is an example <a target="_top" href="http://www.google.com">link</a>
And then the main webpage where you have the iframe.
<iframe src="example.html"></iframe>
and that should work fine.
Another way is to set all the links automatically using Javascript. This only works if the page you are loading is in the same domain as the main page.
<script language="Javascript">
function changeLinks(targ)
{
var links=targ.contentDocument.getElementsByTagName("a");
for(var i=0;i<links.length;i++)
{
links[i].target="_top";
}
}
Set the "target" attribute of the hyperlink to "_top".
Do you have control over where the links go in the content of the iframe?
if so, you can target="_parent" in the link in the iframe.
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