I want to add query parameters to URL.
http://example.com/#/xyz?queryParams1=data&queryParams2=data
But don't want to navigate from one page to another. I go through angular docs but not able to get how to use it without using #angular/router . The idea behind it is just to track things via URL and not to navigate.
Any help would be appreciated.
You could use the Location from #angular/common
This will allow you do update the URL without navigating, for example:
let queryString = 'queryParams1=data&queryParams2=data';
this.location.replaceState('/xyz', queryString);
Related
Question: Is it possible to modify the current URL that's shown in browser's address bar and browser history?
To be specific, I only want to modify the URL that is visible to the user; I don't want to trigger navigation. (I have a Gatsby app, and Gatsby is using Reach Router.)
Motivation: I have a gallery of images that the user can click and navigate to URL such as /images/?id=52. The advantage of this approach is that /images/ can be prefetched to enable instant rendering of the page. However, this scheme is unfriendly to users who have disabled JS, as they will see no images at all when they navigate with query parameters. So I have also prerendered pages like /images/52/ that work without JS. So what I want to do is navigate the JS users with query parameters, but then modify the URL that they see to a URL that can be shared with anyone including non JS users.
What I think you're looking for is either window.location.replace() or window.location.assign()
Replace is merely visual, so if the user were to copy the URL to share with their friends you can manipulate that url that they see and copy.
Assign loads a new document, as if the URL you passed it is the one that got the document.
https://developer.mozilla.org/en-US/docs/Web/API/Location/replace
https://developer.mozilla.org/en-US/docs/Web/API/Location/assign
Edit: a comparison
Difference between window.location.assign() and window.location.replace()
I believe you'll need to create a NodeJs server to handle this sort of action. It can take a query parameter from the URL ('images/?id=52') and then return the user to the URL 'images/52'.
Or you may be able to use the 'gatsby-source-filesystem' package.
unfortunately, I have no idea how you call this and had no success finding an answer to my question. Basically, I have built a JS application where the user enters a name and the application will then fetch and process data from an API based on that name.
What I want to do now is that if someone goes to http://www.mywebsite.com/NAME, the data will be fetched/processed for NAME. I know how it works with PHP (xxx.php?name=NAME) but if possible I don't want to use PHP here.
Thank you!
The easiest way to do this is by using URL Rewrite. This does not require any coding in JS or server-side language. This can be done on most server softwares but the method is different depending on what server (IIS, Apache, nginx, etc.) you're using.
Here's an article about URL Rewriting to help you get started.
For JavaScript you could use the location object.
var url = window.location.href;
var param = url.replace('http://www.mywebsite.com/', '');
Look at Backbone routers for a more organised way of handling params in JavaScript.
http://backbonejs.org/#Router
I have angularjs application. I have edit form where url in routing is app/edit/:id. When I go to app/edit/5 then I can edit object where id = 5. But when I change manually url link to app/edit/6 then app loads object where id = 6. And it's my problem because my user can't edit this object. How to detect this situation? How to block it? Any options? Solution can be from other js framework.
The technique you are looking for is tamper-proofing your query string.
The idea is that you generate your query string on a server, calculate its hash value, add that hash to the query string and then check the hash on the server when user clicks on or somehow uses that link. However, it may still be prone to attacks.
Anyway, tamper-proofing query strings is not a common practice across the web, and should not be used as a replacement for authorization and authentication, so you should ask yourself, do you really need that?
I have a site that request that they could send out different urls to clients to track what links are being used. I told them to use google analytics but they are requesting to stay away from it.
What they are asking is they want to send a url to there customers such as,
http://www.yoursite.com/?link=Nameoflink
They want to get that cookie and set it.
Then when the contact form is used they want to be able to submit that link name with the form submission to show what links are being used to go directly to there site.
I was told this is possible but i have no knowledge of that custom of javascript or cookie expertise... =/
You can get the value of the params passed in through the url with location.search. To get the value of the param, use the location.search and then find the specific url value, then set that in another hidden text field or something...
if (location.search){
var search = location.search.substr(1).split("&"),
url = search.split("=")[1];
document.getElementById('hiddenInput').value = url;
}
Note- the code above assumes that your search string only contains the URL value & that the URL is first. If not, it is likely this will fail. You can update the code to account for that by checking to make sure that search.split("=")[0]==="url" or expanding it to parse out all of the search params into an object that you can reference by key.
Yeah, google analytics would make this a lot easier, especially if you had a specific page that would serve as a drop-point, telling you how many people click this special link.
Without google analytics, you could get the GET variable values via a PHP or ASP page script and have them set that way, or you can use soley JavaScript to take care of cookie setting and retrieval.
For JavaScript, these links should point you in the right direction:
JavaScript cookies:
(I can only post one link, but check out W3C School's article on JavaScript cookie handling)
Extract GET values via JavaScript:
http://www.go4expert.com/forums/showthread.php?t=2163
How can I capture user interaction on a website? How many links a user has clicked. From where user has come. I want to create my own logic. I don't want to use any statistics tool. How can I accomplish this?
Thanks in advance
Place where user come from you can get by referer (document.referrer).
And if you have some kind of session or mark user(by cookies), than you can check what links are clicked by capturing onclick event. But do not put onclick on every link, just use event capturing technique. In jQuery this will be:
$('a')
.livequery('click', function(event) {
alert('clicked');
return false;
});
If you want to capture what link was clicked when goes away - you should place onunload event which will send data about clicked link to your server.
There are 2 ways that I know of:
make a service, and call it using a GET method on each event you want to track.
this is something like this:
service.php?event=pageview&time=127862936&userId=70®istered=true
this way your service can work with the data.
second way that I know of, which I myself use, is calling to some dummy Image on my server, chaining GET query to it, and then analyze the request to the image at the server side. each request is anylized and logged, then I build reports.
again, you need to know what events you want to grab, they are pre-defined, and need to catch and send them as they happen. you client can put a 1-script js file, but this script need to add events listeners. lets say you want to know when the use has quit the page. add an event listener to the onbeforeunload event, like this:
window.onbeforeunload = function(){
sendStats({event:'onbeforeunload'});
}
then sendStats function breaks down the JSON and builds a query to be sent to server like this:
function sendStats(statsJSON){
var url = [];
for (var key in statsJSON) {
// make sure that the key is an actual property of an object, and doesn't come from the prototype
if( statsJSON.hasOwnProperty(key) ){
var sign = (!url[0]) ? '?' : '&';
url.push(sign);
url.push(key + '=');
url.push( encodeURI(statsJSON[key]) );
}
}
var time = new Date().getTime();
url.push('&time=');
url.push(time);
var stat = new Image();
stat.src = clientHost + 'stats.gif' + url.join('');
}
Start with web server log files, dig into it's format, try some simple stats. Then you may want to read through the code of statistic tools like awstats to enhance your vision on that.
I am a asp .net developer. But i think this technique will work all the time. If you want to find out from where user has come to your site, you can user some sort of tracking querystring variable www.mysite.com?IMFrom=something. So you when you post your link on some third party website for e.g. say Google. Post link as www.mysite.com?google=traficfromgoogle. You might have trafic comming from different otherwebsite. Have different querystring variable for each. You can also use some kind of unique id for all website which is sending trafic to you. Now create the tracking function which will track this querystring variable. Use this function where it will get called during each request.
And you can now put some customized logic for each request having such querystring.
I don't think you'll need to capture this, as it is most likely already captured in web server logs by the web server itself. You just need to find the software that can analyze the logs and give you some nice metrics. There's lots of packages out there for that.
I know its not creating your own logic but if you decide you don't want to parse your server logs you could try a new service that is trying to one up google analytics: http://mixpanel.com/. It's real time analysis and they have a free limited account so you can try it before you upgrade.
I haven't tried their api to get stuff out yet but I imagine that you could let them collect the data from your site and do some fun stuff with it after you get it back out.
Use Google analytics and hook up site elements using their API.
record and replay the web https://www.rrweb.io/
This can be useful for:
- recording user interaction/events in the browser
- sending recordings to your backend only when an error