locked
Allows Blocked Context. RRS feed

  • Question

  • I am using html5 and javascript to develop a metro style app. I have a baseApi.html. I can run this file by Chrome and IE10 (Preview Relase). On IE 10, when the page opens, I encountered a bar popped up at the bottom of IE. It says:

    IE restricted this webpage from running scripts or active x controls. Allows Blocked Context.

    After I clicked the button of "Allows Blocked Context." at the bar, the page can display normally.

    However, the page cannot work on the metro style apps. What can I do to make it work?

    Moreover, I use javacript code to call Bing API in this page and get JSON data from there.

     Thanks.
    Friday, July 13, 2012 7:57 PM

Answers

All replies

  • as I know it, you need to use iframe html tag to load external javascript files. and the web page that you load for that iframe will be the one that loads the javascript files and css file ,etc etc.

    Trying to load external scripts from metro apps without using iframe, will not work.



    Friday, July 13, 2012 8:03 PM
  • In fact, in the code, I am using iframe to load the baseApi.html. Any more ideas? Thanks.
    Friday, July 13, 2012 8:43 PM
  • I don't think there is any other way to get external javascript other than using iframe. Even Youtube player needs to use iframe inside metro apps, can't have flash. It should work, I don't know why yours isn't. Maybe other guys here will help you :)
    Friday, July 13, 2012 8:47 PM
  • Any setting in manifest file is charge of this?
    Friday, July 13, 2012 9:05 PM
  • In details, this is what I am doing: In the default.html at my metro style app, I have "<iframe id="iframeSearch" height="600" width="400" ></iframe>". In JavaScript code, at onload()  function, I use the line of

    document.getElementById("iframeSearch").src = "TestBingApi.html";

    The content in the TestBingApi.html is as follows. When I test TestBingApi.html, it works after I clicked the button of "Allows Blocked Context.", which I mentioned in my original post. But in the Metro style project, it does not work. Any further ideas? Thanks.

    <html xmlns="http://www.w3.org/1999/xhtml" >
    1	<head>
    		<link href="styles.css" rel="stylesheet" type="text/css" />
    		<title>Using Bing and JSON</title>
    		<script type="text/javascript">
    			function search() 
    			{
    				var search = "&query=" + document.getElementById("searchText").value;
    				var fullUri = serviceURI + AppId + search;
    				var head = document.getElementsByTagName('head');
    				var script = document.createElement('script');
    				script.type = "text/javascript";
    				script.src = fullUri;
    				head[0].appendChild(script);
    			}
    
    			function searchDone(results) 
    			{
    				var result = null;
    				var parent = document.getElementById('resultList');
    				parent.innerHTML = '';
    				var child = null;
    				for (var i = 0; i < results.SearchResponse.Image.Results.length; i++) 
    				{
    					result = results.SearchResponse.Image.Results[i];
    					child = document.createElement('li');
    					child.className = "resultlistitem";
    					child.innerHTML = '<a href="' + result.Url +'"><img src="' +
    						result.Thumbnail.Url +'" alt="' + result.Title +'" /></a>';
    					parent.appendChild(child);
    				}
    			}
    			
    			var AppId = "&Appid=<Appid>";
    			var serviceURI =
    			"http://api.bing.net/json.aspx?JsonType=callback&JsonCallback=searchDone&sources=image";		 
    		</script>
    	</head>
    	<body>
    		Type in a search:<input type="text" id="searchText" value="sushi"/>
    		<input type="button" value="Search!" id="searchButton" onclick="search()" />
    		<ul ID="resultList">
    		</ul>
    	</body>
    </html>

    Sunday, July 15, 2012 4:26 PM
  • The debugger is a powerful tool.  In your repro open up the JavaScript console and you will see this error:

    An app can’t load remote web content in the local context.
    File: TestBingApi.html

    This error refers to the isolation you get with Metro style app programming.  External content is treated separately from trusted local content.  See this for more information: http://msdn.microsoft.com/en-us/library/windows/apps/hh781215.aspx , http://msdn.microsoft.com/en-us/library/windows/apps/hh780594.aspx

    This sample integrates local and web context information: http://code.msdn.microsoft.com/windowsapps/Mashup-Sample-10689f5b

    Basically you need to use some form of the above information along with this code change:

    document.getElementById(

    "iframeSearch").src = "ms-appx-web:///TestBingApi.html";

    Jeff Sanders (MSFT)

    Wednesday, July 18, 2012 7:41 PM
    Moderator