Im on the page:
example.com/news
It's a list of news articles. Is it possible to set links on each news article and take into account the current url?
link to something
The above will link to:
example.com/news/article
Or will I need to get the entire route and specify that in the link?
The url could be anything eg. /products so I do not want to hardcode it in.
If you need to take into account the current path, use the page name directly in the href attribute:
If you are on example.com/news and used an href value of "article", the URL becomes example.com/news/article.
If you need to reference pages on the root directory, precede the page name with slash '/', href="/article".
Make it relative?
link to something
For some browsers/DOCTYPE, you may have to use this in conjunction with the base tag element, which will need to be added to every page that utilises relative paths:
<base href="http://www.example.com/news">
Related
I have always thought a relative URL was relative to the URL in the browser address bar. But today my beliefs were shaken.
In a webpage that has the URL https://localhost:44372/docs/morpher.ru/ws/3/russian/declension/GET I put an href which looks like this:
выбор формата ответа
When I click the link, the browser takes me to
https://localhost:44372/response-format/index.md
Whereas I would expect to be taken to
https://localhost:44372/docs/morpher.ru/ws/response-format/index.md
Are my expectations incorrect? What is the relative path really relative to?
It's likely the case that there is a <base> tag.
You can change the relative path base like so:
<base href="https://example.com/new-base" />
Then, everything is relative to this, rather than what the page URL is.
urls.py
path('add_a_product_to_store/<store_id>',views.add_a_product_to_store,name='add_a_product_to_store'),
path('show_a_store/<store_id>', views.show_a_store,name='show_a_store')
show_a_store.html
Add a product
When user enters ip:port/show_a_store/5 . . . . show_a_store.html is shown.
But the link inside anchor tag points to http://127.0.0.1:8000/show_a_store/add_a_product_to_store/5 instead of http://127.0.0.1:8000/add_a_product_to_store/5
How to make it point to actual url irrespective of current page?
add slash as shown below
path('add_a_product_to_store/<store_id>/',views.add_a_product_to_store,name='add_a_product_to_store'),
path('show_a_store/<store_id>/', views.show_a_store,name='show_a_store')
and template
Add a product
You need to use the url template tag
Add a product
Thanks for the answers.
I committed a mistake in html.
When using anchor tag,<a href="foo/"> means **ip:port/url-of-current-page/foo/...
But
<a href="/foo/">
means ip:port/foo/
If there is no forward slash (/) at the beginning of url,it is treated as a relative url and url of current page is appended to the url.
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.
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>
This question already has answers here:
How do I reload the page without the query parameters?
(14 answers)
Closed 9 years ago.
Let's say currently I'm at www.example.com/category1/?page2, I want to put an anchor tag in the html which could redirect me to www.example.com/category1. I tried to use href='/' but it will take me to www.example.com instead of www.example.com/category1. I also tried to use href=" " but it just refresh the current page. So how should I specify the href attribute of the anchor tag?
One thing you should consider when writing relative URLs is the use of a base element. Base elements allow you to define the the context for a relative URL path.
Information about using the base element: Click Here
if you use a relative url, it's always relative to the top level, not whatever level you're at. So if you want to be at www.example.com/category1, use /category1
EDIT: misunderstood your question. If you want to just clear get params from your url, look at similar questions like How do I reload the page without the query parameters? (looks like using window.pathname is the cleanest solution)
You can use href="../category1/"
As has been noted, if you know the pathname and want to hardcode it into the markup, you can just specify the relative path:
<a title="Go to Category 1" href="/category1">Category 1</a>
Otherwise, if you want a dynamic solution or don't want to hardcode the path, you can use javascript to get rid of the query parameters and make clicking the link do a redirect:
Category N
(For more information on window.location and its properties, see https://developer.mozilla.org/en-US/docs/DOM/window.location#Properties .)