Tizen Wearable V5.5 tau.changePage跳转后页面内JS函数未定义问题

问题根因 #

你遇到的问题和页面焦点没有任何关系，是TAU框架tau.changePage的默认加载机制导致的：
默认调用tau.changePage加载外部HTML时，TAU会走AJAX请求拉取对应页面的内容，仅提取目标页面中class为ui-page的节点插入到当前页面的DOM结构中，目标页面中ui-page节点外的所有内容（包括head里的配置、body末尾的script标签）都不会被加载和执行。你写在second.html里ui-page外面的test()函数根本没有被注入到当前运行的JS上下文，所以点击按钮触发调用时就会抛出未定义错误。

可用解决方案 #

• 方案1：全局引入公共JS
  把所有页面需要用到的JS函数统一放到外部JS文件（比如你已经引入的app.js），只在index.html中一次性引入所有公共JS，所有页面跳转后都可以直接调用这些全局函数，这是TAU应用最常用的实现方式。
• 方案2：把页面对应的JS放到ui-page内部
  将second.html里的<script>标签移到id="second"的ui-page节点内部，TAU加载页面时会提取并执行ui-page内部的script内容，test()函数就会被正常注册到全局上下文，示例修改如下：

  <div class="ui-page ui-page-active" id="second">
      <header class="ui-header">
          <h2 class="ui-title">TAU Basic</h2>
      </header>
      <div class="ui-content ui-content-padding">
          <p>Hello! </p>
          <button class="ui-btn" id="btn" onclick="test()">Test</button>
      </div>
      <!-- 把script移到ui-page内部 -->
      <script>
      function test()
      {
          console.log("test");
      };
      </script>
  </div>
  

• 方案3：改用单页结构开发
  TAU框架原生推荐单页开发模式：把所有页面的ui-page节点都写在同一个index.html中，用不同的id区分，跳转时直接调用tau.changePage('#second')即可，所有JS都运行在同一个上下文，不会出现函数找不到的问题。
• 方案4：整页跳转
  如果不需要TAU的页面切换动效，也可以放弃tau.changePage，直接用原生JS跳转window.location.href = 'second.html'，此时会整页加载second.html的所有内容，内部的JS会正常执行。

内容的提问来源于stack exchange，提问作者Kevin Müller