This seems like a very basic HTML question, but I cannot find an answer here or elsewhere that actually works.
What I want to do is jump to an id link on the same document without reloading the document.
Here's my setup. The document is http://www.example.com/mydocument.htm/.
<head>
.
<base href="http://www.example.com">
.
.
</head>
<body>
<!-- Jump from ... -->
<div>
Jump to here.
</div>
<!-- Jump to ... -->
<div id="myid">
<Do stuff>
<Do more stuff>
</div>
</body>
This syntax, according to everything I have read on this site and elsewhere, is supposed to result in a jump within the current document without a page reload.
Doesn't work. My browsers (Firefox, Chrome) automatically stick the base href in front of the bookmark, viz: http://www.example.com/#myid, which opens my home page.
Not what I want.
If I change the href from "#myid" to /mydocument.htm#myid, then the jump completes, but the page reloads. Ditto if I use the absolute address: http://www.example.com/mydocument.htm/#myid.
I'm stuck. Any guidance?
The <base> element instructs the browser to append the URL in the href to all relative URLs on the page. So having:
<base href="http://www.example.com" />
Means that for :
here.
The href is handled as :
http://www.example.com/#myid
Instead of
<current_page>/#myid
You almost certainly don't need that <base> element in the head section, especially based on your further point that using the full URL (which also has http://www.example.com in it) works, meaning your page is already at http://www.example.com and thus doesn't need to make it explicit with <base>.
Alternatively (and I don't actually recommend this, because your use of base seems incorrect), you could change the href of your link to be the current page plus the id hash, like:
here.
As the browser will render the URL (when applying the base href) to :
http://www.example.com/mydocument.htm/#myid
and thus not try to leave the current page as it will treat it the same as if the base weren't set. (Note that this would only work when you have the base href set to the URL of the actual page's base, and as I mentioned earlier, that would make the base element unnecessary).
https://jsfiddle.net/ouLmvd3g/
If you are considering a javascript solution, since the <base> is apparently never necessary, I would recommend an event listener that removes the base element from the DOM rather than your suggested :
a fix using an event listener to remove the base URL for local links
A simple solution would be:
window.onload=function(){
var baseElement = document.getElementsByTagName("base")[0];
baseElement.parentNode.removeChild(baseElement);
}
https://jsfiddle.net/vLa0zgmc/
You could even add a bit of logic to check if the base element's href matches the current page's actual URL base, and only remove when it does. Something like:
var baseElements = document.getElementsByTagName("base");
if (baseElements.length > 0) {
var baseElement = baseElements[0];
var current_url = window.location.toString();
var base_url = baseElement.getAttribute("href");
// If the base url and current url overlap, remove base:
if (current_url.indexOf(base_url) === 0) {
baseElement.parentNode.removeChild(baseElement);
}
}
Example here : https://jsfiddle.net/gLeper25/2/
Thanks to all who responded.
In the end it turns out I was asking the wrong questions. What I needed was a means of jumping to an anchor on the same document without the document reloading. Unfortunately I got fixated on the problem with <base> interfering with the normal <a href....> process.
The actual answer was to use onClick instead, and the code was provided by #Davide Bubz in "Make anchor links refer to the current page when using <base>", and it's simple and elegant, using document.location.hash instead of <a href...>:
Anchor
where "test" is the ID identifying the item to be jumped to.
Several responders pointed to this thread as answering my issues, but I was not smart enough to understand its import until I had read it for the third time. Had I been smarter, I would have saved 6-1/2 hours of wasting my time on trying to fix the <base> problem.
Anyway, problem solved. Thanks to all and especially to Mr. Bubz.
Related
I have an href link set to output to target=‘right’. ‘right’ is an I frame in the parent window.
<a href=‘http://www.example.com/abc.pup?ev=$ev’ target=‘right’>Click</a>
The desired target, ‘right’ is in the parent document. The link is not finding the target. It worked well until I I did some editing.
The target attribute specifies where to open the linked document:
You can see details from this link:
https://www.w3schools.com/tags/att_a_target.asp
The right syntax would be:
Click
SOLVED. When the required link href is written in full as http://www.example.com/rqdpage.php the output will be a new window regardless of the target stated, probably for security reasons. The required target is implemented when the required page is in the same directory as the calling page and is stated as a relative path. Thus
<a href=‘rqdpage.php?ev=$ev’ target=right></a>
worked perfectly. Output in frame “right”. Thanks all.
I know that linking in general looks like
examplesite.com
I was wondering how would someone link within the page it self. Sort of like when someone clicks on biography section in Wikipedia and it scrolls down to the part that has the biography but staying on the same page.
Any example could would be great.
I believe that you're referring to URL fragments (a.k.a. named anchors or bookmark links).
You'd create such a link like:
Jump to example
Which would take you to the part of the page where the element with the ID of example exists. Like:
<h1 id="example">example</h1>
In older versions of HTML, the name attribute was first used for this, however the ID has replaced that.
What you posted is actually a link inside a website. It does not contain a protocol such as http:// nor starts with // which would indicate a protocol-relative link, so it would load exampleside.com relative to whatever path you are currently on.
These are the kind of links you can use (each inside href="..."). We assume that you are currently on http://example.net/foo/index.html
https://example.com - goes to the "external" site https://example.com
//example.com - goes to the "external" site xxx://example.com with xxx being the protocol used to load example.net, so in my example http://example.com
www.example.com - goes to http://example.net/foo/www.example.com as it is not an external link
#foo - goes to the element with id="foo" on the current site (does not load anything from the server)
So what you want is probably the last example: ... and then id="foo" on the element you want to jump to.
Add some id to the element you want to link to, e.g
<div id="target">Hello</div>
Then you can link it by using #:
Go to target
Go to target
<hr style="height: 300vh" />
<div id="target">Hello</div>
<a href="#"
onclick="
window.open(
'https://www.facebook.com/sharer/sharer.php?u='+encodeURIComponent(location.href),
'facebook-share-dialog',
'width=626,height=436');
return false;">
Share on Facebook
</a>
Apologies if this is a beginner question. But why is "href" there? What purpose does it serve? I am not getting its purpose.
I am assuming "onclick" a new window will be opened which has all the information in it about the link to be shared and the FB target destination.
Then why is "href" there????
HTML anchors (<a> tags) define clickable links, but only if the href attribute is present. (It is possible to not have the href element, but either a name or id instead; in this case it is not a clickable link, but rather a destination for a link). See the HTML specification for more detail.
The # element on a href attribute indicates a predefined anchor, for instance, http://domain.com/page#section. In this case, when the link is clicked the browser will open the page at http://domain.com/page, and in its HTML the browser expects a section called #section, defined by a <a name="section"> on its code. Upon finding this section, the browser will position the screen at this position.
When the section isn't specified, just the # is provided, it means it's a link pointing to the local page (or more specifically, the top of it). If the page isn't at the top, it jumps to the top. If it is at the top, nothing happens.
You can test it by creatin an HTML file with a text link, it will be clickable, but there will be no effect (the only effect is, if it isn't at the top, it will jump to the top).
The return false; at the end of the JavaScript code is there to prevent the "jump to the top", if you remove it, the browser will position its view at the top of the page upon clicking.
Some will argue that href should always point to actual links and using # placeholders is bad practice.
It specifies where the URL goes to. In this case it's set to # meaning it won't open up a URL but instead will do nothing. It's telling the 'a tag' that this function will DO something.
See it as a default measure.
Hope that helps :)
Tags <a> are not considered as clickable links if they does not contains a href.
I used DOM in order to extract all HREF-s from given html source. But, there's a problem: If i have link like this one:
<LINK rel="alternate" TYPE="application/rss+xml" TITLE="ES: Glavni RSS feed" HREF="/rss.xml">
then "href" element will be presented as /rss.xml, although that "/rss.xml" is just anchor text. Clicking on that link from Chrome's page source view, real link is opened.
I would like to take that href-s LINK, not anchor text. Please, how can i do it with dom?
Get a hold of the link element and get its href property. Suppose you were using an id,
<link id="myLink" rel="alternate" href="/rss.xml" />
var link = document.getElementById("myLink");
link.href; // http://www.example.com/rss.xml
"href" element will be presented as /rss.xml
Yes, that is the value of the attribute
although that "/rss.xml" is just anchor text.
No. <link> elements don't have anchor text. In the following example 'bar' is anchor text.
bar
Clicking on that link from Chrome's page source view, real link is opened.
Browsers know how to resolve relative URIs.
I would like to take that href-s LINK, not anchor text. Please, how can i do it with dom?
You can't use DOM to resolve a URI. You use DOM to get the value of the attribute and then use something else to resolve it as a relative URI.
The article Using and interpreting relative URLs explains how they work, and there are tools that can help resolve them.
You need to know the base URI that the relative URI is relative to (normally the URI of the document containing the link, but things like the base element can throw that off)
In Perl you might:
#!/usr/bin/perl
use strict;
use warnings;
use URI;
my $str = '/rss.xml';
my $base_uri = 'http://example.com/page/with/link/to/rss.xml';
print URI->new_abs( $str, $base_uri );
Which gives:
http://example.com/rss.xml
You can try using document.location.href to get the current URL and append the result you are getting from your example. That should give you an absolute path for the link.
Can I create a link that has another link in html.
For example, I want to call an html form and the target will be the sidebar frame.
At the same time, the board frame will also go back to the previous page.
I don't think you would be able to do this in plain HTML, but you could probably use JavaScript to accomplish what you're after.
as steve mentioned you need a bit of javascript:
<iframe id="frame1"></iframe>
<a href="" onclick="update();return false;" >DoubleActionLink</a>
<script>
function update() {
window.open("http://www.stackoverflow.com");
parent.document.getElementById('frame1').src="http://www.w3c.org";
}
</script>
btw, you said
I want to call an html form
html form means you'll submit something to web server...so you aren't asking for pure html solution. Isn't ?
The w3 specification about links clearly states that this is forbidden ..
12.2.2 Nested links are illegal
Links and anchors defined by the A
element must not be nested; an A
element must not contain any other A
elements.
But you can handle the click event through javascript and do additional actions when clicked..
Use target="_top" and set the href to the URL of a <frameset> document which loads all the frames you want by default.
Better yet, don't use frames. They are more trouble than they are worth.