Make common headers and footers for website with folders - javascript

I'm wanting to create a website with common headers and footers for each webpage and am currently using the answer supplied here.
However, I have a website with a tree diagram similar to:
- index.html
- header.html
- footer.html
- folder
- info.html
In my header and footer files, there are multiple (relative) links such as to image sources, other pages, etc, which means while they may work in index.html, if I try to load it into info.html, the links break.
Is there any way to change all links to look one folder back, etc, or would I have to use javascript to change the src property for every referenced image?

Add the <base> element to your info.html and make its href tallying the relative links of your header and footer markups.
For example, if your website is hosted in http://example.com/foo and your relative links are such as ./images/xyz.jpg, the base element of the info.html would be like this:
<base href="http://example.com/foo">
The browser will compose the relative urls from there.
Another option is to configure your relative urls to pick up resources from the root.
In above configuration, instead of this:
<img src="./images/xyz.jpg">
...you can use
<img src="/foo/images/xyz.jpg">
So, wherever it is executed from, browsers will start the relative paths from the root.
The advantage is that this will enable easy local testing too.

You can use <base> tag in your info.html file's <head> tag with a href attribute.
The <base> tag specifies the base URL and target for all relative URLs in a document.
The <base> tag must have either an href or a target attribute present, or both.
There can only be one single <base> element in a document, and it must be inside the <head> element.
You can find more in this example.

This is basically what the <base> element is for. You include it in the document and specify an href from which all relative links/urls are resolved.

Related

Javascript generated html element to load resources from a specific hostname

I create an HTML element from a string to parse something from it
html = document.createElement('html');
html.innerHTML = 'some html string loaded from a different host';
but I see that the resources loaded using an absolute path without hostname, try to be loaded from the current window location.
Is there a way to set a specific location from where to load the resources without having to replace all absolute or relative src paths?
for example if I have an image in the html string
<img src="/abspathto/img.jpg">
when I create the html element and set its innerHTML, the browser tries to load the image from the current hostname/abspathto/img.jpg
I want to be able to set from which host name the browser can load the images that have only the pathname on their src on that html element generated from javascript.
So, it is best practice to use relative file paths (if possible).
The reason why is that it will work regardless of hostname, meaning it would also work in any stage of development or deployment as long as the directory structure does not change.
Source: https://www.w3schools.com/html/html_filepaths.asp
You can control which level at which HTML starts at by using double dots (i.e "../images/path/to/img", this goes up 1 directory).
You can use a website such as: "https://www.stackoverflowexample.com/images/path/to/img.jpg"
You can use another computer's resources using UNC path or IP address if the user that is accessing them has permission to do so. Stack overflow answer on that:
https://stackoverflow.com/a/29257902/8570546
This should allow you to navigate to any resource you have access to using HTML File Paths.

Root relative url not working in anchor tags

I have a webpage at a certain url, say https://example.com/foo/bar/xyz
In this said page, I have multiple anchor tags with root relative paths, e.g. Link 1
Now when I hover over these links, my browser shows a valid preview of them, i.e., it shows https://example.com/blah/rand/abc which is expected, but on clicking them, I get routed to https://example.com/foo/blah/rand/abc
I find this behavior very strange and I have verified that the html served at the original url does not have any <base> tag in the head section. Is there any other way to control the base path for a relative url?
What's also strange is that there are a bunch of css files loaded through their root-relative paths, and they seem to be loading fine. So, I suspect something in the javascript on the page to be interfering with these. Also to add context, this is a SPA built on backbone.js - so the base html returned by url mentioned in line 1, just returns a skeleton html with a div where the actual app is initialized - which is where these buggy anchor tags eventually turn up.

iFrames: Change the root URL hit by relative URL src's

I have an iFrame on my webpage that is from the same origin as its parent page. I'm loading page into there that has a bunch of img, script, link, etc. tags in it that all have relative srcs such as src="/imgs/img.jpeg" as opposed to src="http://mywebsite.com/imgs/img.jpeg".
What I want is for all of those resources to go to another server. So instead of hitting http://mywebsite.com/imgs/img.jpeg I want them to hit http://yahoo.com/imgs/img.jpeg or other website.
Is there a way to change the "base URL" or whatever of the iFrame so that all the relative srcs will hit another website and get those resources, using javascript?
Are there some cross-origin policies this would violate? Definite answers please, no speculation...
And is there a better way than to brute-force change all the srcs in the DOM and hack it all up...
Thanks y'all!
This is part of HTML5. Just set a BASE tag in your HEAD section. In your example it would be:
<base href="http://yahoo.com/">
This will set the base for all relative URLs.

Change HTML page with Javascript but keep path unchanged

I want to use Javascript to open an HTML page which is in a sub-folder, but continue to have the path relative to my top level files. I have the code below and the HTML link works before the page is changed but not afterwards, because everything is then relative to the sub-page. If I click on the link after the page has been changed, it tries to open 'myFolder/myPage.html' which of course does not exist:
.. in HTML
My Page Link
.. in javascript
var pageInFolder = 'myFolder/mySubPage.html';
window.location.href = pageInFolder;
I could change my links to have absolute paths, but is there a way to display the page in the folder, but keep the path unchanged at my top level?
You can use the HTML <base> tag. It lets you define where paths are relative to.
Something like:
<base href="http://www.example.com">
It is recommended that you put the base tag as the first tag inside the <head> so all paths in your file appear after it. With my example, even if you're in myFolder, any relative path will refer to http://www.example.com/myPage.html, not http://www.example.com/myFolder/myPage.html
Note though, this doesn't just apply to <a href="">. It applies to images, JavaScript files, CSS files, etc. Anything where you'd use a path.
Just add / at the beginning of your relative paths
var pageInFolder = '/myFolder/mySubPage.html';

Resolving paths within HTML from another domain

I need to get an HTML from another domain, highlight some words in it and display it in an iframe, keeping the look and behaviour of original page.
So, I pass the page's URL with Ajax script to a PHP file, which retrieves HTML content with CURL, processes it, and returns it to Ajax script. Then I put processed content into an iframe. Now, everything is OK except that paths to all website's resources are relative to another domain's root (beginning with just '/'), so naturally page inside my iframe is rendered without any CSS, JS, images etc. Also, all website's navigation links are naturally dead.
What's the best way to handle this? Especially considering that obtained HTML can also contain paths relative to the document as well.
Try this:
<base href="http://www.theotherwebsite.com">

Categories

Resources