Domain Name to <H1> Tags

JavaScript
1

Hello people!

I am making an HTML template to use as a placeholder, and this time I want to make it such way that it fits any domain name / website that it would be placed on, sort of a “parking page” and I want at the very top of the page to display the domain name, but without “hard coding” it, would be nice if it would also display the domain name in the title bar as well.

Let’s say my domain name is “example.com” and in the root folder I have index.html. So when that file is displayed the heading tags at the very top would output the domain name “example.com” just the way it is, no change case, no “http://” in front of it, no trailing “/” behind it, nothing more, nothing less. It would be a nice bonus if the same thing would appear in the title bar of the webpage.

I believe this can be done with JS or CSS but not entirely sure.
Thank you!

2

Hi,

Using window.location.hostname will give you what you are after.

So, you could do:

<h1></h1>

<script>
  const heading = document.querySelector('h1');
  heading.textContent = window.location.hostname;
</script>

document.title = window.location.hostname;
4 Likes
3

Hi James!

Your solutions work PERFECT at extracting the domain name and adding it to the H1 and TITLE tags, but I neglected to mention that I am self-hosting and I use No-IP DDNS service to redirect to the machine I am hosting on.

Each of my domain names get redirected to the No-IP, which in turn points to my server.
The redirection takes place using a cloaked frame, so in the browser’s address bar shows my domain name, but underneath it all is the No-IP address, which your script pulls an displays.

I wonder if the script can be altered in such way that it displays what the browser shows in the address bar.

Thank you kindly James!

4

Have you got a site online somewhere where I can see this happening?

5

Sure, I have a site up at sportex.tk.

There is your script running and you will see that the H1 tags display the No-IP DDNS address, but in the browser’s address bar is my domain name.

In the title bar you will see my domain name. That is how the registrar has the frame setup, there is no option for me to configure, when I use the cloaked redirection, as far as the title of the site goes. That doesn’t bother me much, as long as I know the domain name is there, which it is.

6

OK, it seems that the JavaScript is being executed in the context of the iframe and the iframe’s window.location property is http://roq.ddns.net/sportex.tk/ which is why you are seeing what you are seeing.

The first obvious solution would be to grab the “sportex.tk” from window.location:

<h1></h1>

<script>
  const heading = document.querySelector('h1');
  heading.textContent = window.location.pathname.toString().replace(/\//g, '');
</script>

That works in the case you posted, but what about your other domains? Does it work for them, too?

7

Another possibility would be to get the host name from the referrer, if available… then you can create an URL object to directly get the hostname similar to the location.hostname:

const heading = document.querySelector('h1')
heading.textContent = new URL(document.referrer).hostname
1 Like
8

THANK YOU James!

I have tested your new lines of code.

The second and third version of the original script work flawlessly with top level domains (sportex.tk like), but they do not work for subdomains (roq.ddns.net - the No-IP address, when accessed directly).

I even tried combinations of those lines, but it didn’t work - I didn’t think that was going to, but I tried anyway. I guess those lines need more added to them to work together.

9

Sorry guys, I am getting confused.
The third version I was referring to is from M3, thank you for joining and the suggestion, but i didn’t realize someone else has jumped in.

So I tried both suggestions:

heading.textContent = window.location.pathname.toString().replace(/\//g, '');

and

heading.textContent = new URL(document.referrer).hostname

They do not work with subdomains such as roq.ddns.net but they do work with top level domains like sportex.tk.

10

However, both of your solutions seem to work equally well for the title page, or maybe is just a default behavior.

I was wrong in my above statement. Actually only James’ second version of the line of script works for displaying the domain name in the TITLE tag.

I started getting confused with trying all those lines… and they are only a few…

11

Yeah, that would have been my second suggestion, but I thought we might get away with being lazy :slight_smile:

So I need to understand what you are trying to accomplish a bit better. Could you post a sample of addresses that you are trying to accomplish this for, especially those where the solutions proposed above doesn’t work.

Please mark the addresses up as code (i.e. not live links), as otherwise we’ll probably get told off by the mods.

1 Like
12

Hi James

Let me start by saying that as far as my original question(s) goes, I have got the answer, you have given me a working solution and M3 even posted another option. For that I am thankful to both of you. I like having more than one option to work with, and thanks to you guys now I do.

I believe I have missunderstood you, when earlier you asked “That works in the case you posted, but what about your other domains? Does it work for them, too?”

Before you asked that question I did try with all my domains and was working just fine, as I was expecting.

After reading your question, because of my misunderstanding of it, I went back and tried with the No-IP address, which includes the sub-domain.
I thought you meant to say that I should try with that No-IP address as well. My mistake was making assumptions about your question, but that gave me the idea to see if it works with sub-domains.

When I saw that was not working with sub-domains I reported back on it.
With my limited knowledge of coding I was looking at your script and the part

heading.textContent = window.location.pathname.toString().replace(/\//g, '');

gave the feeling that is parsing the url and it selects to display the top level domain only, ignoring everything outside of it (left an right), therefore working the way I asked for in the first place. This bit of code, in your post:

(/\//g, '')

is a mystery to me, but I think is what skips frames… maybe you can explain to me everything within the brackets, because I’m just curious, if you don’t mind of course.

The misunderstanding made me think that working with a domain and a sub-domain at the same time would also be a good idea. I do use the No-IP subdomain as well, but only to display some basic page, if someone lands on it by mistake/error. So I might as well put a placeholder page there that would show the domain/subdomain name on the page, same as on those other websites / domain names that I would be working on.

Is just that one idea leads to another, that is why I tried to see if your script works with the No-IP subdomain, or any other sub-domain for that matter, beside top level domains (example.com).

My original intent was to get a solution for any domain name in the form of “example.com” and that was accomplished.

I hope I am not creating more confusion with my post, I just try to explain myself.

The bottom line: I do have the answer that I came here for.

I don’t mean to make things more complicated

Thank you very much James! I apreciate the time you have taken with this.
I appreciate M3’s suggestion as well, thank you very much!

1 Like
13

That is a regular expression, that consists of the following parts:

  • / - regular expressions use a forward slash to delimit the start and end of the regular expression
  • \/ - the backslash is an escape character, which is escaping a forward slash. This is so that the regular expression matches a forward slash in the pathname
  • / - the closing slash to delimit the end of the regular expression
  • g - a flag stating “global”, so that the regular expression match occurs globally over the whole string.

It may have been easier to understand by using an explainer variable for the regex.

var allSlashesRx = /\//g;
heading.textContent = window.location.pathname.replace(allSlashesRx, '');
1 Like
14

Hi Paul,
Thank you for breaking down that bit of code for me. It is a bit easier to tackle it that way.
Perhaps James meant to save one line of code, sort of… obtain maximum effect with minimum effort, for eficiency. I do have that tendency myself, but sometimes people do not understand what I had in mind.

15

Oh good :slight_smile:

The thing with the regex was exactly like Paul said.

16

Yes, this can be put to rest.
Glad to have knowledgeable guys around.

Thank you all people and all the best!

17

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.