How to access common functions on different pages

1

Hello,

I am not understanding how the init on different pages work, let’s say I have common function that is used on app init and page init but needs to be available on all the pages + app init(index.html), How do I achieve this please? Do I need to do this?

$(document).on(‘page:init’, ‘.page[data-name=“page1”]’, function (e) {
$$.getScript(“js/actions.js”);
});

$(document).on(‘page:init’, ‘.page[data-name=“page2”]’, function (e) {
$$.getScript(“js/actions.js”);
});

If I have like 30 pages, I need to do this all the way on all 30 page:init? Ouch if this is the case.
I added this in the footer of the index.html:

But the functions in that fiel are only available on the first page where the app launches(the view ) But when I go to other pages, the functions are not available…I don’t get it.

2

This is how JavaScript works, there is a scoping. To make a global function you may init it like window.someFunction=… and then it will be available everywhere

3

Thank you for the reply but I am not sure I understand.

It looks like there are 2 ways of having pages in framework 7, either you build all pages in the index.html itself(and separate them with div and meta) or have them routed to external html files.

If I understand correctly, having them routed gives a cleaner approach because you can separate everything but when all the pages are inside the index.html can we simply include the js files in the footer and access them on all the pages? As it would be far less complicated to just do that rather than having to init every single pages(like in a normal website).

Also regarding the global object, I believe this is needed because the html pages I am trying to access are external.

What you meant was something like that:

<script>
var x = myFunction();
function myFunction() {
    return this;
}
document.getElementById("demo").innerHTML = x; 
</script>