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

Question

I'm making an app that consists of an html file using Cordova. 我正在使用Cordova制作一个包含html文件的应用程序。 However, when I build my app, it doesn't include either CSS or want to use JS. 但是，当我构建我的应用程序时，它既不包含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>

I'm using CSS from a separate file which is located within the WWW folder just like the index.html, and I'm also using some CSS from bootstrap. 我使用的是来自WWW文件夹中单独文件的CSS，就像index.html一样，并且我也使用了引导程序中的CSS。 I don't know if that will affect it. 我不知道这是否会影响它。 However, the javascript that is in the header tag doesn't seem to run either. 但是，标头标记中的javascript似乎也没有运行。 It doesn't want to display the div. 它不想显示div。 Is this caused by CSS not working, seeing that it's using style.display? 看到CSS正在使用style.display，这是CSS无法正常工作吗？

Thank you 谢谢

Answer 1

i was suffering from the same problem by puting the script in the head and call the function in an HTML element as you did and once i changed the script to the bottom of the page like this 我遇到了同样的问题，方法是将脚本放在头部，然后像您一样在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>

otherwise the script will be interpreted after the DOM was downloaded !! 否则，脚本将在DOM下载后解释！

Answer 2

The problem may be caused by the cordova-whitelist issue. 该问题可能是由cordova-whitelist问题引起的。 Please refer to cordova-whitelist plugin for including external css files. 请参阅cordova-whitelist插件以获取包含外部CSS文件的信息。

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

Answer 3

Make sure if where the css file and index file are located 确保css文件和索引文件位于何处

as you call the css in the file is wrong 当您在文件中调用CSS时出错

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

if your index file and css file are in same folder 如果您的索引文件和CSS文件位于同一文件夹中

www/index.html & www/main.css www/index.html和www/main.css

Then wrote the link like 然后写链接像

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

or if the css file in in inner folder of style or any other than 或者如果css文件位于style的内部文件夹中，或者位于

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

And this will work for you 这将为您工作

Updated 更新

index.html 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>

Created folder for style in www folder 在www文件夹中创建样式文件夹

style/main.css 样式/ main.css

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

Created folder for js in www folder 在www文件夹中为js创建了文件夹

js/main.js js / main.js

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

It's working for me with the bootstrap css and mine custom css 它对我有用的引导CSS和我的自定义CSS

please try this and let me know if this is works for you or not. 请尝试一下，让我知道这是否适合您。

科尔多瓦在设备上构建时不使用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

Updated 更新

科尔多瓦在设备上构建时不使用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

Updated 更新

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

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

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