我的WinJS Windows 8应用程序中的一个页面上有Bing地图。
地图有几个引脚，每个引脚都有自己的信息框。当点击pin时，它会正确显示信息框及其内容。该内容包含一个链接到Windows 8应用程序中其他页面的超链接。应用程序可以正确导航到此页面，但后退按钮停止工作，应用程序栏也无法访问。(导航到页面正常工作)
我认为页面的导航方式和导航器记录状态的方式有问题。我是新手，所以这可能只是一个愚蠢的问题。
以下是页面.js文件中的代码：
// For an introduction to the Page Control template, see the following documentation:
// http://go.microsoft.com/fwlink/?LinkId=232511
(function () {
"use strict";
WinJS.UI.Pages.define("/pages/testBing/testBing.html", {
// This function is called whenever a user navigates to this page. It
// populates the page elements with the app's data.
ready: function (element, options) {
// TODO: Initialize the page here.
Microsoft.Maps.loadModule('Microsoft.Maps.Map', { callback: initMap });
}
});
})();
var pinInfobox = null;
function initMap() {
try {
var mapOptions =
{
credentials: "credentials",
center: new Microsoft.Maps.Location(-33.961176, 22.420985),
mapTypeId: Microsoft.Maps.MapTypeId.road,
zoom: 5
};
var mapDiv = document.querySelector("#mapdiv");
map = new Microsoft.Maps.Map(mapDiv, mapOptions);
centerPosition();
}
catch (e) {
var md = new Windows.UI.Popups.MessageDialog(e.message);
md.showAsync();
}
}
function addPushPin(location) {
map.entities.clear();
var pushpin = new Microsoft.Maps.Pushpin(location, null);
pinInfobox = new Microsoft.Maps.Infobox(new Microsoft.Maps.Location(0, 0), { title: 'My Pushpin', visible: true, description: "<a href='/pages/player/player.html'>Profile</a>" });
Microsoft.Maps.Events.addHandler(pushpin, 'click', displayInfobox);
Microsoft.Maps.Events.addHandler(map, 'viewchange', hideInfobox);
map.entities.push(pushpin);
map.entities.push(pinInfobox);
}
function hideInfobox(e) {
pinInfobox.setOptions({ visible: false });
}
function centerPosition() {
var geolocator = new Windows.Devices.Geolocation.Geolocator();
geolocator.getGeopositionAsync().then(function (loc) {
var mapCenter = map.getCenter();
mapCenter.latitude = loc.coordinate.latitude;
mapCenter.longitude = loc.coordinate.longitude;
map.setView({ center: mapCenter, zoom: 15 });
addPushPin(mapCenter);
});
}
function displayInfobox(e) {
pinInfobox.setOptions({ title: e.target.Title, innerHTML: e.target.Description, visible: true, offset: new Microsoft.Maps.Point(0, 25) });
pinInfobox.setLocation(e.target.getLocation());
}
HTML只有以下
<!-- WinJS references -->
<link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
<script src="//Microsoft.WinJS.1.0/js/base.js"></script>
<script src="//Microsoft.WinJS.1.0/js/ui.js"></script>
<!--Bing Mapps Reference -->
<script type="text/javascript" src="ms-appx:///Bing.Maps.JavaScript//js/veapicore.js"></script>
<link href="testBing.css" rel="stylesheet" />
<script src="testBing.js"></script>
</head>
<body>
<div class="testBing fragment">
<header aria-label="Header content" role="banner">
<button class="win-backbutton" aria-label="Back" disabled type="button"></button>
<h1 class="titlearea win-type-ellipsis">
<span class="pagetitle">Welcome to testBing</span>
</h1>
</header>
<section aria-label="Main content" role="main">
<div id="mapdiv"></div>
</section>
</div>
</body>
</html>
Dominic Hopton的评论是正确的：foo.html将作为整个页面加载，而不是作为应用程序导航过程的一部分加载。如果链接应该进行应用程序导航(而不是在外部web浏览器中打开)，您可以将此代码添加到页面的就绪功能中，将链接单击转换为导航事件。
WinJS.Utilities.query("a").listen("click", function (e) {
e.preventDefault();
nav.navigate(e.target.href);
});
如果您有一些应该导航的链接和一些应该在浏览器中打开的链接，则可以修改查询。例如，如果可以将CSS类添加到应该在web浏览器中打开的链接中，则可以将查询更改为：
WinJS.Utilities.query("a:not(.defaultClick)")
您还可以修改查询以检查链接的href属性，以检查"http"，如：
WinJS.Utilities.query("a:not([href^=http])")
我还没有测试过最后一个例子，但如果它像我怀疑的那样工作，它会有一个以"http"开头的链接(因此包括"https")表现正常，而所有具有相对URL或包URL的链接都将转换为导航事件。
我不建议你盲目地这样做，但根据你的应用程序，这个简单的快捷方式可能会改变行为，以符合你的期望。