Гиперссылки в информационном окне Bing Maps нарушают состояние навигации по приложениям Windows 8

У меня есть карты Bing на странице в моем приложении WinJS для Windows 8.

На карте есть несколько булавок, каждая из которых имеет свой информационный ящик. При нажатии на булавку он правильно отображает информационное окно с его содержимым. Содержимое содержит гиперссылку на другую страницу в приложении 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>

bing-maps winjs windows-8 infobox
person Shen    schedule 03.12.2012    source источник
comment
Это полноценная браузерная навигация? Например, весь ваш код выгружается? Если вы делаете это с загруженным отладчиком, вы увидите элементы вывода консоли JavaScript, указывающие на навигацию.   -  person Dominic Hopton    schedule 03.12.2012
comment
Это не в браузере. Это приложение магазина Windows 8, которое в конечном итоге также будет использоваться на Windows Phone. (Не уверен, что я неправильно понимаю ваш вопрос)   -  person Shen    schedule 03.12.2012
comment
Мне удалось прикрепить метод к событию щелчка информационного окна. Microsoft.Maps.Events.addHandler(pinInfobox, 'щелчок', testMethod); Использование WinJS.Navigation.navigate('/pages/player/player.html') позволяет мне перейти на другую страницу, и это не нарушает навигацию. Однако я хотел бы добавить несколько ссылок в информационное поле, поэтому это решение не будет работать для этого сценария.   -  person Shen    schedule 03.12.2012
comment
WWA имеют ту же поверхность API, что и браузеры. Если у вас есть ‹a href=foo.html›Foo‹/a›, то когда вы щелкнете по нему по умолчанию, он переместит всю страницу в /foo.html в вашем пакете и разрушит ваш скрипт. . Почему бы вам просто не прослушать событие щелчка в родительском div, обработать всплывающее событие и вызвать e.preventDefault() для события, чтобы навигация по умолчанию (которую я только что обсуждал) не происходила.   -  person Dominic Hopton    schedule 03.12.2012
comment
Спасибо за предложение, Доминик, однако теперь нам сказали вместо этого использовать C# и xaml. Я все еще хотел бы попробовать это, но я должен буду сделать это, когда я найду время.   -  person Shen    schedule 11.12.2012

Ответы (1)


arrow_upward
0
arrow_downward

Комментарий Доминика Хоптона верен: foo.html загружается как вся страница, а не как часть процесса навигации вашего приложения. Если ссылки предназначены для навигации в приложении (а не для открытия во внешнем веб-браузере), вы можете добавить этот код в функцию готовности вашей страницы, чтобы преобразовать щелчок по ссылке в событие навигации.

WinJS.Utilities.query("a").listen("click", function (e) {
    e.preventDefault();
    nav.navigate(e.target.href);
});

Если у вас есть некоторые ссылки, по которым нужно перемещаться, а некоторые должны открываться в браузере, вы можете изменить запрос. Например, если вы можете добавить класс CSS к ссылкам, которые должны открываться в веб-браузере, вы можете изменить запрос на:

WinJS.Utilities.query("a:not(.defaultClick)")

Вы также можете изменить запрос, чтобы проверить атрибут href ссылки, чтобы проверить наличие «http», например:

WinJS.Utilities.query("a:not([href^=http])")

Я еще не тестировал этот последний пример, но если он работает так, как я подозреваю, он будет иметь ссылки, начинающиеся с «http» (включая «https»), которые ведут себя нормально, в то время как все ссылки, которые имеют относительный URL-адрес или URL-адрес пакета будет преобразован в события навигации.

Я не рекомендую вам делать это вслепую, но в зависимости от вашего приложения этот простой ярлык может изменить поведение в соответствии с вашими ожиданиями.

person Scott Isaacs    schedule 20.02.2013