Question

我正在使用JQuery Mobile，现在我想在每次加载页面时浏览最少加载脚本数量的页面，我的意思是我只想导入 ONCE 所有页面的所有通用脚本（JQuery.js，jquery_mobile.js，main.js等...）和

所以我有一个index.html，代码如下：

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">

        <title>Hybrid App</title>

        <link rel="stylesheet" href="jqueryMobile/jquery.mobile-1.4.4.css" />
        <link rel="stylesheet" href="jqueryMobile/jquery.mobile.icons-1.4.4.css" />
        <link rel="stylesheet" href="css/jquery.mmenu.css" />

        <link rel="stylesheet" href="css/main.css" />

        <script>window.$ = window.jQuery = WLJQ;</script>
        <script type="text/javascript" src="js/jquery-2.1.1.js"></script>
        <script type="text/javascript" src="jqueryMobile/jquery.mobile-1.4.4.js"></script>
        <script type="text/javascript" src="js/jquery.mmenu.min.js"></script>
        <script type="text/javascript" src="js/initOptions.js"></script>
        <script type="text/javascript" src="sharedResources/customersObject.js"></script>
        <script type="text/javascript" src="js/main.js"></script>
        <script type="text/javascript" src="js/messages.js"></script>   
    </head>
    <body style="display: none;">

        <div data-role="page" id="page">

            <link rel="stylesheet" href="css/pages/splash-view.css" />

            <div data-role="header" id="header" data-position="fixed"></div>

            <div data-role="content" id="pageContent">
                <div id="splash-wrapper">
                    <div class="splash-content">

                        <a href="pages/faqs-view.html" data-role="button" data-inline="true" data-theme="b" id="loginAction">Login</a>

                    </div>
                </div>
            </div>

        <div data-role="footer" id="footer" data-position="fixed"></div>

        <nav id="menu">
            <ul data-role="listview" data-inset="true">

                <!-- list of items in the slide sidebar menu (called drawer menu in Andorid -->

            </ul>
        </nav>

        <script src="js/pages/splash-view.js"></script>

    </div>

</body>

所以当点击链接时，我会使用以下代码转到位于 pages / faqs-view.html 的外部HTML文件：

<div data-role="page" id="page" data-url="pages/faqs-view.html">

    <link rel="stylesheet" href="css/pages/faqs-view.css">

    <div data-role="header" id="header" data-position="fixed"></div>

    <div data-role="content" id="pageContent">
        <div id="faqs-wrapper">
            <div class="faqs-content">
                <div data-role="collapsible-set" data-corners="false" data-collapsed-icon="arrow-r" data-expanded-icon="arrow-d" id="faq-set">

                </div>
            </div>
        </div>
    </div>

    <div data-role="footer" id="footer" data-position="fixed"></div>

    <nav id="menu">
        <p class="employee-name">Welcome, Ali</p>

        <ul data-role="listview" data-inset="true">

            <!-- list of items in the slide sidebar menu (called drawer menu in Andorid -->

        </ul>
    </nav>

<script src="js/pages/faqs-view.js"></script>

问题是，在加载 faqs-view.html 页面时，我可以看到<head>中包含的所有脚本都没有被执行，我试图将它们放入在<body>标记之后，但它是相同的，但是正在解释CSS文件。

我怎样才能实现这一目标？谢谢。

Answer 1

它们按照您将它们放在页面上的顺序执行。

window.$ = window.jQuery = WLJQ;

在包含jQuery之前无法执行。

修改当您加载没有标题的新页面时，很明显它不会被删除，因为它不存在。当您在页面中替换html时，您应该查看事件的“on”函数。

Answer 2

Worklight-based applications are Single Page Applications。这意味着您永远不应该离开index.html。这样做会导致应用程序丢失其对Worklight框架的上下文，因此它将开始失败。

如果您要向应用程序添加多页面导航，则可以使用第三方框架提供的API执行此操作。在这里您使用的是jQuery Mobile。

您已更改了脚本的加载顺序。你不应该。
- Use the Worklight Studio wizard in order to create an app template with jQuery Mobile（新项目＆gt;新混合应用程序（点击＆＃34;配置javascript库＆＃34;＆gt;选择您要添加的库））
- 默认情况下，将initOptions.js，main.js和messages.js保留在底部
- The index.html you get是jQuery Mobile的模板
如果要替换捆绑的 jQuery ，则需要 comment out （幻灯片＃6）以下脚本标记：{{1 }}。 Worklight与jQuery 1.9.x捆绑在一起。
对于基于Worklight的应用程序中的多页面导航的简单示例，使用jQuery Mobile，take a look at this project。

在页面之间导航时，只会替换<script>window.$ = window.jQuery = WLJQ;</script>的内容。脚本已加载。您可以在加载特定页面时根据需要加载其他脚本。

JS脚本没有执行

2 个答案: