CSS - JavaScript 没有被实现答案

【问题标题】：CSS - JavaScript Not Being ImplementedCSS - JavaScript 没有被实现
【发布时间】：2021-12-29 00:11:45
【问题描述】：

我使用 fetch api 获取了一个 html 文件，并将 div 组件嵌入到另一个 html 文件中。该过程完成后未应用 css。也没有调用 javascript 文件。我检查了文件路径，它们是正确的。 css 和 javascript 标签在使用 fetch api 获取时不会转移吗？

***Main script.js***
let testSide = document.querySelector('#test-sidebar')


let htmlUrl = './TextBox/index.html'


fetch(htmlUrl)
  .then((result)=>{
    return result.text()
  }).then((html)=>{
    var parser = new DOMParser();
    var doc = parser.parseFromString(html, 'text/html')
    var doDo = doc.querySelector('.parent-container')
    testSide.appendChild(doDo)
  }).catch((error)=>{
    console.log(error)
  })

***Main HTML File***
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="UTF-8">
  <title>To Do</title>
  <!-- Boxicons CDN Link -->
  <link href='https://unpkg.com/boxicons@2.0.7/css/boxicons.min.css' rel='stylesheet'>
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <link rel="stylesheet" href='style.css'>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
  <div id="test-sidebar">
  </div>
  <script src="script.js"></script>
</body>
</html>

***Second Html File***
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <title>Notbox</title>
  <link rel="stylesheet" href="style.css">
  <!-- Boxicons CDN Link -->
  <link href='https://unpkg.com/boxicons@2.0.7/css/boxicons.min.css' rel='stylesheet'>
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
  <body>
    <div class="parent-container">

<!---Select items------>
    <div class="container">
      <div class="header">
      </div>
      <div class="content">
        <div class="items-content">
          <ul class="list" id="list">
        
          </ul>
        </div>

        <button type="button" class="create-text-box">Create Text Box</button>

      </div>

    </div>
    <!--Display notebox-->
    <div class="notebox-container">
      <div class="header">
      </div>
      <div class="content">
        <div class="items-content">
          <textarea class="list" id="noteList" ></textarea>

        </div>

        <button type="button" class="copy-text">Copy Text</button>

      </div>

    </div>
  </div>
    <script src="script.js"></script>
  </body>
</html>

***CSS of second html file***
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


body{
  position: relative;
  width: 100%;
  height: 100vh;
  font-family: 'Titillium Web', sans-serif;
}
/*------------------------container-----------------------*/
.parent-container{
  position: relative;
  width: 100%;
  height: 540px;
  max-height: 5400px;
}

/*------------------------container-----------------------*/
.container{
  position: absolute;
  top: 0;
  left: 10px;
  width: 400px;
  margin: 0 auto;
  box-shadow: 5px 5px 8px rgb(171, 178, 185);
  border-radius: 15px 15px 0 0;
}



/*--------------------------header-----------------------*/
.header{
  position: relative;
  width: 100%;
  height: 150px;
  background-color: #2E86C1;
  border-radius: 15px 15px 0 0;

}


/*---------------------------content------------------------*/

.content{
  position: relative;
  width: 100%;
  height: 390px;
  max-height: 390px;
  background-color: #EAEDED;
  overflow: hidden;
}


.content::-webkit-scrollbar{
  display: none;
}

.content ul{
  padding: 0;
  margin: 0;
}

.items-content{
  position: relative;
  width: 100%;
  height: calc(100% - 35px);
  max-height: calc(100% - 35px);
  overflow: auto;
  border-bottom: 1px solid #D6DBDF;
}

.item{
  position: relative;
  border-bottom: 1px solid #EBEDEF;
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
  height: 45px;
  min-height: 45px;
  background-color: white;
  display: flex;
  align-items: center;
  cursor: pointer
}

.item:hover{
  background-color: #EAECEE
}


.item p{
  position: absolute;
  padding-left: 35px;
  height: 45px;
  line-height: 45px;
  width: 100%;
  white-space: nowrap;
}


/*--------------------------Create Text Box--------------------------*/
.create-text-box{
  position: absolute;
  border: none;
  outline: none;
  width: 100%;
  height: 35px;
  bottom: 0;
  left: 0;
  background-color: #21618C;
  color: white;
  cursor: pointer
}



/*For note box*/
/*------------------------notbox container-----------------------*/
.notebox-container{
  position: absolute;
  top: 0;
  right: 10px;
  width: 400px;
  margin: 0 auto;
  box-shadow: 5px 5px 8px rgb(171, 178, 185);
  border-radius: 15px 15px 0 0;
}



/*--------------------------header-----------------------*/
.notebox-container .header{
  position: relative;
  width: 100%;
  height: 150px;
  background-color: #2E86C1;
  border-radius: 15px 15px 0 0;

}



/*---------------------------content------------------------*/

.notebox-container .content{
  position: relative;
  width: 100%;
  height: 390px;
  max-height: 390px;
  background-color: #EAEDED;
  overflow: hidden;
}

#noteList
{
  resize: none;
  font-size: 15px;
  font: serif;
    color: #28B463;
    text-align: center;
  /*font-weight: bold;*/
  border: none;
  height: calc(100% - 35px);
  width: 100%;
}


.notebox-container .content::-webkit-scrollbar{
  display: none;
}

.notebox-container .content ul{
  padding: 0;
  margin: 0;
}

.notebox-container .items-content{
  position: relative;
  width: 100%;
  height: calc(100% - 35px);
  max-height: calc(100% - 35px);
  overflow: auto;
  border-bottom: 1px solid white;
}

.notebox-container .item{
  position: relative;
  border-bottom: 1px solid white;
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
  height: 45px;
  min-height: 45px;
  background-color: white;
  display: flex;
  align-items: center;
}


.notebox-container .item p{
  position: absolute;
  padding-left: 35px;
  height: 45px;
  line-height: 45px;
  width: 100%;
  white-space: nowrap;
  text-align: center;
}


/*--------------------------Create Text Box--------------------------*/
.notebox-container .copy-text{
  position: absolute;
  border: none;
  outline: none;
  width: 100%;
  height: 35px;
  bottom: 0;
  left: 0;
  background-color: #21618C;
  color: white;
  cursor: pointer
}


.notebox-container #remove{
  color: #28B463;
}

【问题讨论】：

您是否可能尝试从本地驱动器运行它？ stackoverflow.com/questions/50007055/… 的可能重复项
我给了样式和脚本文件自定义名称。不知道为什么他们在提取后没有转移。我可以成功看到 div 内容，但没有应用 css，也没有应用 javascript 文件
您唯一要获取的是 HTML，如果您在当前页面中呈现该 HTML，它将可以访问当前的 CSS，如果当前的 css 包含您需要的样式，那么它将起作用，您始终可以使用浏览器的开发工具并检查 html 以及为每个元素应用的 css
如果你检查你的开发工具，你可以看到它在fetch(htmlUrl)，文件不支持中给出了错误。
Does the css and javascript tags not transfer over when they are fetched using the fetch api?号

标签： javascript html dom dom-events

【解决方案1】：

从主 Html 文件加载 .css 可以正常工作。
var doDo = doc.querySelector('.parent-container') 在这里你只加载 parent-container div 元素。这里没有找到 css。因此，如果您想从 Second Html 文件加载 css，那么您应该写入/加载 css 和 javascript parent-container div 的内侧。例如：

  <div class="parent-container">
      <link rel="stylesheet" href='style.css'> <!---change here[2]------>
          --------
         -------

如果您在本地计算机上尝试此操作，您可能会遇到此错误

Fetch API cannot load file:///C:/....*.html. URL scheme "file" is not supported.

在本地主机或在线服务器上尝试。你可能没有发现这个问题。

主 HTML 文件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
</head>

<body>
    <div id="test-sidebar">
    </div>
    <script>
        let testSide = document.querySelector('#test-sidebar');
        let htmlUrl = 'index.html';
        fetch(htmlUrl)
            .then((result) => {
                return result.text()
            }).then((html) => {
                var parser = new DOMParser();
                var doc = parser.parseFromString(html, 'text/html')

                var doDo = doc.querySelector('.parent-container')
                console.log('doc', doDo)
                testSide.appendChild(doDo)
            }).catch((error) => {
                console.log(error)
            })
    </script>
     <link rel="stylesheet" href='style.css'> <!---change here[1]------>
</body>

</html>

第二个 Html 文件

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <title>Notbox</title>
  <link rel="stylesheet" href="style.css"> <!-- change here[2] -->
  <!-- Boxicons CDN Link -->
  <link href='https://unpkg.com/boxicons@2.0.7/css/boxicons.min.css' rel='stylesheet'>
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
  <body>
    <div class="parent-container">
  <link rel="stylesheet" href="style.css"> <!---change here[2]------>
<!---Select items------>
    <div class="container">
      <div class="header">
      </div>
      <div class="content">
        <div class="items-content">
          <ul class="list" id="list">
        
          </ul>
        </div>

        <button type="button" class="create-text-box">Create Text Box</button>

      </div>

    </div>
    <!--Display notebox-->
    <div class="notebox-container">
      <div class="header">
      </div>
      <div class="content">
        <div class="items-content">
          <textarea class="list" id="noteList" ></textarea>

        </div>

        <button type="button" class="copy-text">Copy Text</button>

      </div>

    </div>
  </div>

  </body>
</html>

输出：

【讨论】：

【解决方案2】：

尝试用以下代码替换您的获取代码：

fetch(htmlUrl)
.then((result)=>{
  return result.text()
})
.then((html)=>{
 var doc = document.createRange().createContextualFragment(template);
 testSide.appendChild(doc);
}).catch((error)=>{
  console.log(error)
})

createContextualFragment 呈现第二个 Html 文件并加载其所有脚本

【讨论】：

【解决方案3】：

我认为问题是由于使用了 href

href 链接是在您的网页上包含外部样式表的方法。它旨在将您的页面与您的样式表链接起来。而导入允许您将一个样式表导入另一个样式表。

用途：

<style>
@import url(YOUR/FILE/PATH)
</style>

最好将 css 文件放在存储 html 的主文件夹中的子文件夹中。此子文件夹标记为静态

例如主文件夹

主文件夹

index.html

静态

style.css

<style>
@import url("static/style.css")
</style>

【讨论】：