<头部>JS脚本未执行

<head> JS scripts are not executing

本文关键字：执行 脚本 gt lt 头部 JS      更新时间：2023-09-26

我使用的是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>

因此，当点击链接时，我会转到一个外部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>标记之后，但情况相同，butCSS文件正在被解释。

我怎样才能做到这一点？非常感谢。

基于Worklight的应用程序是单页应用程序。这意味着您永远不应该离开index.html。这样做会导致应用程序丢失Worklight框架的上下文，从而开始失败。

如果您想在应用程序中添加多页导航，可以使用第三方框架提供的API。这里您使用的是jQuery Mobile。

  1. 您已经更改了脚本的加载顺序。你不应该。

    • 使用Worklight Studio向导使用jQuery Mobile创建应用程序模板（新项目>新混合应用程序（单击"配置javascript库">选择要添加的库）

    • 将initOptions.js、main.js和messages.js保留在底部的默认位置

    • 你得到的index.html是你使用jQuery Mobile 的模板

  2. 如果要替换捆绑的jQuery，则需要注释出（幻灯片#6）以下脚本标记：<script>window.$ = window.jQuery = WLJQ;</script>。Worklight与jQuery 1.9.x捆绑在一起。

  3. 有关使用jQuery Mobile在基于Worklight的应用程序中进行多页导航的基本示例，请查看此项目。

在页面之间导航时，仅替换data-role="page"的内容。脚本已经加载。在加载特定页面时，您可以根据需要加载其他脚本。

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

window.$ = window.jQuery = WLJQ;

在包含jQuery之前无法执行。

编辑：当你加载一个没有页眉的新页面时，很明显，它不会因为不在那里而被删除。当您在页面中替换html时，您应该查看事件的"on"函数。

相关文章：