Javascript 在 ons-page Onsen UI 的推送页面中不起作用答案

【问题标题】：Javascript not working in Pushed Page of ons-page Onsen UIJavascript 在 ons-page Onsen UI 的推送页面中不起作用
【发布时间】：2015-07-28 10:04:31
【问题描述】：

我正在使用 Cordova/PhoneGap 和 Onsen UI。我有两个 html 页面。 Switch（pushpage）按钮工作完美。但是 Javascript 在 search.html 中不起作用

这是我的代码：

index.html（默认主页）
search.html

index.html

...
<body>

<ons-navigator title="Navigator" var="myNavigator">
<ons-button
        onclick="myNavigator.pushPage('search.html', { animation: 'lift' })">
        Switch Page
</ons-button>
</ons-navigator>
</body>

search.html

<ons-page>
<script>
alert('Testing Javascript');
</script>
</ons-page>

【问题讨论】：

标签： javascript cordova onsen-ui

【解决方案1】：

search.html 页面是在调用myNavigator.pushPage('search.html') 时动态插入的。

当<script>标签以这种方式插入时，代码不会被执行。

请参阅此问题以获取更多信息： Can scripts be inserted with innerHTML?

为了在推送页面时执行一些脚本，您可以使用postpush 事件：

ons.ready(function() {
  myNavigator.on('postpush', function() {
    alert('Hello, world!');
  });
});

【讨论】：

【解决方案2】：

如果你把所有的JavaScript放在js文件中，点击按钮时调用该函数会更好，例如：

HTML

<body>
  <ons-navigator title="Navigator" var="myNavigator">
    <ons-button
        onclick="myNavigator.pushPage('search.html', { animation: 'lift' }); callAlert();">
        Switch Page
    </ons-button>
  </ons-navigator>
</body>

function callAlert() {
  alert('Testing Javascript');
};

或者，您可以使用ons-navigator 事件，例如postpush，来更加个性化您的代码，您可以查看它们HERE

【讨论】：