如何在ONSEN页面加载中添加js函数？ （莫纳卡）

Question

我想在页面加载时自动启动动画。我在Ons-page中的ons-template中的Onsen UI V2 JS Splitter示例中。

我发现在“/ ons-page”和“/ ons-template”标签之间添加一个脚本标签会被读取（这花了我一段时间......（ - ;）

我关注guide

<script>
document.addEventListener("init", function(event) {
  if (event.target.id == "score.html") {
    Progress1();
  }
}, false);
</script>

但什么都没发生。

我把它改为：

.... html stuff

    </ons-page>
    <script>
  $(document).ready(function() {Progress1()});
    </script>
  </ons-template>

但是现在它无法从HTML文件中找到一个组件而且它说

Uncaught Error: container does noet exist #container1 www/lib/jquery-3.1.0.slim.min.js:2

我该怎么办？我现在用一个按钮解决了。这证明它有效，但当然不是自动启动。

任何想法......？ 感谢

Answer 1

这看起来不是实现目标的好方法。您应该使用Cordova Events，或者，如果您需要等待加载Onsen，请使用ons.ready功能。这是一个例子：

<script>
  ons.ready(function() {
    //execute your code
  });
</script>

希望它有所帮助！

Answer 2

在很多帮助下，这是一个有效的解决方案。这是一个检查容器是否“存在”的间隔。它重复直到容器在那里，然后它调用该函数。在该函数中，间隔被清除（因此它停止检查）。

另见：http://www.w3schools.com/js/js_timing.asp

var tryForContainer;

function progression1Test(){
    tryForContainer = setInterval(checkIfContainerIsReady, 100);
}

function checkIfContainerIsReady(){
    //alert(document.getElementById('container1'));
    if(document.getElementById('container1') !== null){
        Progress1();
    }
}

Answer 3

我看到这是旧的，但无论如何。 Onsen UI文档说： 您可以听几个事件。 'init'或'show'将达到目的。确保将脚本作为外部文件而不是嵌入式脚本加载。 Cordova模板在导航中添加和删除。内联脚本根本没有效率

document.addEventListener('init', function(event) {
  if (event.target.matches('#yourpage')) {
    ons.notification.alert('Page is initiated.');
      // Set up content...
      }        
  }, false);