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

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 withing 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

CodePudding user response：

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

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

CodePudding user response：

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.

CodePudding user response：

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.