JavasScript code in a page

Questions
1

Hi!
My question is very simple: "How can I declare some javascript code into a page?"
For example, I have this code but doesn’t work… I don’t know if is posible or not using Framework7
Thank you!

<div class="page">
  <div class="page-content">
    <a href="#" class="link btHello">Hello</a>
  </div>
  <script>
       $(".btHello").click(function(){
            console.debug("HELLOW WORLD....");
       });
       console.debug("PREPARED");
  </script>
</div>

The page is loaded successfully using asycn route, by clicking on but the scripts inside this page doesn’t work
…
{
path: ‘/apps/:id/:data’,
async(routeTo, routeFrom, resolve, reject) {
resolve({url: ‘modules/{{id}}/{{data}}’ });
}
},
…

Thank you again!

1 Like
2

No, it won’t work due to security reasons. Use Router component for this http://framework7.io/docs/router-component.html or page events

2 Likes
3

Hi…
Thank you for your answer and congratulations (and thanks again) for your great framework…

Can you tell me what are the security reasons?? I’m interesting about that…

At de moment, I solved the problem writing javascript code in pageInit event, appending to header if is external script or eval inline js…

Regards!

4

It is a browser default restriction, it won’t execute script tags added dynamically as a content strings

1 Like
5

Put following code in your app.js

$$(document).on('page:afterin', function (e, page) {
   $$(".page-current").find("script").each(function (el) {
    if ($$(this).attr('src')) {
      var s = document.createElement('script');
      s.src = $$(this).attr('src');
      $$('head').append(s);
    } else {
      eval($$(this).text());
    }
  });
});
6

Thanks…
The above code doesn’t work for me… I put it in the router definition and works perfectly
Regards!

7

Like mentioned above, use the the Router Component. See http://framework7.io/docs/router-component.html#single-file-component for an example on how to lload a page (with scripts) from a file. Take a look at the some-page.html:

…
<a @click=“openAlert”>Open Alert
…

and at the <script> part of the page. change the example function with your code

…
methods: {
openAlert: function () {
//put your code here
console.debug(“HELLOW WORLD…”);

 },

}
…

Load the page, click on the OpenAlert link and you should see the HELLO WORLD message in your console

8

hello since you use componentUrl in your pages this will allow you to use the methods where you can iniz tu js