将页面加载到div jQuery Mobile

Question

我想通过点击jQuery Mobile中的按钮来加载div容器中另一个文件夹中的页面内容（例如：“files / pages / example.html”）！

怎么做？

<div data-role="page">
     <div id="container" data-role="content"><button id="clickButton">Click me!</button></div>
</div>

Answer 1

$。mobile.loadPage 是您需要的方法。它允许您加载外部html文件并将其插入到dom中。此方法的默认设置是将其作为整个页面加载，因此您必须指定将其加载到dom元素中的选项。这是一个示例（和未经测试的）代码：

$('#clickButton').on("click",function(){
  $.mobile.loadPage("theURLofThePage",{pageContainer: $('#container')})
});

现在，不要忘记跨域安全问题。我设法通过添加：

在Firefox中完成这项工作

$("#landingPage").live('pageinit', function() {
            jQuery.support.cors = true;
            $.mobile.allowCrossDomainPages=true;
        });

此外，您加载的页面必须包含在 data-role = page div中（假设它有id ='secondPage'）。加载后，触发 data-role = page ， id = secondPage div：

$('#secondPage").trigger('pagecreate');