Geek Answers Handbook

Application for the Windows Store - WinJS: 0x800a1391 - JavaScript Runtime Error: "Windows" - undefined

I am trying to upload a Google map to the Windows Store app. However, having a problem with the native Windows RT feature: Windows.UI.Popups.MessageDialog. I am assuming that the Windows namespace is out of scope, but now I cannot figure out to use this function in the scope that will make the Windows namespace available. Any help is appreciated.

EDIT: the more I think about it, the more I think it has something to do with the fact that I'm loading map.html as the source for iFrame. So the map.html context is an iFrame, not a Windows Store app page. I assume Windows namespace is not accessible from iFrame?

From home.html:

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

An exception:

SCRIPT5009: Unhandled exception on line 50, column 17 in ms-appx-web: //76ad865e-25cf-485c-bc77-e18186bfd7ee/pages/map/map.js 0x800a1391 - JavaScript execution error: "Windows" - undefined File: map .js, Line: 50, Column: 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 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
source share
2 answers

The code that runs in the web bay — your URL says that where this code is — cannot access the WinRT components. You will need to use postMessage, etc. To exchange data between two security contexts.

+4
source

from 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!", "*"); }

from 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 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(); } }; } }); })();

I got a solution from this blog: http://css.dzone.com/articles/use-winjs-post-message-iframe

+3
source

More articles:


All Articles