时间戳

首页 > 解决方案 > 在模板函数中导入脚本

javascript - 在模板函数中导入脚本

问题描述

我想用模板标签放置我的导航栏，这样当我想应用更改时，我不必经过 60 个使用完全相同导航栏的子页面来应用这些更改。因此，我查找了我正在使用的函数，但我的导航栏需要 bootstrap-js。

我试图用“import”和require来导入它，但两者都不起作用。如果有帮助，您可以查看下面的代码。

  


  const headerTemplate = document.createElement('template');
  headerTemplate.innerHTML = `

      import 'https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js';
      import 'https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.min.js';


      <link href="code/style.css" rel="stylesheet">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">



      <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <div class="container">
          <a class="navbar-brand" href="#">
            <img src="/media/images/bt.svg" alt="" width="90" height="72">
          </a>
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav me-auto">
              <li class="nav-item">
                <a class="nav-link " aria-current="page" href="/de">Home</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" data-bs-toggle="modal" data-bs-target="#exampleModal" href="/old">Ursprüngliches Design</a>
              </li>
              <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                  Projekte
                </a>
                <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                  <li><a class="dropdown-item" href="/de/project/screensaver">Screensaver</a></li>
                  <li><a class="dropdown-item" href="/de/project/wavy-cube">Wavy Cube</a></li>
                  <li><a class="dropdown-item" href="/de/project/wave-pool">Wave Pool</a></li>
                  <li><a class="dropdown-item" href="/de/project/hypno">Hypno</a></li>
                  <li><a class="dropdown-item" href="/de/project/random-shapes">Random Shapes</a></li>
                  <li><hr class="dropdown-divider"></li>
                  <li><a class="dropdown-item" href="/de/project/rolling-forests">Rolling Forests</a></li>
                  <li><a class="dropdown-item" href="/de/project/pac-man">Pac-Man</a></li>
                  <li><a class="dropdown-item" href="/de/project/tetris">Tetris</a></li>
                  <li><a class="dropdown-item" href="/de/project/planet-defense">Planet Defense</a></li>
                  <li><a class="dropdown-item" href="/de/project/tether">Tether</a></li>
                  <li><hr class="dropdown-divider"></li>
                  <li><a class="dropdown-item" href="/de/project/snake">Snake</a></li>                
                  <li><a class="dropdown-item" href="/de/project/hunter-snake">Hunter Snake</a></li> 
                  <li><hr class="dropdown-divider"></li>
                  <li><a class="dropdown-item" href="/de/project/maze-gen">Maze Gen</a></li>                
                  <li><a class="dropdown-item" href="/de/project/reaction-test">Reaction Test</a></li> 
                  <li><hr class="dropdown-divider"></li>
                  <li><a class="dropdown-item" href="/de/project/mouse-snake">Mouse Snake</a></li>
                  <li><a class="dropdown-item" href="/de/project/circle-trail">Circle Trail</a></li>
                </ul>
              </li>
            </ul>
          <li class="nav-item dropdown navbar-nav ms-auto">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                <img src="https://img.icons8.com/color/48/000000/germany-circular.png"/>       
                  DE
                </a>
                <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                  <li><a class="dropdown-item" href="/en"><img src="https://img.icons8.com/color/48/000000/usa-circular.png"/>
                </svg>  EN</a></li>
                </ul>
              </li>   
        </div>
      </nav>

    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="exampleModalLabel">Achtung!</h5>
              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
              Wenn du zum ursprünglichen Design zurückkehrst, gibt es keinen Button o. ä., der dich direkt zu diesem Design bzw. dieser Funktionsweise zurückkehren lässt. Um dennoch hierher zurückzugelangen, musst du manuell "play.boredomtermination.tk" besuchen.
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Schließen</button>
              <a type="button" class="btn btn-primary" href="/old">Fortfahren</a>
            </div>
          </div>
        </div>
      </div>  



      


  `;

  class Header extends HTMLElement {
    constructor() {
      super();
    }

    connectedCallback() {
      const shadowRoot = this.attachShadow({ mode: 'closed' });
      shadowRoot.appendChild(headerTemplate.content);
    }
  }

  customElements.define('ger-nav', Header);
<!DOCTYPE HTML>
<html lang="de-DE">
    <head>
        <meta charset="UTF-8">
        <title>Nav-Test</title>
        <script src="/index.js" type="text/javascript" defer></script>
    </head>
    <body>
        <ger-nav></ger-nav>

    </body>
</html>

在这里它似乎是白色的，但这不是我网站上的问题，我只想知道如何在另一个/在我的模块/函数中导入 java 脚本文件。

任何帮助都非常感谢，Timon。

标签： javascripttemplatesimport

解决方案

您不能在字符串中导入 JS 文件（headerTemplate.innerHTML是字符串）。

解决问题的最简单方法可能是将脚本导入 html 文件中，如下所示：

<!DOCTYPE HTML>
<html lang="de-DE">
    <head>
        <meta charset="UTF-8">
        <title>Nav-Test</title>
        <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js" type="text/javascript" defer></script>;
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.min.js" type="text/javascript" defer></script>;
        <script src="/index.js" type="text/javascript" defer></script>
    </head>
    <body>
        <ger-nav></ger-nav>

    </body>
</html>

始终确保在主脚本（index.js此处）之前导入这些脚本。

PS：您可能需要替换type="text/javascript"前type="module"两个脚本才能使此解决方案正常工作。

推荐阅读