时间戳

首页 > 解决方案 > 如何获取多个 html 文件以引用单个 .js 文件

javascript - 如何获取多个 html 文件以引用单个 .js 文件

问题描述

我正在为客户创建一个网站。我突然想到我将来可能要创建类似的网站，所以我想创建一个模板网站，允许我更改网站的特定部分以使网站适合特定客户。我想转到一个可以更改联系信息（姓名、电话号码、电子邮件等）的文件，这些更改将在所有 html 文件中更新。

此外，我想设置模板，以便我可以动态填充导航栏和页脚中的链接。最终这将是一个 12 到 15 页的网站，我只想在一个文件中更新导航栏/页脚的数据，以便动态填充带有导航栏/页脚的 12 到 15 页的其余部分。

这是我的文件树。目前没有css，只有html。

下面是 index.js 文件。目前，这适用于 index.html，这意味着页脚中的联系信息已正确填充，并且导航栏元素中的链接已正确填充。此文件未填充contact.html 和about.html 中的链接。这就是我的问题。有没有办法使用这个 index.js 文件来更新 contact.html 和 about.html 中的元素中的链接？

let yourName = document.querySelector('#yourName');
let NMLS = document.querySelector('#NMLS');
let address1 = document.querySelector('#address1')
let address2 = document.querySelector('#address2')
let cityState = document.querySelector('#cityState')
let phone = document.querySelector('#phone')
let email = document.querySelector('#email')
let hours = document.querySelector('#hours')

let homeLink = document.getElementById('homeLink')
let aboutLink = document.getElementById("aboutLink");
let contactLink = document.getElementById('contactLink')

// Change this data depending on client

let firstName = "John"
let lastName = "Doe"
let yourNMLS = "359846"
let yourAddress1 = "1235 4th Street"
let yourAddress2 = ""
let yourCity = "San Diego"
let yourState = "CA"
let yourZip = "96586"
let yourLocalCity = "Escondido"
let yourPhone = "619-213-2589"
let yourEmail = "youremail@gmail.com"
let daysOpen = "Daily"
let hoursOpen = "8:00AM - 5:00PM"

// data for links in navbar
let yourAboutLink = "about.html"
let yourHomeLink = "index.html"
let yourContactLink = "contact.html"

// leave this alone

yourName.innerHTML = `${firstName} ${lastName}`
NMLS.innerHTML = `NMLS: ${yourNMLS}`
address1.innerHTML = `${yourAddress1}`
address2.innerHTML = `${yourAddress2}`
cityState.innerHTML = `${yourCity}, ${yourState} ${yourZip}`
email.innerHTML = `${yourEmail}`
phone.innerHTML =`${yourPhone}`
hours.innerHTML = `${daysOpen}: ${hoursOpen}`
homeLink.href = `${yourHomeLink}`
aboutLink.href = `${yourAboutLink}`
contactLink.href = `${yourContactLink}`

下面是 index.html 文件。相关部分是 header 元素中的 nav 元素，以及 footer 元素中的 ul 和 li 元素

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="css/main.css">
  <title>Loan officer website template</title>
</head>
<body>
<!-- Header Start -->
  <div class="hero-wrapper">
    <header>
      <a href="#" class="logo">Company Logo</a>
      <nav>
        <ul>
          <li><a id="homeLink" href="#">home</a></li>
          <li><a id="aboutLink" href="#">about</a></li>
          <li><a id="contactLink" href="#">contact</a></li>
          <li><a id ="applyNowLink" href="#">Apply Now</a></li>
        </ul>
      </nav>
    </header>
    <div class="hero-content">
      <h1>Your Name Home Loans</h1>
      <p class="subtitle">Your Local Mortgage Experts</p>
    </div>
  </div>

<!-- Qiuck features start -->
  <div class="quick-features">
    <div class="quick-features-content">
      <h1>Your "Name of city" Mortgage Experts</h1>
      <p class="subtitle">Welcome to your hometown Escondido mortgage professionals</p>
    </div>
    <div class="features-cards-wrapper">
      <ul>
        <li>
          <img src="#" alt="house icon">
          <h2>Purchase Loans</h2>
          <p>Get Pre-Qualified</p>
          <p>Mortgage Process</p>
          <p>Types of Mortgage</p>
          <p>Glossary of Terms</p>
          <p>Understanding Your Credit</p>
        </li>
        <li>
          <img src="#" alt="hourglass icon">
          <h2>Refinancing</h2>
          <p>Refinancing Facts</p>
          <p>Types of Mortgages</p>
          <p>Our Blogess</p>
          <p>Process of a Mortgage</p>
          <p>Understanding Your Credit</p>
        </li>
        <li>
          <img src="#" alt="pencil and pad icon">
          <h2>Popular Mortgage Programs</h2>
          <p>FHA</p>
          <p>Conventional</p>
          <p>203(K)</p>
          <p>VA</p>
          <p>View All Programs</p>
        </li>
      </ul>
    </div>
  </div>
<!-- Testimonials start -->
<div class="testimonials-wrapper">
  <div class="testimonials-content-wrapper">
    <h1>What our clients say</h1>
    <hr>
    <ul class="testimonials">
      <li>
        <blockquote>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto adipisci inventore quam possimus. Reprehenderit odit harum aut ut omnis libero neque voluptatibus nulla sequi ea tenetur consequuntur nam molestias, cupiditate praesentium! Mollitia ab totam, qui recusandae accusantium animi accusamus molestias, id reprehenderit debitis a consequuntur, vel praesentium hic veniam quam provident! Facere molestias aliquid molestiae. Labore consequatur commodi ex a?</blockquote>
        <cite>John Doe</cite>
      </li>
      <li>
        <blockquote>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto adipisci inventore quam possimus. Reprehenderit odit harum aut ut omnis libero neque voluptatibus nulla sequi ea tenetur consequuntur nam molestias, cupiditate praesentium! Mollitia ab totam, qui recusandae accusantium animi accusamus molestias, id reprehenderit debitis a consequuntur, vel praesentium hic veniam quam provident! Facere molestias aliquid molestiae. Labore consequatur commodi ex a?</blockquote>
        <cite>Jane Doe</cite>
      </li>
      <li>
        <blockquote>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto adipisci inventore quam possimus. Reprehenderit odit harum aut ut omnis libero neque voluptatibus nulla sequi ea tenetur consequuntur nam molestias, cupiditate praesentium! Mollitia ab totam, qui recusandae accusantium animi accusamus molestias, id reprehenderit debitis a consequuntur, vel praesentium hic veniam quam provident! Facere molestias aliquid molestiae. Labore consequatur commodi ex a?</blockquote>
        <cite>Mark Smith</cite>
      </li>
    </ul>
  </div>
</div>
<!-- blog start -->
<div class="blog-wrapper">
  <h1>Blog</h1>
  <hr>
  <div class="blog-content-wrapper">
    <ul class="blog-content">
      <li>
        <img src="#" alt="blog image">
        <h4>Title of blog entry</h4>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex, dolore illo, voluptas dolor explicabo, iusto magnam dolorum accusamus et quisquam voluptatem maxime quasi ullam consequuntur.
        </p>
      </li>
      <li>
        <img src="#" alt="blog image">
        <h4>Title of blog entry 2</h4>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex, dolore illo, voluptas dolor explicabo, iusto magnam dolorum accusamus et quisquam voluptatem maxime quasi ullam consequuntur.
        </p>
      </li>
      <li>
        <img src="#" alt="blog image">
        <h4>Title of blog entry 3</h4>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex, dolore illo, voluptas dolor explicabo, iusto magnam dolorum accusamus et quisquam voluptatem maxime quasi ullam consequuntur.
        </p>
      </li>
    </ul>
  </div>
</div>
<!-- Call to action -->
<div class="call-to-action-wrapper">
  <h1>Questions?</h1>
  <button>Contact Us</button>
</div>
<!-- footer -->
<footer>
  <div class="contact-info-wrapper">
    <ul>
      <li>
        <h2>Call Us</h2>
        <p id="phone"></p>
      </li>
      <li>
        <h2>email</h2>
        <p id="email"></p>
      </li>
      <li>
        <h2>Open Hours (PST)</h2>
        <p id="hours"></p>
      </li>
    </ul>
  </div>
  <div class="nmls-wrapper">
    <ul>
      <li>
        <h2>Contact</h2>
        <p id="yourName"></p>
        <p id="NMLS"></p>
        <p id="address1"></p>
        <p id="address2"></p>
        <p id="cityState"></p>
      </li>
      <li>
        <img src="#" alt="equal housing logo">
      </li>
    </ul>
  </div>
<hr>
<div class="disclaimer-wrapper">
  <p>Disclaimer</p>
  <p>All information is deemed reliable but not guaranteed. All properties are subject to prior sale, charge or withdrawal. Neither listing broker(s) or information provider(s) shall be responsible for any typographical errors, misinformation, misprints and shall be held totally harmless. Listing(s) information is provided for consumers personal, non-commercial use and may not be used for any purpose other than to identify prospective properties consumers may be interested in purchasing.</p>

  <p>Copyright © 2020, ODL Websites. All Rights Reserved.</p>
</div>
</footer>

<script type="text/javascript"src="./javascript/index.js"></script>

</body>
</html>

下面是contact.html 文件。同样，我的 index.js 无法使用此文件，这意味着 nav 元素中的链接无法使用。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h1>Contact Page</h1>

  <header>
    <a href="#" class="logo">Company Logo</a>
    <nav>
      <ul>
        <li><a id="homeLink" href="#">home</a></li>
        <li><a id="aboutLink" href="#">about</a></li>
        <li><a id="contactLink" href="#">contact</a></li>
        <li><a id ="applyNowLink" href="#">Apply Now</a></li>
      </ul>
    </nav>
  </header>


  <script type="text/javascript"src="./javascript/index.js"></script></body>
</html>

最后是我的 about.html 文件。同样，index.js 不能使用这个文件，这意味着 nav 中的链接没有更新。 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h1>About Page</h1>

  <header>
    <a href="#" class="logo">Company Logo</a>
    <nav>
      <ul>
        <li><a id="homeLink" href="#">home</a></li>
        <li><a id="aboutLink" href="#">about</a></li>
        <li><a id="contactLink" href="#">contact</a></li>
        <li><a id ="applyNowLink" href="#">Apply Now</a></li>
      </ul>
    </nav>
  </header>

  <script type="text/javascript"src="./javascript/index.js"></script></body>
</html>

标签： javascripthtmlcss

解决方案

由于第二个和第三个文件中没有#yourName元素，所以当你这样做yourName.innerHTML = '${firstName} ${lastName}';时可能会引发错误（检查你的控制台）。

为了避免首先检查元素是否存在：

if (yourName) yourName.innerHTML = '${firstName} ${lastName}';
if (NMLS) NMLS.innerHTML = `NMLS: ${yourNMLS}`
...

推荐阅读