Question

我有一个非常简单的html索引页面和一个非常简单的html标题页。

的index.html

<!DOCTYPE html> 
<html> 
    <head> 
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
        <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
    </head> 

    <body> 
        <!-- page -->
        <div data-role="page" id='page'>
            <!-- header -->
            <div data-role="header" id="header">
            </div>

            <script>
                $('#header').load('header.html');
            </script>  
        </div>
    </body>
</html>

了header.html

<h1>test</h1>

我正在尝试将头文件加载到索引文件头中，但是我在将JQM类应用到头文件时遇到了问题。

我尝试了各种方法，包括：

$('#header').load('header.html').trigger('create'); <!-- depreciated -->

$('#header').load('header.html').trigger('pagecreate'); <!-- depreciated -->

$('#header').load('header.html');
$('#page').trigger('pagecreate'); <!-- depreciated -->

$('#header').load('header.html', function () {
  $.mobile.pageContainer.pagecontainer("getActivePage").enhanceWithin();
});

我没有运气让它正常工作。有人能指出我正确的方向，最好不要使用.trigger（）

我是否在正确的位置加载脚本？将它加载到头部，标题div内部或页面末尾会更好吗？

谢谢

Answer 1

关于<h1>test</h1>，我认为必须更像：{/ p>

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
  <head>
    <meta http-equiv='content-type' content='text/html;charset=utf-8' />
    <style type='text/css'>
      @import 'test.css';
    </style>
  </head>
<body>
  <h1 id='test'>test</h1>
</body>
</html>

为了防止在上面的那个页面上执行任何脚本，虽然我在我的例子中没有使用任何脚本，但你也这样做：

$('#header').load('test.html #test');

Answer 2

我不确定你是否还在寻找答案，但这对我有用。

$.get('header.html').success(function(html){
    $(html).appendTo($('#header')).enhanceWithin();
});

如何使用Jquery Mobile从外部文件加载标头

2 个答案: