I want to display my licence agreement when the user clicks on any link on the page and prevent the link from taking the user anywhere. I need a way to make any click on the page show the code I want. Is there an easy way to do it? Like a scripts that tells the browser "when the user clicks something show this...".
Thanks a lot for any info
Plain javascript (but without any test for existing onclick handlers):
in the head add
<script>
var disclaimer="This link is not our responsibility - click ok to continue"
window.onload=function() {
var links = document.links;
for (var i=0, n=links.length;i<n;i++) {
links[i].onclick=function() { return confirm(disclaimer);}
}
}
</script>
Jquery:
$('a').click(function() {
// show whatever you want
});
Related
I have searched a lot of information about this but have not found the solution yet.
My problem is the following, I am creating an extension to speed up the movement through several web pages, I have managed it with many of them, but I have come to some where I cannot simulate a click with Javascript and I don't know how to do it.
One of the pages is this: https://sports.betway.es/es/sports/in-play The page is in Spanish domain, therefore I do not know if they can access it from another country (without vpn), although I think that with domain ".com" it works.
The code is as follows, it's pretty simple.
var deportesActivos = document.getElementsByClassName("categoryListItemWrapper contentSelectorItemButton")
for(let i=0;i<deportesActivos.length;i++){
let nombre = deportesActivos[i].lastChild.firstChild.innerText
if(nombre == data.deporte){
deportesActivos[i].click()
}
}
deportesActivos I collect the DIV elements with that class from the page.
deportesActivos[i].lastChild.firstChild.innerText I extract the text of each element
if(nombre == data.deporte){
deportesActivos[i].click()
}
When it matches, click to enter the link.
The problem is that the click does not simulate me.
I have bought exactly the element that you click on, I have clicked manually and it works, I have tried to click on other elements of the web page and it does not work, I have tried to give a "listener on click" to the element and it does not work either.
The HTML of the page is as follows:Image with HTML Code of the website
I don't know if this helps but on website build with Ionic app neither works
The click event does not fully simulate a user click. It just fires the onClick handler on the element that you are targeting (and any parents).
If your are just redirecting to a new URL when the button is clicked, you could just do that in your loop instead.
// get the links, not the buttons
var deportesActivos = document.getElementsByClassName("categoryListItemWrapper contentSelector");
for (let i=0; i < deportesActivos.length; i++) {
// Drill down one extralevel to get the button text
let nombre = deportesActivos[i].firstChild.lastChild.firstChild.innerText;
if (nombre === data.deporte) {
// Redirect to the href in the link
window.location.href = deportesActivos[i].href;
}
}
On my site I created several href buttons, I want these different buttons to lead to the same page but with an additional js action.
As when I click on the first link, this brings me to the page so and the second leads to the same page but with a javascript action activated.
I hope I have been clear enough and that this is possible, thank you for your response.
adding a class/id to it would help I think. I'm new here so let me know if that's what you are looking for
<a class="script" href="...">Link</a>
then in your javascript, you can manipulate it
var link = document.querySelector(".script");
link.addEventListener("click", function(){
// your function here
});
You can make this happen by sending url parameters with each href button: /page.html?action=1 . See parsing url parameters in javascript
Next on page.html use the following javascript:
window.onload = function() {
let url = new URL(window.location.href);
let action = url.searchParams.get("action");
if (action == "1") {
//perform an action
action1();
} else if (action == "2") {
action2();
}
};
Basically, I have a page where there are buttons that lead to another page or there are buttons that make things happen in js, and I want that when we click the button on the first page, we arrives on the second page when js is activated.
Basically I explain my site I have a button "visual identity" which should lead to another page (easy), on this second page there is
sub-buttons like "fish" which display a menu with js commands, its sub-buttons are also on the first page and I want when you click on the sub-button on the first page it will take you to the second page with menu opening.
I don't know if that's what you understood just above?
but thanks for your reply.
I try to find Q&A related to my question. But I couldn't find. I have created a code where if user click double or multi click at single link then he will redirect to error page.
My Code is
<script>
var doubleClick = false;
function myWillPageRedirect() {
if(!doubleClick) {
doubleClick = true;
window.open("errorPage.html");
}
}
</script>
But this is not working. Why?
I want to create a secure page generally we can see in some bank or financial website.
I want to create 'if user click window back button then he will redirect to error page.' OR if if click refresh button then same action will perform and redirect to error page. ..
If this all code can make in Linux server backend code. It would be great.
Please help. I am not saying to some create code for me , I am asking for help to some correct my code above or bit extra help to make them secure.
Thank you .
HTML:
Double-click me
JS:
if(performance.navigation){ //Check if the page was refreshed
if( performance.navigation.type === performance.navigation.TYPE_RELOAD ){
myWillPageRedirect();
}
}
function myWillPageRedirect() {
window.open("errorPage.html");
}
window.onhashchange = function() { //Check if the url has changed (in case of pressing back button)
myWillPageRedirect();
}
More infos about Performance.navigation
So in a particular page I serve a lot of content. Now user can click on the bookmark button for a piece of content and it should call the bookmark function which communicates necessary information to the server. Next time when the user clicks on the link it should call the unbookmark function which does the converse of what bookmark function does and the next time the user clicks on this link, it should call the bookmark function. Flip flop flip flop....
My link for the bookmark button kinda looks like this.
<a id = cno class = 'bookmark_button'></a>
I did come up with a solution for this by counting clicks for a particular cno using a global array. This is a very inconvenient thing cause the user has the option to refresh content in which case I have to reset all the counters! So I was wondering if there was an elegant solution to this. So that I could change the click event handler on the fly.
Edit:
Bookmark function code:
function bookmark(cno){
result = server_comm('bookmark', cno);
if(success){
//change the icon of the bookmark button;
}
else{
// display error
}
}
Your server should render links depend on the bookmark state like below.
HTML
<!-- a bookmarked link looks like this -->
<a id="cno" class="bookmark_button bookmarked"></a>
<!-- a new link looks like this -->
<a id="cno" class="bookmark_button"></a>
Javascript
jQuery(function($) {
$(".bookbmark_button").click(function() {
var btn = $(this);
if(btn.is(".bookmarked")) {
btn.removeClass('bookmarked');
// call undo bookmark here
} else {
btn.addClass('bookmarked')
// call do bookmark here
}
});
});
Make an AJAX call to the server, and keep the state (on/off states of the book marks) at the server. Of course this will increase the communication with your server more but it will be more reliable.
__update__
Whenever someone clicks on a book mark button, make an AJAX call to the server. Server should get the request and decide what to do (add a new book mark or delete it) and it should respond accordingly. Depending on the answer from the server, you can decorate your button.
To do so,
function onNewBookMarkCallBack(){
$('#idOfTheItemThatYouWantToChangeTheClass').addClass("newBookMark");
}
function onBookMarkDeletedCallBack(){
$('#idOfTheItemThatYouWantToChangeTheClass').removeClass("newBookMark");
}
See the following fiddle:
http://jsfiddle.net/mdfb1ef6/12/
var firstClick = function()
{
$(this).text("Click me again!")
$(this).one("click", secondClick);
}
var secondClick = function()
{
$(this).text("Click me!");
$(this).one("click", firstClick);
}
$("a").one("click", firstClick);
Essentially, you just call the one method again on the element, passing in a new handler.
You can save the state of "checked/unchecked" on the A tag eg.:
<a id="bookmark-toggle" class="xpto bookmark-unchecked" >bookmark icon</a>
<script>
$("#bookmark-toggle").click(function(){
if ( $(this).hasClass("bookmark-unchecked") ) {
// here you execute code that ADD text on bookmark
// two lines below you can also run just inside a ajax callback function, so you can run it just if server said it could insert bookmark with success, and if not success, does not run two lines below and tell user what happens
$(this).removeClass("bookmark-unchecked")
$(this).addClass("bookmark-checked")
} else if ( $(this).hasClass("bookmark-checked") ) {
// here you execute code that REMOVE text on bookmark
$(this).removeClass("bookmark-checked")
$(this).addClass("bookmark-unchecked")
}
});
</script>
Plus: to work alternating between two class, give to you the ability to alternate button style too. you can set an icon different to both cases, or even alternating text too.. you choose..
Good Evening, This question is an extension for document.getElementById to include href I currently have a next hyperlinks and the next hyperlinks is using a javascript to overwrite the url. The first time I click the next hyperlinks, it works but when the second times I clicked it, it goes to the url which in the a tag but not the javascript. How can I make the next hyperlinks goes to the url which is in the javascript everytime I click it?
<script>
//..
function nextHyperLinks() {
document.getElementById("nextID").href = "www.google.com";
}
</script>
<HTML>
//..
next
</HTML>
If any things not clear, please let me know. Need some hints and advised, thanks.^^
Try this:
function nextHyperLinks(e) {
e.preventDefault();
document.getElementById("nextID").href = "www.google.com"; // you probably don't need this if you will anyway navigate away from the page.
window.open('http://www.google.com/', '_self');
}
var el= document.getElementsById('nextID');
el.addEventListener('click', nextHyperLinks);
and remove the inline onclick="nextHyperLinks();"
http://jsfiddle.net/45WQq/
next