2

我正在使用标签创建一个包含多个页面的 JQM 站点。例如 index.html#a 在其中一个页面上我需要初始化一个地图，比如 index.html#map。但是我突然想到，无论我将地图初始化脚本放在哪里，当 index.html 第一次加载时，脚本仍然会执行，我想避免这种情况。

虽然我可能会将地图脚本与一些按钮相关联，但我也希望能够在有人直接加载 index.html#map 时加载地图。

所以归结为如何将 JavaScript 与子页面（带有标签的页面）相关联？

4

2 回答 2

1

我希望所有这些页面都是单个 HTML 文件的一部分。如果我是正确的，你不需要使用这个语法：

index.html#map

这个就足够了：

#map

假设这是您的 HTML：

<!DOCTYPE html>
<html>
<head>
    <title>jQM Complex Demo</title>
    <meta name="viewport" content="width=device-width"/>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>    
</head>
<body>
    <div data-role="page" id="index">
        <div data-theme="a" data-role="header">
            <h3>
                First Page
            </h3>
            <a href="#second" class="ui-btn-right">Next</a>
        </div>

        <div data-role="content">

        </div>

        <div data-theme="a" data-role="footer" data-position="fixed">

        </div>
    </div> 
    <div data-role="page" id="second">
        <div data-theme="a" data-role="header">
            <h3>
                Second Page
            </h3>
            <a href="#index" class="ui-btn-left">Back</a>
        </div>

        <div data-role="content">

        </div>

        <div data-theme="a" data-role="footer" data-position="fixed">

        </div>
    </div>    
</body>
</html>

然后将 javascript 关联到某个页面，请使用以下语法：

$(document).on('pagebeforeshow', '#index', function(){       
    alert('Index page');
});

$(document).on('pagebeforeshow', '#second', function(){       
    alert('Second page');
});

这是一个有效的 jsFiddle示例。

也可以看看我的个人博客ARTICLE，它将帮助你处理 jQuery Mobile 页面事件。或者看看我的另一个答案。

于 2013-01-28T13:14:32.660 回答
0

使用回调参数：

$(document).ready(function(){
var s = document.createElement("script");
s.type = "text/javascript";
s.src  = "http://maps.google.com/maps/api/js?v=3&sensor=true&callback=gmap_draw";
window.gmap_draw = function(){
   alert ("Callback code here");
};
$("head").append(s);  
});

确保回调是全局的。你可以在这里找到对应的线程：lazy load google maps api v3 jQuery callback

于 2013-01-28T13:16:27.233 回答