Modify url in mobile share buttons - javascript

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.

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);
}
}
});

Javascript: Forcing All Links to Goto Same URL?

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");
}

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>

Create bookmarklet to open legacy Facebook Sharer.php in dialog box with parameters

I have created a bookmarklet to do basically what I have been wanting.
javascript:location.href=
"https://www.facebook.com/sharer/sharer.php?u="
+ encodeURIComponent(document.URL);
However, there are some problems - some may not be possible to do.
1) When I click on the bookmarklet, it will open up the website from Facebook, but when I actually share the content, it will close the tab...not go back to the original website
2) I have to select that I want to share the content to a Facebook Group, and then find the group in the list. What I want to do is have that done automatically!
3) I sometimes have to remove unneeded parts from the URL. Like on Youtube, it might add the "&t=xx" parameter that I mostly don't want...but this might also be problematic for other websites, too.
I don't know if #2 is possible, but I assume #1 is, and I am pretty sure #3 can be done with OpenDialog with location parameter.
Also, it would be nice, but I am more than certain that we cannot back-date a post via the sharer.php webpage...but if there is a way to do that in that dialog box, then that would be cool!
So to wrap up, how do I modify my code to use a dialog box. I have tried window.openDialog, but I might have been doing it wrong...and if possible how to do any of the remaining.
OK...this is what I was looking for, after I went to Google+ for some help. https://plus.google.com/u/0/106985204948741157372/posts/hbMDfwHiQBD...
javascript:window.open("https://www.facebook.com/sharer/sharer.php?u=" +
document.URL, "Share Content To Facebook", "location=yes");
...however, there is one big problem with it! I cannot modify the URL in the location bar!!
A slight workaround is available, but it is a little undesirable as most of the time the URL is what I want, and I have no need to modify it...
javascript:window.open("https://www.facebook.com/sharer/sharer.php?u=" +
prompt("Please check the URL below is correct:", document.URL));.
You can bookmark this code in the bookmark bar. I tested the code above but there are some problems with the window which is opened.
Code:
javascript: !(function() {
var title = document.title;
window.open(
"https://www.facebook.com/sharer/sharer.php?u=" +
escape(window.location.href) +
"&t=" +
title,
title,
"menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600"
);
})();

Categories