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

【问题标题】：How to add a js function to ONSEN page load? (monaca)如何在 ONSEN 页面加载中添加 js 函数？（摩纳卡）
【发布时间】：2016-08-18 16:21:02
【问题描述】：

我想要一个在页面加载时自动启动的动画。我在 ons 页面的 ons 模板中的 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 的东西

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

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

有什么想法...？谢谢

【问题讨论】：

标签： javascript function templates

【解决方案1】：

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

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

希望对你有帮助！

【讨论】：

感谢您的评论！不幸的是，它没有帮助，我得到了同样的未捕获错误。从按钮调用相同的函数，在同一页面上工作正常......（这是一个谜）。
这可能是因为该元素尚未加载。如果您尝试访问的元素不是温泉元素，ons.ready 可能不起作用。
我明白了！谢谢安迪。但是，为什么 $(document).ready(function() {Progress1()});不行...？或者更好地问：我怎样才能让它工作..？
$( document ).ready() 只会在页面文档对象模型 (DOM) 准备好执行 JavaScript 代码时运行。这并不意味着您尝试访问的元素已在 DOM 中呈现。您可以尝试用 3000 毫秒将您的代码包装在 timeout() 中并检查它是否有效。如果是，那肯定是时间问题。
有效！就这样！！！谢谢！极好的！！是否建议将 timeout() 留在代码中，还是只是为了调试？

【解决方案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();
    }
}

【讨论】：

【解决方案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);

【讨论】：