Cordova function onDeviceReady not Working in F7

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


// 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) {


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?

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

<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?


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

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

In official template 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 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

I don’t know what you mean.
I mean it’s easy for newcomers to confuse the order of events.
However, if you are willing to understand my meaning in this way, I can open another topic to see what confusing problems new entrants will encounter.