科尔多瓦在设备上构建时不使用CSS和JS

Question

我正在使用Cordova制作一个包含html文件的应用程序。 但是，当我构建我的应用程序时，它既不包含CSS也不希望使用JS。

  <!doctype html>
  <html lang="en">
    <head>
        <script>
        function showDiv() {
           document.getElementById('welcomeDiv').style.display = "block";
        }
        </script>
      <meta charset="utf-8">

      <title>InstaPlan</title>

      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
      <link rel="stylesheet" href="./main.css">
    </head>

    <body>
        <input type="button" name="answer" value="Show Div" onclick="showDiv()" />
        <div id="welcomeDiv"  style="display:none;" class="answer_list" > WELCOME</div>
        <div class="jumbotron" id="nbn">
          <h1 id="sub">Onsdag 20/4 Uke 16:</h1>
          <h1 id="mid">
             <small>Gym MatteNorsk</small>
          </h1>
        </div>
        <div class="jumbotron" id="nbn">
          <h1 id="mid"><small>Lekser til Torsdag:</small></h1>
        </div>
        <div class="jumbotron" id="nbm">
          <h1 id="sub">ayylmao ingen lekser</h1>
        </div>
    </body>
   </html>

我使用的是来自WWW文件夹中单独文件的CSS，就像index.html一样，并且我也使用了引导程序中的CSS。 我不知道这是否会影响它。 但是，标头标记中的javascript似乎也没有运行。 它不想显示div。 看到CSS正在使用style.display，这是CSS无法正常工作吗？

谢谢

Answer 1

我遇到了同样的问题，方法是将脚本放在头部，然后像您一样在HTML元素中调用函数，一旦我将脚本更改为页面底部，就像这样

...
<div class="jumbotron" id="nbm">
          <h1 id="sub">ayylmao ingen lekser</h1>
        </div>
        <script>
        function showDiv() {
           document.getElementById('welcomeDiv').style.display = "block";
        }
        </script>
    </body>
   </html>

否则，脚本将在DOM下载后解释！

Answer 2

该问题可能是由cordova-whitelist问题引起的。 请参阅cordova-whitelist插件以获取包含外部CSS文件的信息。

https://github.com/apache/cordova-plugin-whitelist

Answer 3

确保css文件和索引文件位于何处

当您在文件中调用CSS时出错

<link rel =“ stylesheet” href =“ ./ main.css”>

如果您的索引文件和CSS文件位于同一文件夹中

www/index.html和www/main.css

然后写链接像

<link rel =“ stylesheet” href =“ main.css”>

或者如果css文件位于style的内部文件夹中，或者位于

<link rel =“ stylesheet” href =“ style / main.css”>

这将为您工作

更新

index.html

<head>
    <meta charset="utf-8">
    <title>InstaPlan</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <link rel="stylesheet" href="style/main.css">
    <script src="cordova.js"></script>
    <script src="js/main.js"></script>
</head>
<body>
    <input type="button" name="answer" value="Show Div" onclick="showDiv()" />
    <div id="welcomeDiv"  style="display:none;" class="answer_list" >WELCOME</div>
    <div class="jumbotron" id="nbn">
        <h1 id="sub">Onsdag 20/4 Uke 16:</h1>
        <h1 id="mid">
            <small>Gym MatteNorsk</small>
        </h1>
    </div>
    <div class="jumbotron" id="nbn">
        <h1 id="mid"><small>Lekser til Torsdag:</small></h1>
    </div>
    <div class="jumbotron" id="nbm">
        <h1 id="sub">ayylmao ingen lekser</h1>
    </div>
</body>

在www文件夹中创建样式文件夹

样式/ main.css

.jumbotron h1{
   font-size: 12px;
   text-decoration: underline;
   font-weight: 200;
}

在www文件夹中为js创建了文件夹

js / main.js

function showDiv() 
{
    document.getElementById('welcomeDiv').style.display = "block";
}

它对我有用的引导CSS和我的自定义CSS

请尝试一下，让我知道这是否适合您。

科尔多瓦在设备上构建时不使用CSS和JS

问题描述

3 个解决方案

解决方案1
1 2016-04-22 14:37:09

解决方案2
0 2016-04-22 13:16:45

解决方案3
0 2016-04-25 12:54:34

更新

科尔多瓦在设备上构建时不使用CSS和JS

问题描述

3 个解决方案

解决方案1 1 2016-04-22 14:37:09

解决方案2 0 2016-04-22 13:16:45

解决方案3 0 2016-04-25 12:54:34

更新

解决方案1
1 2016-04-22 14:37:09

解决方案2
0 2016-04-22 13:16:45

解决方案3
0 2016-04-25 12:54:34