Having a hard time integrating JS code into my project

Hi guys,

Before I decided to write this issue here I have spent days browsing the official docs, Framwork7 forum, StackOverflow but I didn’t get the whole idea of how framework7 actually works.

So I am a beginner front-end web developer, I used to integrate JS code easily in my Html files and this simple task seems so damn complicated with framework 7.

I tried to add a JS code directly on the bottom of each page of my project, but the code seems to work only on the index.html. So I tried to add separated JS files and call it from index.html also no luck

I want a simple code to run on every page of my projects and for some reason, it seems like an impossible task.

Any help will be apprciated

What type of code are you trying to run? How is your project structured?
Also you don’t want to put any js in the index file.

document.addEventListener('deviceready', async () => {
await admob.start()
banner = new admob.BannerAd({
adUnitId: 'ca-app-pub-xxx/yyy',
})

  await banner.show()
}, false)

document.addEventListener('deviceready', async () => {
  await admob.start()

  interstitial = new admob.InterstitialAd({
    adUnitId: 'ca-app-pub-xxx/yyy',
  })

  await interstitial.load()
  await interstitial.show()
}, false)

That’s the code I want to implement, the project structure is the demo project of framework 7

In the index.html it worked fine but only on that page the other pages don’t work

You must have the app.f7.html component, and in its script:

<script>
  export default (props, { $onBeforeMount }) => {

    $onBeforeMount(() => {
      // Your code here
    });

    return $render
  }
</script>

Or you can put it in js/app.js, after app initialization at the end

import $ from 'dom7';

var app = new Framework7({...});

// Your code here
$(document).on('deviceready', async () => {...}, false);
2 Likes

The app seems to crash down when I implemented the first option

Are you using v6? What does the console say

Is there any other way to implement JS code on each page?
I have tried this method and no luck

// Option 1. Using one 'page:init' handler for all pages
$$(document).on('page:init', function (e) {
  // Do something here when page loaded and initialized
})

// Option 2. Using live 'page:init' event handlers for each page
$$(document).on('page:init', '.page[data-name="about"]', function (e) {
  // Do something here when page with data-name="about" attribute loaded and initialized
})

I am not even sure where to put the above code, The documentations are not clear

The version in my pc of Framework7 is: 4.0.8
and the console shows nothing
when i build the app and test it in my phone it shows splash screen and then white screen only

If you are just starting out why don’t you just use the latest version 6?

I don’t know, I followed the docs and i installed the framework7 CLI
Just now i descoverd the version on my PC

How do i Upgrade?

If the project is already big it will take a lot of time to upgrade from v4-v5 then from v5-v6.

But using your version, try

var app = new Framework7({
  on: {
    pageInit: function() {
    // Code here
    }
  }
})
1 Like

What admob plugin are you using?
I try some AND can’t make it work

I don’t know why, but I have this on bottom of my html template file

script
return {
on: {
pageInit: function () {
alert(‘js code’);
}
}
}
/script

I am using AdMob plus plugin and it worked just fine with me

1 Like

You mean I sould try this code?