I have a vaadin app which renders raw html into a vaadin layout.
The html includes a anchor and a href that points to the anchor.
The problem is that my page includes a path and a query:
https://onepub.dev/Blog?id=zhhnoflygz
This above link is to a live page so you can see it in action.
The target is written as:
<h1 id="how-to-resolve-the-problem">How to resolve the problem</h1>
The anchor is written as:
How to resolve the problem
When I hover over the anchor the browser shows:
http://onepub.dev/#how-to-resolve-the-problem
Looking at html documentation and examples it's my understanding that the anchor should show as:
https://onepub.dev/Blog?id=zhhnoflygz#how-to-resolve-the-problem
As it stands, when I click on the anchor it takes me to the sites home page rather than scrolling down to the section the anchor links to.
Is this a vaadin SPA problem or have I just mis-understood how anchors work?
The anchor works find in a html editor.
Edit:
After some research I've found that vaadin intercepts clicks to anchors.
You can surpress this by adding the 'router-ignore' attribute to the a tag.
hi
This however didn't solve my problem.
I then did a comparison by setting up a test using the w3schools tryit page.
There is a clear difference.
When I open the dev tools in chrome and hover over the 'a' link on my vaadin site it shows
When I look at a similar tag in w3schools:
The key difference is that w3schools shows the complete url which appears to be taken from 'window.location.href'
The vaadin page however seems to take the url form 'window.location.origin' even though window.location.href has the correct url including the path and query params.
Related
I'm wondering if someone could advise me... I am not very familiar with AngularJS but I am currently working on a site that uses it. I have several scenarios where I have to link to an anchor link on a different page/different url and if I was to simply put it as this for example:
Click here to view this link
It causes a 404. I have found several solutions for anchor links within the same page but nothing that works with AngularJS to link to an anchor link on a different page/url.
Can anyone help? Thank you.
Angularjs parses href's for redirection. It attempts to go to a view with anchorlink
Try setting this in your routes
// use the HTML5 History API
$locationProvider.html5Mode(true);
And om your html header, set a base location of your site with <base href="/">
This should make angularjs stop interfering with anchor tags in your urls.
EDIT
#Sabarish Senthilnathan's comment works also, probably the best way too.
I have two websites page1 and page2. On every page there is a download form which I can access through the anchor id #DownloadForm.
On page1 I'd like to create a link to the download form on page2. I thought this would work:
But when clicking on this link (in Chrome) it takes me to the download form on page1. As if the anchor expression was evaluated first and then the rest of the href is ignored.
Btw: I'm using Wordpress but I guess that's not relevant here.
If anyone has a hint for me, I'd highly appreciate!
Have you tried the full page uri? I tried this and it worked for me in chrome and firefox.
This is yet another confusing issue in HTML. I've an anchor tag, which I build dynamically from server side using java. The tag is viewable when I do view source, but it doesn't show up in the browser. Even when I do inspect element, I don't see it. My question why is the tag not being rendered inspite of being part of page source. Following is the tag:
Maybe you need to add some sort of timeout in Java when creating <a> tag, just like timeout or delay in JavaScript. Based on information you provided, I cannot help you more.
I have a drop down menu which I include on all my pages using php. On this menu I am using anchors to navigate to various divs on a single page. It is very simple code, anchors with tags in the href, no JavaScript.
Test
navigates to
<h2 id="test">Test</h2>
If I am navigating to the page this works fine. If I am already on the page it goes to the tag then redirects back to the page without the tag (i.e. goes from test.php#test to test.php). What is causing this behavior and how do I fix it?
If you had provided more code then it would have been more helpful. But I am just guessing here what the problem is. You can add the following javascript to your page:
$("a[href^=#]").on("click", function(e) {
e.preventDefault();
history.pushState({}, "", this.href);
});
What this does is target all hash-links and prevent their default behavior and change the URL. But without seeing more of your code, its hard to tell if it'd work. You can also interchangeably use replaceState, which would change the URL without adding an entry to the browser history. Code borrowed from here.
I'm putting a simple href link inside my html page:
http://search.mastertour.co.il/?mode=page&page=12077&lang=rus
the link can be found at the bottom of the page near the cleopatra head image.
Now, while the page is in a subdomain, the link referes to a TLD but the page cannot redirect to the link. It shows a "half-baked" page while trying to access the link directly (not through the html link) shows the page fine.
Any idea???
Get rid of the window.open(), this is all you need:
здесь
I'm guessing it has something to do with the onclick attribute you have attached. Do you really need it? Also, i'm guessing you're using it to force that link to open in a new tab/window - you really shouldn't, as the user should have that kind of control.