简体   繁体   English

浏览器未从html页面加载我的Java脚本文件

[英]Browser not loading my java-script file from html page

I am newbie in we designing , i downloaded a website from github with full source code , when i open my index.html it is not loading the .js file inside in it .please help me, i just opened the index.html file using chrome and Firefox 我在设计时是新手,我从github下载了具有完整源代码的网站,当我打开index.html时,它没有在其中加载.js文件。请帮助我,我只是使用以下方式打开了index.html文件: chrome和Firefox

<!doctype html>
        <html lang="en">
         <head>
          <meta charset="utf-8">
          <base href="/">
         <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">

      <title>SHOP</title>
      <meta name="description" content="Polymer Shop Demo">

      <link rel="shortcut icon" sizes="32x32" href="images/shop-icon-32.png">
      <meta name="twitter:card" content="summary">
      <meta name="twitter:site" content="@Polymer">
      <meta property="og:type" content="website">
      <meta property="og:site_name" content="SHOP">
      <meta name="theme-color" content="#fff">
      <link rel="manifest" href="manifest.json">

      <style>

        body {
          margin: 0;
          font-family: 'Roboto', 'Noto', sans-serif;
          font-size: 13px;
          line-height: 1.5;
          min-height: 100vh;
        }

        /* styling for render while resources are loading */
        shop-app[unresolved] {
          display: block;
          min-height: 101vh;
          line-height: 68px;
          text-align: center;
          font-size: 16px;
          font-weight: 600;
          letter-spacing: 0.3em;
          color: #202020;
          padding: 0 16px;
          overflow: visible;
        }

      </style>

    </head>
    <body>

      <shop-app unresolved>SHOP</shop-app>

      <script src="node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
      <script type="module" src="src/shop-app.js"></script>

      <script>
        window.performance && performance.mark && performance.mark('index.html');
      </script>

    </body>
    </html>

It looks as though you need the webcomponents-loader.js file. 似乎您需要webcomponents-loader.js文件。 If you did not make this with node.js (you can learn it here ), you will need to find that file yourself, or install node.js. 如果您不是使用node.js实现的(您可以在此处学习),则需要自己找到该文件或安装node.js。

The following instructions will not help you learn how this works. 以下说明不会帮助您了解其工作原理。 I would HIGHLY recommend you watch the video link above to learn about node.js before you follow these instructions. 在按照这些说明进行操作之前,我强烈建议您观看上面的视频链接以了解node.js。

If you have a folder on your computer with the HTML and JS files (and node.js on your computer) you can open a terminal on your computer, navigate to that folder in the terminal (cd folder_name etc...), and run npm init or sudo npm init , whichever works. 如果您的计算机上有一个包含HTML和JS文件的文件夹(以及计算机上的node.js),则可以在计算机上打开一个终端,导航到终端中的该文件夹(cd folder_name等),然后运行npm initsudo npm init ,以任何sudo npm init方式。

Then to get a hold of that file, you will need to run npm i webcomponents.js to install webcomponents.js . 然后要保留该文件,您将需要运行npm i webcomponents.js来安装webcomponents.js Then if you open the folder with the HTML and JS files in a code editor, you should be able to see a folder called node_modules. 然后,如果在代码编辑器中打开包含HTML和JS文件的文件夹,则应该能够看到名为node_modules的文件夹。

In that folder you can find webcomponentsjs and under that, there is webcomponents-loader.js . 在该文件夹中,您可以找到webcomponentsjs ,在该文件夹下有webcomponents-loader.js You can copy that file and paste it where the main JavaScript file is. 您可以复制该文件并将其粘贴到主JavaScript文件所在的位置。 Then change the script code to <script src="src/webcomponents-loader.js"></script> 然后将脚本代码更改为<script src="src/webcomponents-loader.js"></script>

<script src="node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>

This part says that you need to install the node.js & npm and run it. 这部分说您需要安装node.js和npm并运行它。 I recomend you to search what "npm" is. 我建议您搜索“ npm”是什么。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM