时间戳

首页 > 解决方案 > 使用 js 为网站创建“页面部分”

javascript - 使用 js 为网站创建“页面部分”

问题描述

所以，我正在学习 JavaScript，并想利用我所学的知识创建一个个人网站进行测试。我喜欢使用主题，因为它让我感兴趣，我的网站基于 Fallout 宇宙（视频游戏）的终端计算机。

简而言之：我想知道的是如何将js文件“调用”到html页面中。我希望能够在 html 页面中显示 js 代码。就 js 文件而言，我不太担心我的 js 代码是否正确。我还在这方面进行训练。我只是很困惑，不知道如何显示我在 javascript 文档中编写的 html 代码，以便在我编写的每个 html 页面中显示。我希望这是有道理的，哈哈。我喜欢组织，如果需要的话，我喜欢去一个地方改变一些东西。在我看来，这可能与 html + javascript 有关。

这基本上是我希望它工作的方式（至少在我的脑海里哈哈）：

文件

RobCo（文件根路径）：

索引.html

aboutUs.html

样式.css

pageParts (Robco/pageParts) 文件路径：

站点标题.js

SiteFooter.js

我想进入 index.html 并显示来自 SiteHeading.js 的代码/信息显示。

我目前正在学习 js，尤其是关于使用 html 标签以及其他方面的知识，所以我不需要这方面的信息。

我想知道的是如何将js文件“调用”到html页面中。

我认为这样的事情会起作用，但没有，<script>document.write(robcoSiteHeading.js)</script>

出于测试目的，我将 robcoSiteHeading 移到了 RobCo 文件夹中，因此所有文件都在同一个文件夹中。只是为了确保代码正确而不是文件路径问题。仍然没有喜悦。

以下是我的代码的一些示例：

索引.html

<!DOCTYPE html>
<!-- RobCo Home Page when the site is loaded initially -->
<html>
<head>
<title>RobCo Terminal Home</title>
<link rel="stylesheet" href="styles.css">

</head>
<body>

  <!-- Terminal Header; used as the terminal's Header or first text. [InsertPageHeadingHere]-->
  <script>document.write(robcoSiteHeading.js)</script>



<!-- Main Text -->
  <p>STATUS: Unit(s) Active
  <br/>
  CONNECTED: 1 Unit(s) Connected to this terminal.
  <br/><br/>
  Please choose an option:
  <br/>

  <!-- Clickable Options -->
  <p>
  <a href="login.html">[Login]</a>
  <br/>
  <a href="DefenseProtocol.html">[Engage Defense Protocal]</a>
  <br/>
  <a href="SelfDestruct.html">[Initiate Self Destruct]</a>
  <br/>
  <a href="aboutUs.html">[About Us]</a>
  </p>

</body>

robcoSiteHeading.js 测试部分，如果可行，我可以在培训期间找出其余的 js 代码。

// Terminal Header; used as the terminal's Header or first text on nearly every page.

let siteHeading;
let testing;

// //siteHeading = `
//   <p>
//   ==================================================
//   </p>
//   <p>Welcome to ROBCO Industries (TM) Termlink</p>
//   <p>USAF Terminal Controler v0.01 </p>
//   <p>
//   ==================================================
//   </p>
//   <p>
//   This interface should be used by RobCo-licensed technicians only. The client
//    must only be operated by official personal of USAF or by pre-approved clients.
//   <br/><br/>
//   </p>
// `;

testing = '
  <p> ================================================== </p>

  <p> USAF Terminal Controler v0.01 </p>
';

标签： javascripthtmlcss

解决方案

如果我是对的，我认为您想将您编写的 HTML 嵌入到您的 HTML 页面中的 JavaScript 文件中。

如果是这种情况，您可以这样做：

包含你的 js 文件

<script src="your-js-file-name.js"></script>

创建一个容器，用于获取 HTML 页面中的 JavaScript 内容

<div id="js-content"></div>

在您的 JavaScript 文件中：

const container = document. querySelector("#js-content"); container.innerHTML = testing //the content you want to embed.

我希望这是你想要的..

推荐阅读