4

Google マップを Windows ストア アプリケーションに読み込もうとしています。ただし、ネイティブの Windows RT 関数である Windows.UI.Popups.MessageDialog に問題があります。Windows 名前空間はスコープ外だと推測していますが、Windows 名前空間にアクセスできるようにするスコープにこの関数を入れる方法がわかりません。どんな助けでも大歓迎です。

EDIT：これについて考えれば考えるほど、iFrameのソースとしてmap.htmlをロードしているという事実と関係があると思います。したがって、map.html のコンテキストは iFrame であり、Windows ストア アプリのページではありません。Windows 名前空間は iFrame 内からは利用できないと思いますか?

home.html から:

            <iframe id="getLocationFrame" src="ms-appx-web:///pages/map/map.html" style="width:600px; height:600px;"></iframe>

例外：

SCRIPT5009: ms-appx-web://76ad865e-25cf-485c-bc77-e18186bfd7ee/pages/map/map.js 0x800a1391 の行 50、列 17 で未処理の例外 - JavaScript ランタイム エラー: 'Windows' は未定義です ファイル: マップ.js、行: 50、列: 17

map.html:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src="//Microsoft.WinJS.1.0/js/base.js"></script>
    <script type="text/javascript" src="//Microsoft.WinJS.1.0/js/ui.js"></script>

    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?  sensor=false"></script>        
    <script type="text/javascript" src="map.js"></script>

    <link href="/pages/map/css/map.css" rel="stylesheet" />
    <link href="//Microsoft.WinJS.1.0/css/ui-light.css" rel="stylesheet" />
</head>
<body>
    <p>Click to get your location.</p>
    <button id="getLocation">Get Location</button><br/>
    <div id="mapcontainer"></div><br />
    <small>
        <a id="anchorLargerMap" href="" style="color:#0000FF;text-align:left" target="_blank">View Larger Map</a>
    </small>
</body>
</html>

map.js:

(function () {
"use strict";

WinJS.UI.Pages.define("/pages/map/map.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) {
        //Button "getLocation" event handler
        function getLocationClickHandler(eventInfo) {
            var myOptions = {
                zoom: 13,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };

            var mapcontainer = document.getElementById("mapcontainer");
            var map = new google.maps.Map(mapcontainer, myOptions);

            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(locationSuccess, locationFail);
            }
        }

        var namespacePublicMembers = {
            locationSucessFunction: locationSuccess,
            locationFailFunction: locationFail,
            getLocationClickEventHandler: getLocationClickHandler
        };

        WinJS.Namespace.define("mapPage", namespacePublicMembers);
        var getLocationButton = document.getElementById("getLocation");
        getLocationButton.addEventListener("click", getLocationClickHandler, false);

        function locationSuccess(position) {
            var initialLocation = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
            map.setCenter(initialLocation);
            var marker = new google.maps.Marker({
                position: initialLocation,
                map: map,
                title: "You are here."
            });

            var latitude = position.coords.latitude;
            var longitude = position.coords.longitude;
            var url = "http://maps.google.com/maps?q=" + latitude + "," + longitude + "&zoom=13&markers=" + latitude + "," + longitude;
            $("#anchorLargerMap").attr('href', url);
        }

        function locationFail() {
            var md = new Windows.UI.Popups.MessageDialog("Could not find you!", "").showAsync;  -- ********* THIS LINE THROWS EXCEPTION *********
        }
    }
});
})();
4

2 に答える 2

4

Web コンパートメントで実行されるコード (このコードがある場所を URL で示しています) は、WinRT コンポーネントにアクセスできません。2 つのセキュリティ コンテキスト間で通信するには、postMessage などを使用する必要があります。

于 2012-12-24T21:42:42.207 に答える
3

Map.js から:

        function locationFail() {
            //Can't do this due the the iFrame container
            //var md = new Windows.UI.Popups.MessageDialog("Could not find you!", "").showAsync;
            window.parent.postMessage("Could not find you!", "*");
        }

Home.js から:

(function () {
"use strict";

WinJS.UI.Pages.define("/pages/home/home.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) {

        window.addEventListener("message", messageReceived, false);

        function messageReceived(e) {
            if (e.origin === "ms-appx-web://76ad865e-25cf-485c-bc77-e18186bfd7ee") {
                var md = new Windows.UI.Popups.MessageDialog(e.data, "");
                md.showAsync();
            }
        };
    }
});
})();

このブログから解決策を得ました: http://css.dzone.com/articles/use-winjs-post-message-iframe

于 2012-12-26T15:13:46.453 に答える