CSS - JavaScript 没有被实现

Posted 2023-02-21

技术标签:

【中文标题】CSS - JavaScript 没有被实现【英文标题】：CSS - JavaScript Not Being Implemented 【发布时间】：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;

【问题讨论】：

您是否可能尝试从本地驱动器运行它？ ***.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?号 【参考方案1】：

.css

var doDo = doc.querySelector('.parent-container')

parent-container

Second Html

css

javascript

parent-container

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

【讨论】：

以上是关于CSS - JavaScript 没有被实现的主要内容，如果未能解决你的问题，请参考以下文章

是否有任何 javascript 代码（polyfill）可以启用 Flexbox（2012，css3），例如modernizr？

原生JS操作DOM

实现动画之CSS与JavaScript对比

一些css和javascript还有html的属性方法和标签

是否可以使用纯 CSS/HTML 而没有 JavaScript 来实现 GDPR Cookie 同意？不希望脚本阻止程序阻止它

javascript是啥意思