CODEWITHSUNDEEP
javascriptandroidjqueryhtmlcordova
Alfred Huang
Alfred Huang

Reputation: 18235

Cordova 5.0 javascript embeded in html have no effect on android device

I'm newer to cordova, and start by using cordova 5.0.

I configured the environment, and created an instance from CLI, and run it on an android device:

cordova create hello com.example.hello HelloWorld
cd hello
cordova platform add android
cordova run android

After the above four instructions, I created an instance, and got it run on my android phone.

My Coding Effort:

The instance consists of a www folder, and I thought I should work on that.

Ok, I tried to change the index.html markup, everything goes well and got display.

But when I tried to add a piece of javascript embed in the html, I found it doesn't work:

<body>
    <div class="app">
        <h1>Apache Cordova</h1>
        <div id="deviceready" class="blink">
            <p class="event listening">Connecting to Device</p>
            <p class="event received">Device is Ready</p>
        </div>
    </div>
    <script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
    <script>
        alert('hello world!');
    </script>
</body>

Then, I change my method, I create a site.js and import it, then do the alert in it, I works!

index.html:

<body>
    <!-- ... -->
    <script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
    <script type="text/javascript" src="js/site.js"></script>
</body>

site.js:

alert('Hello world!');

I felt it strange, and curious about why it act in such a way.

I found the docs and google it, both with no luck.

So I turn for your help.

My Question

  1. What's the reason the embed script has no effect, is it ok?
  2. How should I code under such a situation? How to place my script is safe?

Upvotes: 0

Views: 850

Answers (2)

user2063329
user2063329

Reputation: 451

I could be something to do with browser rendering. I have a script, not "alert) but document.write()". The script works. I have not tried the app in Android or iOS but oenter image description herenly in the browser. have a look at the enclosed image.

Upvotes: 0

Joerg
Joerg

Reputation: 3101

There are no problems with cordova 5, I use it in several projects. Cordova is event driven, which means that you have to call all of your logic after cordova tells you, that it is ready.

You put your logic, the alert thing, in the HTML-Body, which means, that you have no guarantee, that it is called after cordova is ready.

The most important thing in your project is, that you have this few lines of code:

document.addEventListener("deviceready", onDeviceReady, false);

function onDeviceReady() {
    // Now safe to use device APIs
}

If you want to have a simple alert in your project, the code is:

document.addEventListener("deviceready", onDeviceReady, false);

function onDeviceReady() {
    alert("Hi fish_ball");
}

Maybe that 3.6 ist faster on your device, who knows? But this is the only way, which is working.

I don't know what is inside your index.js, If it is the one you got from the cordova installation, then there you will find the event handler for the deviceready thing.

Come on, it is not difficult. Your structure is:

<html>
<head>
<script src="cordova.js">
<script src="yourScript.js">
<head/>
<body>
<body>

In your «yourScript.js» you put the code above.

For the last time: Don't put Javascript into HTML until you are not sure, that cordova is loading or more general: Don't use Javascript outside the deviceready-function.

Upvotes: 1

Related Questions