Fatal编程技术网

Javascript JS脚本未执行

javascript jquery html jquery-mobile ibm-mobilefirst

Javascript JS脚本未执行,javascript,jquery,html,jquery-mobile,ibm-mobilefirst,Javascript,Jquery,Html,Jquery Mobile,Ibm Mobilefirst,我使用的是JQuery Mobile，现在我想在每次加载页面时以最少的脚本加载量浏览页面，我的意思是我只想导入一次所有页面JQuery.js、JQuery_Mobile.js、main.js等的所有常规脚本。。。及 因此，我有一个index.html，其中包含以下代码： <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name="vi

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

<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>
因此，当单击链接时，我会转到位于：pages/faqs-view.HTML中的外部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>

<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页面时，我可以看到中包含的脚本都没有被执行，我尝试将它们放在标记之后，但结果是一样的，但是CSS文件正在被解释

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

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

window.$ = window.jQuery = WLJQ;
在包含jQuery之前无法执行

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

。这意味着您永远不应该离开index.html。这样做将导致应用程序失去Worklight框架的上下文，因此它将开始失败

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

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

新建项目>新建混合应用程序单击配置javascript库>选择要添加的库

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

您的模板是否使用jQuery Mobile

如果要替换捆绑的jQuery，则需要滑动6以下脚本标记：window.$=window.jQuery=WLJQ；。Worklight与jQuery 1.9.x捆绑在一起

对于基于Worklight的应用程序中的多页导航的简单示例，请使用jQuery Mobile

在页面之间导航时，只替换数据角色=页面的内容。脚本已经加载。加载特定页面时，您可以根据需要加载其他脚本。

您没有理解我的意思。当我转到faqs-view.html页面时，JS文件没有被执行。@Andro Begg，但确实是window。$=window.jQuery=WLJQ；抛出一个错误，因为您没有加载任何其他脚本。您是否打开了一个新页面，但页眉中没有脚本，或者是一个div被替换为此页面？Hi@Idan：谢谢您的回答，它启发了很多事情。按照Github代码所说的去做，会保留相同的问题：例如，js/jquery.mmenu.min.js没有被执行，因为它已经被加载。唯一的方法是包含所有的js文件吗？没有执行？如果代码在那里，那么无论您在哪个页面上，它都应该是可用的，并且您需要调试代码没有执行的原因；最好是创建一个只演示问题的小测试用例项目并与大家分享。我的坏消息是，我刚刚注意到一个开发人员把main.js搞砸了，我把他的编辑工作拉了出来。很抱歉谢谢你的回答。