CODEWITHSUNDEEP
javascripthtml
An droid
An droid

Reputation: 57

How to use content from <head></head> on multiple pages in JS

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/[email protected]/dist/moralis.js"></script>
        <!-- Latest compiled and minified CSS -->
        <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
        <link href="style/alltoken.css" rel="stylesheet">
        <!-- Latest compiled JavaScript -->
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/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

Upvotes: 2

Views: 687

Answers (3)

Reza Saadati
Reza Saadati

Reputation: 5419

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

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

Upvotes: 1

Brandon
Brandon

Reputation: 416

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.

Upvotes: 1

somdow
somdow

Reputation: 6318

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.

Upvotes: 1

Related Questions