jQuery 和 PhoneGap - 使用 HTML 或 JS 包含 HTML 文件客户端？答案

【问题标题】：jQuery and PhoneGap - Include a HTML file clientside with HTML or JS?jQuery 和 PhoneGap - 使用 HTML 或 JS 包含 HTML 文件客户端？
【发布时间】：2012-02-18 16:15:58
【问题描述】：

我正在使用 PhoneGap 和 jQuery Mobile 创建一个原生 Android 应用程序。

当我创建一个多页页面时，我不会一直包含相同的导航栏。所以我试图包含一个（s）html。但它不起作用。这是我到目前为止所尝试的：

<!--#include file="navigation.inc.html" -->
<!--#include virtual="navigation.inc.html" -->
<!--#include file="navigation.inc.shtml" -->
<!--#include virtual="navigation.inc.shtml" -->

此页面未放置在（网络）服务器上。当navigation.inc.shtml不是服务器时，是否可以将文件包含在html或javascript中？

【问题讨论】：

标签： jquery html cordova include

【解决方案1】：

我遇到了同样的问题。据我所知，Android 忽略了服务器端包含。

基于此answer，我已经接近load 的答案，但我采取的方法略有不同：

无论您需要在何处包含外部文件：

<div data-include="footer"></div>

然后，在我的（多页）index.html 的末尾

$('div[data-include]').each(function() {
    $(this).load( $(this).attr('data-include') + '.html').trigger('create');
});

问题在于它不适用于初始页面视图。任何后续页面看起来都很棒。

【讨论】：

见：stackoverflow.com/questions/7974630/…

【解决方案2】：

我正在寻找一种一次性写入 data-role="footer"s 的方法，并使其工作如下所示。我不喜欢它 1.) 它不是来自包含文件，所以 2.) 导航栏代码有点难以阅读和维护。（此代码不在 document.ready 中。）

var myFooter = '<div data-role="navbar"><ul><li><a href="#myPageName" >Send</a></li><li><a href="#myPageTwo" >Set Up</a></li><li><a href="#myPageThree" >Help</a></li></ul></div>';

// use this code pointing to each data-role="footer" where you want this navbar
$('div#myPageName').live("pagebeforecreate", function(){
      $('div#myFooterName').html(myFooter)
})

pagecreate 事件也有效。

【讨论】：

【解决方案3】：

我使用了上面 Jhof 建议的客户端 javascript 代码。

导航标题的模板示例：

<body onLoad="initialization()">
....
  <div template-include="nav-header">
  </div>
  <script type="text/javascript">
    function loadTemplates() 
    { 
  $('div[template-include]').each(function() {
      $(this).load('tpl/' + $(this).attr('template-include') + '.html').trigger('create');
});
    } 
    function initialization() {
      ....
      loadTemplates();
      ....
    }
  </script>

<body>

我创建了一个初始化函数，我将所有初始化函数都称为loadTemplates()

我的initializationFunction 是从body.onLoad 事件中调用的。 onLoad html 解析结束时触发事件！

所以它也适用于初始页面视图。

【讨论】：