Cordova function onDeviceReady not Working in F7

How do I use the functions used in the onDeviceReady () function in Cordova

for example:
Statusbar plugin and backbutton

function onDeviceReady() {

    StatusBar.backgroundColorByHexString("#2980b9"); //muda cor barra de status
    document.addEventListener("backbutton", onBackKeyDown, false);
}

everything I put in this function is not working on Framework7

Hi @Daniel_Santos,

The way you are calling/using functions inside onDeviceReady is looks fine.

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

Are you facing any issue on this?

They are not working

They working, otherwise you use it in a wrong way

I do not know what I’m doing wrong.

I have this files

app.js

// Dom7
var $$ = Dom7;

// Framework7 App main instance
var app = new Framework7({
    root: '#app', // App root element
    id: 'io.framework7.testapp', // App bundle ID
    name: 'Framework7', // App name
    theme: 'auto', // Automatic theme detection
    view: {
        stackPages: true, //empilhar paginas para mostrar no mesmo arquivo HTML    
        pushState: true, //voltar com o botão físico
        animateWithJS: true,       
    },
    touch: {
        materialRipple: true,
    },
    statusbar: {
        overlay: "auto",
        scrollTopOnClick: true,
        iosOverlaysWebView: true,
        iosTextColor: "black",
        iosBackgroundColor: null,
        materialBackgroundColor: null
    },
    dialog: {
        buttonCancel: 'Cancelar',
    },
    // App routes
    routes: routes,     
});

index.js (created for Cordova)

(function () {
    "use strict";

    function onLoad() {
        document.addEventListener("deviceready", onDeviceReady, false);
    }
    function onDeviceReady() {
        document.addEventListener("backbutton", onBackKeyDown, false);
    }

    function onPause() {
        // TODO: This application has been suspended. Save application state here.
    };

    function onResume() {
        // TODO: This application has been reactivated. Restore application state here.
    };
    function onBackKeyDown() {
        if (confirm("Deseja sair da aplicação?") == true) {
            navigator.app.exitApp()
        }
    }

})();

For me Its working as below.

$$(document).on('deviceready ', function(){

});

worked with this code

document.addEventListener('deviceready', onDeviceReady.bind(this), false);
function onDeviceReady() {   
    document.addEventListener("deviceready", onDeviceReady, false);
  
};

Hi, where you put this code? in app.js or other file?
Thanks in advance

Do you include cordova.js?

Hi
I couldn’t find cordova.js file. Where is the location of the file?
Thanks

<script type="text/javascript" charset="utf-8" src="cordova.js"></script>

Do not add onload event in function after dom mounted,it will never run.

Please, example for this?

app.js

document.addEventListener('deviceready', onDeviceReady);
function onDeviceReady() {
    document.addEventListener("backbutton", onBackKeyDown, false);
    ......
    var app = framework7(......
    function.....
    //do everything
}

Why you add var app = Framework7(…) in deviceready ?

In official template https://github.com/phonegap/phonegap-template-framework7 app= Framework7(…) not in deviceready

coz new bee likes written $$(document)…and banding event throught html on css or attr,all things should done before f7 init. my answer will avoid more answer.
btw more safety

https://framework7.io/docs/app.html init() (by default) after deviceready

Working with DOM may by before deviceready - it is normal

There’s nothing wrong with what you’re saying,
but many new developers have a habit of running their own code after js loads or dom loads.
The completion of js loading does not mean the completion of js running.
Executing code when dependencies are not satisfied causes a lot of confusion.
That’s why I say it’s a safe way to write.
Of course, if you already know this, you can write your own code.

Can you give an example (real) of bad practice (JS) with Framework7?

Don’t need to init Framework7 within deviceready event or within document.onload of withing $(document).ready(). Framework7 will be initialized after deviceready by default when running under cordova.

If any of cordova API doesn’t work, it could mean only the following:

  • you forgot to include reference to cordova.js file in index.html
  • you are trying to call cordova APIs before app initialized