How to use content from on multiple pages in JS

Question

I have a site with a few different pages, I mainly use javascript

How can I load the content from 1 to multiple .html pages within my site

this is some content

<head>
     <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
        <meta name="description" content="Web3 tutorials">
        <meta name="keywords" content="Blockchain, Web3">
        <script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script>
        <script src="https://unpkg.com/moralis-v1@1.11.0/dist/moralis.js"></script>
        <!-- Latest compiled and minified CSS -->
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
        <link href="style/alltoken.css" rel="stylesheet">
        <!-- Latest compiled JavaScript -->
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
        <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
</head>

How can I reuse the content on different html pages without copying it over and over again into every html page

It seems to me that this is one of the reasons why Rasmus Lerdorf created the PHP language in 1994.... — Mister Jojo, Aug 14 '22 at 12:23
check this out https://stackoverflow.com/questions/26618893/put-html-head-in-another-file — Raz Chiriac, Aug 14 '22 at 12:25
Duplicate of https://stackoverflow.com/questions/26618893/put-html-head-in-another-file — Raz Chiriac, Aug 14 '22 at 12:25
Does this answer your question? [How to add anything in through jquery/javascript?](https://stackoverflow.com/questions/1900874/how-to-add-anything-in-head-through-jquery-javascript) — Lawrence Cherone, Aug 14 '22 at 12:26

score 1 · Answer 1 · answered Aug 14 '22 at 12:25

Hello An droid(nice namelol). Assuming you have a regular website. The fastest way to do this is to change the document type from .HTML, to .PHP

next, create a new PHP document called "whatever-you-want.php"(obviously you can change this filename lol) and in it, place the code you want to copy to other pages. Next, go to those pages and remove the duplicated code and add

<?PHP include("whatever-you-want.php"); ?>

Please note: don't be afraid of the "PHP" extension or filename change. It will still output your code the same way as HTML.

This will now transfer that one code set in that one file, and imports it into the pages that you add that "include" to.

Last note. There are other ways depending on what you are using, but this is probably the fastest and less headache ways to do it.

Good luck.

You need to read the answer i wrote @LawrenceCherone, that's why I said "Assuming". Im giving an answer to a possible resolution. I also mentioned there are other ways. If you want me to list C#, PHP, NODEJS, MEAN STACK I mean we can go on and on. Since OP posted basic code, I have the best, fastest way to achieve this. Have a good day — somdow, Aug 14 '22 at 12:30

score 1 · Answer 2 · answered Aug 14 '22 at 12:36

1

Use the Fetch API to load external files. See this example:

fetch('header.html')
    .then(response => response.text())
    .then(header => document.head.innerHTML = header);

answered Aug 14 '22 at 12:36

Reza Saadati

5,018
4
27
64

1

Much cleaner than the JavaScript solution I included in my answer. This is probably preferable, and should have been what I included. – Brandon Aug 14 '22 at 12:41

score 0 · Answer 3 · answered Aug 14 '22 at 12:35

Without server-side technology like PHP, you have a few options. You should be able to use the HTML <object> tag:

<head>
  <!-- Page-specific tags like title -->
  <object type="text/html" data="headerContent.html"></object>
</head>

Where headerContent.html includes the HTML tags that you'd like to include in your head. You could also include JavaScript that inserts the HTML:

document.getElementsByTagName("head")[0].insertAdjacentHTML("beforeend", yourHTMLString);

Where yourHTMLString is a string literal containing the HTML tags you'd like to include in your head.

How to use content from on multiple pages in JS

3 Answers3