2012-12-24 45 views
4

我試圖將谷歌地圖加載到Windows應用商店應用。但是,本機Windows RT功能存在問題:Windows.UI.Popups.MessageDialog。我猜測Windows命名空間超出了範圍,但我現在還不知道如何將此函數放入可以訪問Windows命名空間的範圍中。任何幫助表示讚賞。Windows應用商店 - WinJS:0x800a1391 - JavaScript運行時錯誤:'Windows'未定義

編輯:我越想這件事,就越覺得它與我加載map.html作爲iFrame的源碼有關。因此,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:在第50行,第17欄在未處理的異常MS-APPX幅:// 76ad865e-25CF-485C-bc77-e18186bfd7ee /pages/map/map.js 0x800a1391 - JavaScript的運行時錯誤: '視窗' 是未定義 文件:map.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

碼 - 您的網址說這就是這個代碼是 - 不能訪問WinRT的組件。您將需要使用postMessage等在兩個安全上下文之間進行通信。

+0

多米尼克 - 非常感謝你。 postMessage是關鍵。我會投你一票,但我沒有足夠的分數。 –

+0

我使用此dZone博客的代碼來查找解決方案:http://css.dzone.com/articles/use-winjs-post-message-iframe –

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

相關問題