Javascript: Forcing All Links to Goto Same URL? - javascript

i have many different links on the page and instead of changing them one by one, i want to force them all to goto the same URL using Javascript (or php if possible)
Is there a way I can define where I want all URLs to go at the top of the page? so when a user clicks any link it will goto the URL specified in javascript?

Like this?
const links=document.links;
Array.from(links).map((a)=>a.setAttribute("href","https://google.com"));
SO
SO
SO
SO
SO
seams that _blank is not working on SO but trust me: it works
Edit:
Since you may wish to spare anchors on your page starting with # you can add the following if:
const links=document.links;
Array.from(links).map((a)=> (!a.getAttribute('href').match(/^\#.*/m)) ? a.setAttribute("href","https://google.com") : false);
SO
SO
SO
SO
SO
Chapter 4

//You can Use jquery`
$('a').attr('href','your url');
//Or JAVASCRIPT
n=getElementsByTagName('a').length
for(i=0;i<n;i++){
document.getElementsByTagName("a")[i].setAttribute("href", "your URL");
}

Related

How to keep query string parameters as user navigates through the website

I have a situation where I want to preserve a query string between clicks on my Wordpress website.
E.g.
www.mywebsite.com/?utm_source=mysource
When navigating from this link to another page of the website that query string should persist.
E.g.
www.mywebsite.com/anotherpage/?utm_source=mysource
So I decided one easy way to do this would be to modify the javascript so that my function is fired when a click on an anchor tag occurs.
//Ensures that the query string persists between clicks on the site
$("a").on("click", function (event) {
event.preventDefault();
window.location.href = event.currentTarget.href + window.location.search;
});
However this doesn't work for other elements on the page like buttons which are not anchor tags but still contain hrefs that modifiy the window location when they are clicked. For example in the php scripts of the theme there is code such as:
<button onClick="location.href=www.anotherwebsite.com"</button>
I could implement another function that implements the same behavior for button elements but I am concerned that whenever another element is added I will have to check for a new type. Is there a better way to ensure that whenever the window location is changed my query string persists?
FYI: I am not allowed to put the information in a cookie which is another way I thought of keeping track of the parameters.
several suggestions
client side
In using jquery, it might be easier to just find clickable elements, or have the WordPress theme add css classes, if useful ones aren't there already.
server side
In WordPress, use sessions (but see below), and a rewrite or redirect rule using add_query_arg().
Note about sessions and WordPress: You can't rely on PHP sessions; instead use the database, perhaps via an existing plugin like WP Session Manager or WordPress Native PHP Sessions.
Try this to append query paramters in all anchor tags:-
$('a').each(function() {
var href = $(this).attr('href');
var querystring =
window.location.href.slice(window.location.href.indexOf('?') + 1);
if(href && querystring){
if(querystring.indexOf('=') >= 0)
{
$(this).attr('href', href+'?'+querystring);
}
}
});

Unable to remove hash tags from domain name

I have a one page site with five anchor links in it. When I open the site, the address bar displays domain.com/#numberofpage
I could not find a solution to remove the hash tags display, maybe I am using incorrect keywords to find this.
Could you please help to solve this?
var url = window.location.href;
$('#change').on('click', function() {
var arr = url.split('?');
arr.pop();
window.location.href = arr[0];
});
But that would also go to to domain.com if you don't the page to actually go anywhere.
Therefore You will have to add hash # if you want to prevent page from reloading.
The css-tricks.com has an excellent screencast on that, have a look at: Best Practices with Dynamic Content

Adding to/editing the URL bar of a webpage without deleting what's already there.

I need to add some text to a URL bar without deleting what's already there(as I've mentioned in the title). Basically, I have eight or so hashes(/one/, /two/, /three/, etc).
I have to add these to the URL bar without deleting the previous hashes that are already in there. For example, I could have a button that adds "/two/" to the URL, but what if "/one/" is already there? I need it to make it so that it just adds the new hash after the one one, like this - "/one/two/three/".
I've tried using
Hide "one"<br/>
and
Hide "two"<br/>,
but unfortunately when I use the second one after the first, it just replaces "/one/" with "/two/".
Any suggestions would be great. Let me know if I need to provide some more context, I'm not quite sure what's relevant to this question in my code.
Thanks in advance, guys!
You just need to use a function
<a onclick="addHash('/one/');">One</a>
<a onclick="addHash('/two/');">Two</a>
function addHash( hash ) {
window.location.hash = window.location.hash + hash;
}
You will probably need to do some checking in the addHash function to see if it exists already, but thats a good place to start.
Maybe a little more description on what you are trying to achieve here?
Are you just trying appearance of the URL, or are you trying to navigate to pages with these arguments?
I'm sure PHP would solve this with the following but I'm not sure why you would use it.
One
Two
If you're using jQuery you could do:
One
Two
<script>
$(function(){
$('.addToUrl').click(function(){
var href = $(this).attr('href');
window.location.href = window.location.pathname + href;
});
});
</script>

Modify url in mobile share buttons

We have a SPA html5 web page that is used in the mobiles. As the detail page is set after the #, I would like to change the url that is sent when an user clicks in the share button to something more informative before the #. That way I change the descriptions, titles, and so on...
Example of what I want:
Url in the browser: url/#id=1
Url sent to the "share": url?id=1
Do you now any way to do it? But I don't want to make another request to the server.
Thanks in advance.
I hope that I understand what you want: you want to catch current url and modify it, right? If so, then do next:
Open this js fiddle http://jsfiddle.net/6Yf3r/.
Fiddle code is
$(document).ready(function(){
var currentUrl = window.location.href;
var newUrl = currentUrl.replace('/_','?');
alert(currentUrl);
alert(newUrl);
});
Ignore first two alerts, and then click run. See what happens with url's in those two alerts? You can now use this code, and modify it to .replace('/#','?');. This function will find the part /# in your URL and replace it with ?. Now you will have desired URL as a string and just use that new url in right place with your share button.

Change href on unload (or location.href change)

There are several links (and pieces of Javascript) throughout our site that contain /2012/responses/{pathParams...} and I now need to conditionally add to the path, if it's a webview.
if (isWebview) {
// use '/2012/responses/webview/{pathParams...}'
} else {
// use '/2012/responses/{pathParams...}'
}
I can handle the links by inspecting document.links, but I'm wondering if there's a way to handle pieces of Javascript that use window.location = '/2012/responses/...'. One method is to create a function that does the window.location change and replace the window.location statements with the function. But, is there a way to handle it as an event, so when the page is changing I could conditionally insert the /webview in the URL? Browser restrictions seem to limit the beforeunload event to only prompting the user.
I think you can't. I have 2 options for you:
Option 1:
Do a replace all to your code using ternary inline if --> i recommend that
sample:
search for:
'/2012/responses/{pathParams...}'
replace with:
'/2012/responses/'+((isWebView?)?'webview/':'')+'{pathParams...}'
Option 2:
Put the /webView conditionally on server side inside the {pathParams...} variable

Categories