How to avoid using "../" when webpage is located in subdirectory? - javascript

I am working on a static website as a web design project for college. It's a tech blog that contain mock articles. I'm storing the website in the root (these are pages like index.htm, news.html, reviews.html, etc). However, I want to avoid clutter for actual article pages. So I store these pages in a subdirectory called articles, example: "articles/article1.html".
Now I have to write two javascript files because of this. My two javascript files would do exactly the same thing except javascript file A is for all pages in the root and javascript file B is for all pages in the articles subdirectory. And that's because my javascript code accesses files in my website. That means I have to prepend "../" to all urls in js file B for my js to work. File A would not have "../" appended.
What can I do to only use 1 javascript file for my static website?

You can prepend the URLs with /. This always take you to the root, so regardless of where the file is, you start the path with the root folder.
Like
img.src = "/Images/img1.jpg";
NOTE
This will not work if your site is running in a subfolder

Related

How to store data with nodejs outside of the project folder?

I am using ExpressJs and i want to save my files outside of the project like this.
im using this code for upload and its ok
my files uploaded correctly but i can not show them in the app cause route will be like this
http://localhost:8000/../../fileArchive/1661839542935/name.jpg
nut when i set this to src of an image, the src doesnt show my image
This is because express is trying to protect your project files from getting exposed on a malicious request. By default you cant access any of the files in your project or other directories. You can define a directory that can be accessed using the express.static method.
This will define a directory as a static directory which can be accessed (see express.static). After you added this you can also drop the any path in your URL. Express will check for any files matching the name in one of your static directories.
// This would allow the user to access the files in that directory
// ../fileArchive will be considered as the fileRoot e.g. localhost:8000/test.txt would look for a test.txt file in ../fileArchive
app.use(express.static('../fileArchive'));
// if you want to keep fileArchive as part of the url you can do that like so
// however I would recommend to exclude the `..` to keep the url readable and also the exact file path on the server should not concern the user just where he can find it
app.use('/fileArchive', express.static('../fileArchive'))

Javascript - read all filenames and output to html with hyperlink

I have a limited hosting server. I want to read the filetree (all files and folders) and create a hyperlink to them on a basic html page.
For clarity, I'm using Keybase, am publicly sharing files, but want to list them on an index.html page, not use their site's "filetree"
https://keybase.pub/example_user (keybase filetree)
https://example_user.keybase.pub (the index.html file)
The html file is in the root directory and I want to display all the (pdf) files in /subdir (and their sub-directories)
This isn't a "real" webserver. I'm looking for something easy and simple like a FOR loop on load within html
Thanks.
What you are trying to do is known as "screen scraping". If you do some googling on the keywords "javascript screen scraping" you will find lots of information and examples.
Basically, You fire off an AJAX request to retrieve the content of a page, parse that content to obtain the data your looking for, and then display that data in your page.

window.open() not working when the file location is within a subfolder

I am quite new to programing so I apologize for any blatant ignorance, but, I can't find this answer.
I am using window.open() to open a .php file in a popup and passing a variable within the URL for use with $_GET.
Everything works fine when the .php page file I am opening is located in my main directory, for example:
window.open("../filetoopen.php?link="+variable, ...)
But, when I move filetoopen into a different subfolder and change the path, the webpage will not load.
example:
window.open("../subfolder/filetoopen.php/link="+variable, ...)
Just as a side note, I am working on a web app that has been developed by multiple people over several years and have only just begun familiarizing myself with its inner workings.
Any insight/suggestions would be much appreciated.
I figured out the issue:
There was another .php file located in the root directory which was needed to be referenced for the page to load.
example:
include 'utils.php';
And, when I moved the file within the subfolder, I did not change the path of the other file as well.
example:
include '../utils.php';
Thank you for all your responses.

HTML/Javascript: Enabling folder access from a subdirectory

I have a simple HTML file with some JavaScript that I would like to run locally (as opposed to deploying to a server). It is embedded inside a larger project whose file structure I would like to maintain. For example, the structure is something like this:
project level folder > src folder containing folders & files I would like to probe
> separate, non-project util folder > HTML & JS files I would like to run against src
I am aware that certain browsers do not allow this for security reasons (as pointed out here), but since I control all of the files - is there a way for the src folder/files to somehow indicate that they will allow the 'separate, non-project util folder' to access them? Maybe some kind of project-specific settings somewhere? I am aware that this can be done in server settings, but as I mentioned above I'd like to be able to run it locally without the need for a server.
The JavaScript that is attempting to access the src files uses RequireJS, in case that helps.
Here is what I ended up doing:
I wasn't able to provide full access exactly this way, but instead I setup a dummy HTML page in the project level folder that clicks itself to redirect to the HTML file located in the separate, non-project util folder. This allowed me to keep everything but that one, very small file separate but not have issues with file access.

How to get/read other website file structure

I want to know how I can read other websites file structure.
For example if the website is : www.test.com, I want to retrieve how many files they have on their server and which ones are html and which is css. I don't want to edit them or anything just count.
example:
root folder > index.html , about.html (2 html files)
root folder > scripts > main.js (1 javascript)
The folder names may vary so it should search entire structure.
I have tried google but I get results that want's to access the actual file content that I do not want.
I am using javascript.
This can't really be done.
You don't know that a file exists on some other server unless someone links to it. I have a picture of a giraffe on my site, but unless I tell you where it is you won't be able to find it (or count it).
That said, if you are using Node.js, you can use something like the crawler library to visit every public page of a site and open every link, then count the amount of files you see.

Categories

Resources