Question

我有这两个html文件（简化后显示我遇到的问题）：

的index.html

<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<meta name="viewport"
    content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<link rel="stylesheet" type="text/css" href="jquery.mobile-1.4.3.css">
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="jquery.mobile-1.4.3.js"></script>
<script type="text/javascript" src="cordova.js"></script>

</head>
<body onload="app.initialize();">

<a href="calendar.html">My Calendar</a>

</body>
</html>

calendar.html：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<meta name="viewport"
    content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=medium-dpi" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<link rel="stylesheet" type="text/css" href="jquery.mobile-1.4.3.css">
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="jquery.mobile-1.4.3.js"></script>


</head>
<body onload="app.initialize();">
<a href="index.html">Index</a>

</body>
</html>

index.js：

var app = {

        initialize: function() {
            this.bindEvents()
        },

        bindEvents: function() {
            document.addEventListener('deviceready', this.onDeviceReady, false)
        },

        onDeviceReady: function() {
            app.receivedEvent('deviceready')
        },

        receivedEvent: function(id){

            alert(location.pathname.substring(location.pathname.lastIndexOf("/") + 1))

        }

}

现在，当应用程序首次启动时，它会显示消息＆＃34; index.html＆＃34;。但在那之后，每当我点击链接在两个页面之间反弹时，内容就会显示（相应链接到另一个页面），但我没有得到警告，这意味着javascript没有再次加载。但是，如果我刷新页面，警报会显示出来。我希望这可以加载javascript而无需刷新页面。

谢谢，

Answer 1

这种情况正在发生，因为当您选择下一页时设备已经准备就绪，因此它不会启动＆＃34;设备已经准备就绪。事件再次发生。

我将两个页面的结构更改为：

<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<meta name="viewport"
    content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<link rel="stylesheet" type="text/css" href="jquery.mobile-1.4.3.css">
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="jquery.mobile-1.4.3.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="cordova.js"></script>

</head>
<body>

<a href="calendar.html">My Calendar</a>

</body>
</html>

注意我已经在jQuery mobile下面移动了index.js并删除了＆＃34; onload＆＃34;事件

然后我利用jQuery mobile的pagecreate事件触发警报

$(document).ready(function(){
  app.initalize();
});

var app = {

        initialize: function() {
            this.bindEvents();
        },

        bindEvents: function() {
            document.addEventListener('deviceready', this.onDeviceReady, false);
            $(document).on("pagecontainershow", app.onDeviceReady);
        },

        onDeviceReady: function() {
            app.receivedEvent('deviceready')
        },

        receivedEvent: function(id){

            alert($.mobile.pageContainer.pagecontainer('getActivePage').data('url'));

        }

}

Phonegap - 页面显示但不加载javascript

1 个答案: