Question

我正在使用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包含该文件？

Answer 1

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

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

只要您需要包含外部文件：

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

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

的末尾

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

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

Answer 2

我正在寻找对data-role =“footer”的一次写入方法，并使其工作如下所示。我不喜欢它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事件也有效。

Answer 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事件。在html解析结束时发生onLoad事件！

因此它也适用于初始页面视图。

jQuery和PhoneGap - 在HTML或JS中包含HTML客户端的HTML文件？

3 个答案: