jQuery and PhoneGap - Include a HTML file clientsi

2019-04-07 21:38发布

站内问答 / jQuery
1855 3 4

I'm creating an native Android application by using PhoneGap and jQuery Mobile.

When I create a multipaged page, i don't to include the same navigationbar all the time. So I tried to include a (s)html. But it doesn't work. This is what i've tried this far:

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

This page is not placed on a (web)server. When the navigation.inc.shtml is not a server, is it possible to include the file with html or javascript?

3条回答
孤傲高冷的网名
2楼-- · 2019-04-07 22:04

I used the client side javascript code as suggested above from Jhof.

template example for Navigation header:

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

I've created an initialization function where I call all my init functions as loadTemplates()

my initializationFunction is called from body.onLoad event. onLoad event fire at the end of the html parsing!

So it work also at the initial page view.

查看更多
0人赞 添加讨论(0) 举报
狗以群分
3楼-- · 2019-04-07 22:07

I was looking to a write-once approach to data-role="footer"s, and got it working as shown below. What I don't like it 1.) its not from an include file so 2.) the navbar code is a bit hard to read and maintain. (This code does NOT go in 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)
})

the pagecreate event works too.

查看更多
0人赞 添加讨论(0) 举报
一夜七次
4楼-- · 2019-04-07 22:11

I'm running into the same issue. As far as I can tell, Android ignores Server Side Includes.

I've been getting close to the answer with load based on this answer but I'm taking a slightly different approach:

Wherever you need to include an external file:

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

Then, at the end of my ( multipage ) index.html

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

The problem is that it doesn't work for the initial page view. Any subsequent pages look great.

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)