I am grabbing the utm parameters from the URL on my index page, and storing them in local storage, then I am using the script below to grab the parameters from local storage and appending them to the end of the contact page's URL.
<script>
var parameters = localStorage.getItem("url");
const nextURL = window.location.href + parameters;
window.history.replaceState(nextURL);
</script>
Problem: This script works perfectly, except each time I refresh the contact page, it appends the parameters again. How can I fix this?
Use URL and URLSearchParams to parse and modify the URL for you. That way you don't have to do any work to produce a valid string:
function buildUrl(fromURL, fromQuery) {
const url = new URL(fromURL);
const query = new URLSearchParams(fromQuery);
for (const [key, value] of query) {
url.searchParams.set(key, value);
}
return url.toString()
}
function test(fromURL, fromQuery) {
const url = buildUrl(fromURL, fromQuery);
return `fromURL: ${fromURL}
fromQuery: ${fromQuery}
result: ${url}
---------------------`;
}
console.log(test("http://example.com", ""));
console.log(test("http://example.com", "foo=1"));
console.log(test("http://example.com", "foo=1&bar=2"));
console.log(test("http://example.com", "foo=1&bar=2&baz=3"));
console.log(test("http://example.com?hello=world", ""));
console.log(test("http://example.com?hello=world", "foo=1"));
console.log(test("http://example.com?hello=world", "foo=1&bar=2"));
console.log(test("http://example.com?hello=world", "foo=1&bar=2&baz=3"));
console.log(test("http://example.com?bar=someValue", ""));
console.log(test("http://example.com?bar=someValue", "foo=1"));
console.log(test("http://example.com?bar=someValue", "foo=1&bar=2"));
console.log(test("http://example.com?bar=someValue", "foo=1&bar=2&baz=3"));
You can always do a quick if statement to check if parameters exists in the current URL and if not, add it.
if(window.location.href.indexOf("?" + parameters) == -1){
const nextURL = window.location.href + '?' + parameters;
window.history.replaceState('', '', nextURL);
}
Related
hello there i like to remove the facebook analytic forced url parameter /?fbclid= https://www.example.com/?fbclid=..., from my host url, when redirected from facebook by clicking the url, the problem is the nuxt-link-exact-active class is not applied if redirected with this parameter.
Thanks
For simple cases like https://www.example.com/?fbclid=... where fbclid is the first and only parameter, it can be done by a simple server configuration.
So for example put this in the .htaccess file:
RewriteEngine on
<if "%{QUERY_STRING} =~ /^fbclid=/">
RewriteRule . %{REQUEST_URI}? [R=301,L]
</if>
Note the ? after %{REQUEST_URI}. It deletes the query string completely.
In other cases (where fbclid was appended to other parameters) this example does nothing - more complicated code is needed for that.
In simple cases like https://www.example.com/?fbclid=... where fbclid is the only parameter, it should be a trivial Javascript like that:
<script>
// ideally this is on top of page; works on bottom as well
if(/^\?fbclid=/.test(location.search))
location.replace(location.href.replace(/\?fbclid.+/, ""));
</script>
This checks if ?fbclid=... is a URL search parameter and navigates to the same location with that part removed.
It may also be fine to remove any search parameter and not checking for fbclid.
<script>
if(location.search) location.replace(location.href.replace(/\?.+/, ""));
</script>
i could finally solved it with this:
methods: {
removeFacebookHook() {
var fbParam = 'fbclid';
// Check if param exists
if (location.search.indexOf(fbParam + '=') !== -1) {
var replace = '';
try {
var url = new URL(location);
url.searchParams.delete(fbParam);
replace = url.href;
// Check if locale exists
if (window.location.href.indexOf(this.locale) > -1) {
window.history.replaceState(null, null, "/" + this.locale);
};
} catch (ex) {
var regExp = new RegExp('[?&]' + fbParam + '=.*$');
replace = location.search.replace(regExp, '');
replace = location.pathname + replace + location.hash;
}
history.replaceState(null, '', replace);
}
}
}
with the help of this post modiyf urls
I keep the nuxt-i18n route locale working with href.indexOf !
Unfortunately the nuxt alwaysRedirect made me remove the switcher...
I solve the Facebook Query string in a very simple way using JavaScript...
inclue this script in your Layout page or MastrPage
//facebook Route Script for Query string
function faceBookQuery() {
addEventListener('fetch', event => {
let url = new URL(event.request.url)
if (url.searchParams.has('fbclid'))
url.searchParams.delete('fbclid')
event.respondWith(
fetch(url, event.request)
);
});
}
Injoy
Il there is a #section like inhttps://www.example.com/file?fbclid=...#section (pervers facebook...) then code proposed by j.j. gives https://www.example.com/file.
Better code is
if(/^\?fbclid=/.test(location.search))
location.replace(location.href.replace(location.search, ""));
N.B. Removing any search parameter and not checking for fbclid will prevents passing variables via the url...
Thanks to j.j. for showing the way.
Im trying to set a body class based on the url - I can get it to work with a plain /Tablet/ url, like the code below.
But I need to set it to a url that has params in it, and I can't get that to work. How do I do it with this url?
/Tablets/?param=grid&pld0page=1&spcs=1
Script:
$(function() {
var loc = window.location.href; // returns the full URL
if(/Tablets/.test(loc)) {
$('body').addClass('test');
}
});
If, as you have mentioned in comments, the query parameter order is important, you can use this...
var url = location.pathname + location.search
console.info(url)
$(document.body).toggleClass('test',
url === '/Tablets/?param=grid&pld0page=1&spcs=1')
This lets you omit the URL scheme, host and port parts, focusing only on the path and query parameters.
You just have to search for text you want in the url string. You are doing fine in the code above. Just change
$(function() {
var loc = window.location.href; // returns the full URL
if(loc.includes('Tablets')) { // will return true/false
$('body').addClass('test');
}
});
Read on includes or here. You can do the same for other tests too, if you are checking for other strings in url. Hope this helps.
You can use this
$(function() {
var url = window.location.href;
url = url.replace(/^.*\/\/[^\/]+/, '')
if(url == '/Tablets?param=grid&pld0page=1&spcs=1') {
$('body').addClass('test');
}
});
If your URL is "http://www.google.com/?param=grid&pld0page=1&spcs=1", then the above queryString variable would be equal to "?param=grid&pld0page=1&spcs=1".
You can check the string is not empty
Replace your code with this
var loc = window.location.href; // returns the full URL
var url = loc.split( '/' );
var chunk = url[ url.length - 2 ];
if(loc.indexOf(chunk) >= 0) {
$('body').addClass('test');
}
var loc = 'http://localhost/Tablets/?param=grid&pld0page=1&spcs=35';
var patt = new RegExp("/Tablets/");
if(patt.test(loc) && loc.split('?').length > 1)
{
console.log('true');
$('body').addClass('test');
}
else
{
console.log('false');
$('body').removeClass('test');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
How can I remove all get variables with javascript history push state?
It should work in the following cases:
http://example.com/slug1/slug2/index.php?myvar=1&myvar2=4
http://example.com/index.php?myvar=1&myvar2=4
http://example.com/slug1/slug2/?myvar=1&myvar2=4
http://example.com/slug2/?myvar=1&myvar2=4
And after it should look like this:
http://example.com/slug1/slug2/index.php
http://example.com/index.php
http://example.com/slug1/slug2/
http://example.com/slug2/
Maybe like a function like this:
function removeGetVariablesFromUrl() {
// Do stuff
}
It should not return the address with the change, it should change the actual url in the address field without reload the page.
It was really simple:
function removeGetVariablesFromUrl(my_url) {
my_url = "An url without get variables";
history.pushState({}, 'The title', my_url);
}
Here is a dynamic way of doing this in javascript:
var url = window.location.href;
if(url.indexOf("?") != -1) {
var resUrl = url.split("?");
if(typeof window.history.pushState == 'function') {
window.history.pushState({}, "Hide", resUrl[0]);
}
}
This will take you current URL and remove anything after and including a '?' symbol (which indicates $_GET variables)
I found this script at Stack Overflow:
window.params = function(){
var params = {};
var param_array = window.location.href.split('?')[1].split('&');
for(var i in param_array){
x = param_array[i].split('=');
params[x[0]] = x[1];
}
return params;
}();
This splits a URL into data, like PHP does with $_GET.
I have another function, which uses it and it refreshes the iframe. I want to get the data from the URL and add another with it if some of these data exist. Firebug shows me, that search is not defined, but why?
function RefreshIFrames(MyParameter) {
var cat = window.params.cat;
var category = window.params.category;
var search = window.params.search;
if (search.length>0 && category.length>0){
window.location.href="http://siriusradio.hu/kiskunfelegyhaza/video/index.php?search="+search+"&category="+category+"&rendez="+MyParameter;
}
if (cat.length>0){
window.location.href="http://siriusradio.hu/kiskunfelegyhaza/video/index.php?cat="+cat+"&rendez="+MyParameter;
}
if (cat.length==0 && category.length==0 && search.length==0){
window.location.href="http://siriusradio.hu/kiskunfelegyhaza/video/index.php?rendez="+MyParameter;
}
alert(window.location);
}
If you want to add rendez OR change the existing rendez, do this - I am assuming the URL is actually beginning with http://siriusradio.hu/kiskunfelegyhaza/video/index.php so no need to create it. Let me know if you need a different URL than the one you come in with
The parameter snippet did not work proper (for in should not be used on a normal array)
Here is tested code
DEMO
DEMO WITH DROPDOWN
function getParams(passedloc){
var params = {}, loc = passedloc || document.URL;
loc = loc.split('?')[1];
if (loc) {
var param_array = loc.split('&');
for(var x,i=0,n=param_array.length;i<n; i++) {
x = param_array[i].split('=');
params[x[0]] = x[1];
}
}
return params;
};
function RefreshIFrames(MyParameter,passedloc) { // if second parm is specified it will take that
var loc = passedloc || document.URL; //
window.param = getParams(loc);
loc = loc.split("?")[0]+"?"; // will work with our without the ? in the URL
for (var parm in window.param) {
if (parm != "rendez") loc += parm +"="+ window.param[parm]+"&";
}
// here we have a URL without rendez but with all other parameters if there
// the URL will have a trailing ? or & depending on existence of parameters
loc += "rendez="+MyParameter;
window.console && console.log(loc)
// the next statement will change the URL
// change window.location to window.frames[0].location to change an iFrame
window.location = loc;
}
// the second parameter is only if you want to change the URL of the page you are in
RefreshIFrames("rendez1","http://siriusradio.hu/kiskunfelegyhaza/video/index.php?cat=cat1&search=search1");
RefreshIFrames("rendez2","http://siriusradio.hu/kiskunfelegyhaza/video/index.php?search=search2");
RefreshIFrames("rendez3","http://siriusradio.hu/kiskunfelegyhaza/video/index.php?rendez=xxx&search=search2");
RefreshIFrames("rendez4","http://siriusradio.hu/kiskunfelegyhaza/video/index.php");
// here is how I expect you want to call it
RefreshIFrames("rendez5"); // will add or change rendez=... in the url of the current page
I want to know if the url is relative or no using javascript. Basically i will be passed the url, if the url is relative append the current url i.e minus the file name. Can some one help me with this
eg:-
CURRENT URL = http://example.com/big/index.html
PASSED URL 1 = newindex.html
OUTPUT = http://example.com/big/newindex.html
PASSED URL 2 = http://mysite.com/big/newindex.html
OUTPUT = http://mysite.com/big/newindex.html
So the simplest would be something like
var loc = location.href;
var dir = loc.substring(0,loc.lastIndexOf('/'));
function getHref(urlString) {
if (urlString) return (urlString.toLowerCase().indexOf('http:')==0)?urlString:dir+'/'+((urlString.indexOf('/')==0)?urlString.substring(1):urlString);
}
I am using the location object, substring, indexOflink text, lastIndexOf and the ternary operator - nested
<script type="text/javascript">
var loc = location.href;
var baseurl = loc.substring(0,loc.lastIndexOf('/'));
function getoutputurl(inputurl)
{
var returnurl = '';
if (inputurl)
{
if(inputurl.toLowerCase().indexOf('http://')==0)
{
returnurl = inputurl;
}
else
{
returnurl = baseurl+'/' ;
if(inputurl.indexOf('/')==0)
{
returnurl = returnurl + inputurl.substring(1);
}
else
{
returnurl = returnurl + inputurl;
}
}
}
return returnurl;
}
alert(getoutputurl('http://google.com'));
alert(getoutputurl('google.com'));
</script>
Try out this code it works
Use regular expresion to check if passed url have non relative component. If not create new output url based on part of current url ( cuted via regular exp also for example) and relative part.