<head> JS腳本未執行

Question

我正在使用JQuery Mobile，現在我希望每次加載頁面時以最少的腳本加載量瀏覽頁面，我的意思是我只想一次導入所有頁面的所有常規腳本（ 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>

因此，當單擊鏈接時，我轉到位於以下頁面的外部HTML文件： pages / faqs-view.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的應用程序是單頁應用程序。 這意味着您永遠都不要離開index.html。 這樣做將導致該應用程序失去其對Worklight框架的上下文，因此它將開始失敗。

如果您想向應用程序添加多頁導航，則可以使用3rd-party框架提供的API進行。 在這里，您正在使用jQuery Mobile。

您已更改腳本的加載順序。 你不應該
- 使用Worklight Studio向導以使用jQuery Mobile創建應用模板（新項目>新混合應用程序（單擊“配置javascript庫”>選擇要添加的庫））
- 將initOptions.js，main.js和messages.js保持默認位置在底部
- 您獲得的index.html是jQuery Mobile的模板
如果要替換捆綁的jQuery ，則需要注釋掉 （幻燈片6）以下腳本標記： <script>window.$ = window.jQuery = WLJQ;</script> 。 Worklight與jQuery 1.9.x捆綁在一起。
有關使用jQuery Mobile在基於Worklight的應用程序中進行多頁導航的基本示例，請看一下該項目。

在頁面之間導航時，僅替換data-role="page" 。 腳本已經加載。 加載特定頁面時，可以根據需要加載其他腳本。

<head> JS腳本未執行

問題描述

2 個解決方案

解決方案1
0 2014-10-24 11:01:29

解決方案2
0 已采納 2014-10-24 12:31:59

<head> JS腳本未執行

問題描述

2 個解決方案

解決方案1 0 2014-10-24 11:01:29

解決方案2 0 已采納 2014-10-24 12:31:59

解決方案1
0 2014-10-24 11:01:29

解決方案2
0 已采納 2014-10-24 12:31:59