Develop Reference

Adding parameters to url on page load only if no paremeters already exist

I searched for the answer to my question and even tried some solutions, but wasn't able to get anything to really work. I'm newish to javascript, so that might also be why.
I have a specific URL and whenever someone goes to that URL, I want to add parameters to it, but only if no parameters are already present. Parameters get added to the URL for other on click events, but on page load, I need a set of parameters added to the URL.
I tried to use the history API and I think I'm kind of close, but I'm not able to get it to do what I want it to do.
function addDefaultParam(url) {
var currentURL = window.location.href; //get the current url
var baseURL = '/our-partners'; //this is the url that should have params added
var paramString = '?asc=true&sortBy=display_name'; //here are the params
if (currentURL === baseURL) {
window.history.pushState("object or string", "Title", "/" + paramString);
}
return url;
}
I'm using basic js in this because that's what was used in the other functions (I inherited this code). Any help would be greatly appreciated.

You can register the addDefaultParam function to fire when the document first loads in the browser and use the Location interface to check the state of the current path and query string of the URL and if they match your conditions, update the current query string value.
See below for an example:
window.addEventListener("load", addDefaultParam);
function addDefaultParam() {
let currentPath = document.location.pathname;
let currentQueryString = document.location.search;
let targetPath = "/our-partners";
if (currentPath === targetPath && !currentQueryString) {
document.location.search = "?asc=true&sortBy=display_name";
}
}

Is there a way to get Index HTML file name on default server location (Javascript or jQuery)

I'm trying to find a way to get the name of the current HTML file from URL (or any other possible way. It works most of the time, except for the case when the URL doesn't display the file name :
Works when : http://localhost:8080/Index.html
Doesn't work when : http://localhost:8080/ (hosting server will display index page that way on load).
The following function is the one I currently used. It is inspired from few other questions on StackOverflow talking about getting the filename from the complete URL.
function GetOtherLanguageLink(lang){
var pagename = window.location.pathname.substring(location.pathname.lastIndexOf("/") + 1);
pagename_split = pagename.split('.');
if (lang == "fr"){
return pagename_split[0] + "_en." + pagename_split[1];
}
else if (lang == "en"){
return pagename.replace("_en","");
}
else{
return pagename;
}
}
It is pretty simple, for Index.html it returns Index_en.html and vice versa.
When the URL doesn't have a filename, I get _en.undefined.
Is there some other way I could do that to get it work?
PS : if things are unclear, comment (I usually speak french so may not be clear).
Thanks in advance!

Proper way to check if a URL is the result of a createObjectURL call?

I have a situation where an image is being set by the user either to a URL or with bytes that is converted into a blob object URL. My understanding is that in order to prevent resource leaks, I should be freeing the blob object URLs when they are changed, but I'm not sure if I'm checking the type of the old URL correctly. Currently, the way I'm doing it is to just check if the url starts with 'blob:'. Here is a toy example function that demonstrates that it indeed seems to work:
var url;
for (i = 0; i < 5; i++) {
var oldurl = url;
console.log('i = ' + i)
if (i == 0 || i == 2 || i == 3) {
console.log('Switching to Object URL')
url = URL.createObjectURL(new Blob(new Uint8Array(0),
{type: 'image/png'}));
} else {
console.log('Switching to URL')
url = 'https://example.com/example-image.png';
}
if (oldurl && oldurl.startsWith('blob:')) {
console.log('Freeing old object url')
URL.revokeObjectURL(oldurl);
}
}
Is this the right way to do this? Is there a better way to do it?
I'll note that I've tried calling URL.revokeObjectURL on strings that are not object URLs and it seems to work fine, so it's also not clear to me how much it matters that I correctly determine whether the URL needs to be freed.
Note: This is a TypeScript script, but I think the question is equally valid in Javascript, so I've tagged with both.

You are right, i think that currently there is no other way at all.

JS: get hostname from url , regex not working

I am trying to get hostname from set of urls that my webapp can encounter with.
The desired output should be something like http://localhost/Webapp/, ending at /Webapp/ and everything after that should be removed.
Kindly note that I dont want to use word Webapp in regex as this name is dynamic and used for demo/testcase only.this can be anything , not harcoded.
In real example I am using location.href.replace(/index.+/g, "").replace(/#.+/g, "")
and I want to keep only hostname ending atWebapp/.
Problem:
my solution seems to working fine except "http://localhost/Webapp/#" is not working correctly ? why is that ? see fiddle below
JSFIDDLE: http://jsfiddle.net/bababalcksheep/um0uqb8v/
JS:
var getHost = function (url) {
return url.replace(/index.+/g, "").replace(/#.+/g, "")
};
var urls = [
"http://localhost/Webapp/",
"http://localhost/Webapp/#",
"http://localhost:8080/Webapp/#sdf#dfgdf#fdg",
"12.168.1.1:8080/Webapp/index.html#",
"https://localhost/Webapp/index.html#ab#bg",
"https://localhost/Webapp/index.html"
];
//Print all urls
$.each(urls, function () {
$("<p/>").text(getHost(this)).appendTo($(".test"));
});

Use url.match(/https?:\/\/([^\/]+)/);
EDIT:
It returns an array where the 1st element is the host with protocol and the 2nd without.

You can try removing anything after the last slash (files and hash-es):
var getHost = function (url) {
return url.replace(/\/[^/]*?$/, '/');
};
And here's the updated fiddle.

There's a bit of a trick you can use to get the browser to extract the hostname for you.
var getHost = function (url) {
var a = document.createElement('a');
a.href = url;
return a.hostname;
};
It also appears you want the path as well. You can access it with the pathname property of the a element. If you're doing that, you ought to rename the function to something like getHostAndPath().

How to obtain all the URLs generated dynamically in javascript menu?

I need to download all the images from the gallery of this site but I don't know how to obtain the URL of them or where these URL are stored on.
I tried to download the entire site with some programs but none of them seems to download even the menu.
Hope someone have any idea how to achieve this without having to do it manually one by one.
Here I can saw the code that produce the URLs:
<script type="text/javascript">
$(function(){
$(".text-frame").not(".default-frame").hide();
$('#menubar .button').hover(function(){
$(this).toggleClass("button-hover");
});
$('#menubar .button').click(function(){
$(".text-frame").hide();
$("#image-viewer").hide();
$(".button").removeClass("button-active");
var showTextframe = $(this).attr("rel");
$("#" + showTextframe).show();
$(this).addClass("button-active");
});
function showImages (imgLinks){
for (var i = 0; i < imgLinks.length; i++){
//$("#image-box").append($('<img>').attr('src', imgLinks[i]));
var $imgSelector = $('<a>'+ (i + 1) +'</a>')
.data('imglink',imgLinks[i])
.click(function(){
$("#image-box").find("img").attr('src', $(this).data('imglink'));
$("#image-links").find('a').removeClass('active');
$(this).addClass('active');
//alert ("I open Image" + $(this).data('imglink'));
});
$("#image-links").append($imgSelector);
$("#image-links").find('a:first').trigger('click');
}
}
$.get("plants_w_links.md", function(semillaMenu){
var markdownConverter = new Showdown.converter();
$semillaMenu = $(markdownConverter.makeHtml(semillaMenu));
$semillaMenu.find("img").each(function(){
var $menuimage = $(this);
var $menulink = $(this).parent("li").find("a");
var menuimages = $menulink.data("menuimages") || [];
menuimages.push($menuimage.attr("src"));
$menulink.data("menuimages",menuimages);
$menuimage.remove();
});
$semillaMenu.find("a").click(function(){
var menuImages = $(this).data("menuimages");
//$("#image-box").empty();
$("#image-links").empty();
if (menuImages){
$("#image-viewer").show();
showImages(menuImages);
}
});
$semillaMenu.addClass("sf-menu sf-vertical");
$('#semilla-menu').html($semillaMenu);
jQuery('ul.sf-menu').superfish({delay:10});
});
});
</script>
The function showImages seems to generate the URL but I don't know what to do with that.
I found here many question asking something similar but all of them talking about donwloading images with progressive URL (like blabla.com/image1.jpg, blabla.com/image2.jpg, etc.) but it is not the case, the images are generated without a pattern (or not any that I can obtain or deduce).
EDIT: I need to know how those functions work in order to run something similar in the Chrome inspect console that gives me all the URL instead the URL of the clicked option of the menu.
EDIT2: Someone in a IRC channel told me that the script may be jQuery, so I'm adding the tag.

var urls = new Array();
Array.prototype.forEach.call( document.images, function( img ){ urls.push( img.src ) } );
console.log( urls );
After execution these lines of code urls will contain sources of all images on the page.

Finally someone on the jQuery chat tell me how to solve my problem. Accesing directly to this link was the answer. The link seems to contain the structure of the menues that semillaMenu function format (aparently) and process to show the images on the site.
This doesn't solve my question yet, because it's only working for this case. What I wanted was a way to obtain the URLs with a script but it's solve my problem.
So I let it be unaswered if someone know how to make a script that gives all the image links without having to process manually the plants_w_links.md file.