Question

我正在使用jQuery编写一个Web应用程序。基本上我有两个本地html文件：index.html，feed.html。该应用程序是使用index.html启动的，在index.html中，我有一个启动第二个html页面的锚点。

出于某种原因，从不为feed.html调用window.addEventListener（＆＃39; load＆＃39;，）。这是我的javascript及其在两个html文件中的顺序：

的index.html

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width,user-scalable=no"/>
    <title>GearFeed</title>
    <link rel="stylesheet"  href="lib/tau/themes/default/tau.min.css">
    <link rel="stylesheet"  href="css/style.css">
</head>
<body>
    <!-- Channel List -->
    <div class="ui-page" id="main">
        <header class="ui-header">
            <h2 class="ui-title">Your Lists</h2>
        </header>
        <!--Subscribed Channel List -->
        <div class="ui-content">
            <ul class="ui-listview">
            </ul>
        </div>
    </div>  

    <!-- Popup for notification -->
    <div id="popupToast" class="ui-popup ui-popup-toast">
        <div id="popupText" class="ui-popup-content"></div>
    </div>

</body>
<script type="text/javascript" src="lib/tau/js/tau.min.js"></script>
<script src="js/jquery-1.9.1.js"></script>
<script src="js/sap.js"></script>
<script src="js/app.js"></script>
<script src="js/lowBatteryCheck.js"></script>
</html>

feed.html文件非常相似： feed.html

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"/>
    <title>Section changer</title>
    <link rel="stylesheet"  href="../lib/tau/themes/default/tau.css">
<!-- <script src="../js/test.js"></script> -->
</head>
<body>
    <div id="feed-page" class="ui-page">
        <div id="feed-content" class="ui-content">
            <!-- section changer has only one child. -->
            <div id="feed-section">
                <section style="text-align:center" >
                    <h3> LEFT2 PAGE </h3>
                </section>
                <section style="text-align:center">
                    <h3> LEFT1 PAGE </h3>
                </section>
                <section class="section-active" style="text-align:center">
                    <h3> MAIN PAGE </h3>
                </section>
                <section style="text-align:center">
                    <h3> RIGHT1 PAGE </h3>
                </section>
                <section style="text-align:center">
                    <h3> RIGHT2 PAGE </h3>
                </section>
            </div>
        </div>
        <script src="../js/feeddetail.js"></script>
    </div>

    <div id="loading" class="ui-page">
        <img src="../images/waiting.gif" style="padding: 140px 140px 140px 140px;"/>
    </div>

</body>
<script src="../lib/tau/js/tau.js"></script>
<script src="../js/jquery-1.9.1.js"></script>
<script src="../js/app.js"></script>
<script src="../js/test.js"></script>
</html>

我尝试将window.addEventListener（＆＃39; load＆＃39;）放在三个不同的javascript中（ app.js，feeddetail.js，test。＆＃39; s ）是我的加载事件代码：

( function () {
    window.addEventListener('load', function(){
        console.log("page load event called!");
        $('#loading').show()
        $('#feed-page').hide();
    });
}());

它会在app.js中调用，但仅在加载index.html时才会调用。如果我将此代码放在feeddetail.js或test.js中，它就永远不会被调用。我真的很困惑，为什么不接听电话。

我启动feed.html的方式是

$('#main ul').append('<li><a href="html/feed.html" onclick="getFeed(\'' + url + '\');">' + name + '</a></li>');

在app.js代码中使用。

我希望有人能回答我的问题。请注意我必须在feed.html的主体内加载feeddetail.js，否则feed.html的格式对于目标设备是不正确的。

Answer 1

实际调用了window.addEventListener（＆＃39; load＆＃39;，function（）{}）。我实际上发现我包含tau.js的第三方js框架是利用jQuery页面，我应该为页面调用第三方库事件，例如tau.changePage（$（＆＃39;＃main＆＃39;））触发页面显示和隐藏事件。

window.addEventlistener（'load'，function（）{}）从未执行过

1 个答案: