I have an iframe which simply displays a slideshow of our different products. It's hosted on the same server, it was just easier to use an iFrame.
Each slide contains a link to the current product on the slide, i couldn't use an href on the anchors, so instead i used " onclick='window.top.location.href =...' ". (This also prevents right clicks for the links.)
So my question is can i enable middle mouse clicks (and right clicks) for the links so that we can open them in a new tab, or would i have to go back to using an href.
Note - The reason i used onclick instead of href, was because with href the link would open inside the iframe instead of changing the top page. Is there another way to circumvent this and still keep normal clickability? Thanks in advance guys :)
Why you are not using a tag with target attribute?it will open link in new window.
add target="_blank"
Related
I am working on a project in Angular 6, where I have used (click)="actionNavigateAway()" to direct page to a new Url. This works perfectly fine on the left click. But on the right click, it shows up a context menu having options like Back, Reload, etc (as shown in the 1st photo).
Instead, what I want to show is the default context menu that we usually find on right clicking a link (figure 2). I have searched the web and found ways to make a custom contextmenu, but nothing for the default. Can you please help me with that? Thanks.
Take a look at this
If the a element has an href attribute, then it represents a hyperlink
(a hypertext anchor) labeled by its contents.
If the a element has no href attribute, then the element represents a
placeholder for where a link might otherwise have been placed, if it
had been relevant, consisting of just the element’s contents.
So it's not considered as a hyperlink.
Just add an empty href attribute. Like this,
<a (click)="actionNavigateAway()">Not Working</a>
<br/>
Working
If you need to use JS to route your link, but want the href context menu -you can use both. You can add a blank href or any href, and then pass the event to prevent default on a function. like so
This link has both
Now the page won't try to route you to "/somepath" when you click that href link. You can either add more code to the function, or use a JS SPA router to handle the routing. You now have javascript handling your links, and a normal context menu. Since the context menu has an actual route -it will actually open if and only if you select to open in new tab. not an actual click
The default context menu is normally working on link, it's normal that nobody tried to reproduce it ^^
In your case, the only possible problem is that you're not aiming correctly the link
But you can also create a custom contextmenu like this : Angular 2: Implement a custom context menu
The context menu should work when right clicking a link with a href attribute.
<a>This is a A tag without attributes</a><br>
This A tag has a href attribute<br>
<a onclick="hi()">This A tag has a onclick attribute</a><br>
So that means that you should use the href attribute instead of a click handler.
Try and run the snippet and right click on the different 'links' to see what I mean.
When a link is clicked and the browser redirects to another page the highlighting is maintained when revisiting the original page. This allows the user to know which links she has clicked even after they have left the page. Is it possible to apply this same functionality to a button?
In the application I am working on we use GWT and there is a widget which contains list of items. Each item row is represented by an anchor <a> element. I would like to add functionality when clicking the row/element while holding Ctrl key would do something else as when clicked without any key pressed (sort of like selection).
This works as expected in Chrome. However Mozilla and maybe IE (I don't know I use Linux) always opens a new tab and I cannot get rid of it.
This is the html code:
<a class="list-group-item" href="javascript:;">... content ...</a>
Setting href to empty string does not seem to work.It just opens the ULR of the current page in new tab.
What can I do to prevent this annoying behaviour?
I found a solution inside GWT code.
ClickEvent.preventDefault()
seems to stop the event from being propagated to the browser.
href="javascript:;"
If it's not a link, don't use a link (<a>).
If it's a widget, use a FocusWidget (e.g. InlineLabel or InlineHTML) instead of an Anchor; if you're using event delegation, then just use a <span> instead of the <a> (and add styling to make it look like a link if you like confusing your users).
I have a web-page and withing that page I am using an iFrame. this iFrame contains two buttons previous & next. On next button click I change the source of iFrame to lets say page2.html and on previous button click i change the source back to page1.html. Issue is when i click the browser back and forward buttons it causes the iFrame to navigate (depicting the functionality of those above buttons). How can I avoid this, that is on browser back button click previous page should be loaded (of browser's rather iframe's).
Thanks
I got the solution to the problem. I have to replace the url of the frame by window.location.replace(newurl).
in this case it doesn't add into browser history.
I want there to be anchor links on a webpage where when I click on the link, it brings me to a certain part of the webpage.
However, when the user click the back page button, it is now bringing the user to the previous part of the page, instead of the previous page.
How should I implement the link so that it does bring the user to the previous page instead of the previous part of a page?
link
I wonder if you could do something like what is described in the top answer of this post. Put the following into the 'onclick' of your anchor, and it'll scroll to your div of choice, without changing the URL (and hence preserving back-button functionality).
document.getElementById('youridhere').scrollIntoView();
Don't forget to take out the "href=#somepart".
That is how the anchor tags work. Your best bet is to read here and use it to remove your anchor jumps from browser history.
https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history