CODEWITHSUNDEEP
javascriptjquerycordova
voorbestanden athome
voorbestanden athome

Reputation: 71

cordova Jquery and javascript wont run

I am trying to build an app with Cordova. Sadly My javascript wont work for some reason... Can someone help with fixing this?

All i have (for now) in the index.html

    <head>
        <meta charset="utf-8">
        <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">
        <meta name="format-detection" content="telephone=no">
        <meta name="msapplication-tap-highlight" content="no">
        <meta name="viewport" content="initial-scale=1, width=device-width, viewport-fit=cover">
        <meta name="color-scheme" content="light dark">
        <link rel="stylesheet" href="css/index.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <title>Hello World</title>
    </head>
    <body>
    <div class="app">
        <h1 id="title">Test</h1>
        <p id="change">The <span class="blink">best</span> app</p>
        <button id="btn">Change content of all p elements</button>
    </div>
    <script src="js/test.js"></script>
    </body>

And in the js/test.js:

$("#btn").click(function(){
  $("#change").html("<b>Hello world!</b>");
});

So there shouldn't be too much that could go wrong, except it does...

Edit: Even normal Javascript wont work?

Upvotes: 1

Views: 198

Answers (1)

Cybershadow
Cybershadow

Reputation: 1177

As clarified by the console messages, your Content Security Policy is blocking the external jquery script. You need to allow that external script in your CSP. To do that you need to change this meta tag

<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;"> to

<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;script-src https://ajax.googleapis.com">

We just added a script-src rule to whitelist our jquery script.

To learn more you can check this post

Upvotes: 2

Related Questions