Trouble Replacing Content Source in MashUp Sample

Question

Hi Gang!

So I am going through this "Integrating content and controls from web services sample" trying to see how to embed remote web content into a win 8 app.

I simply tried to replace the web content link in the html/webContent.html page from:

<iframe id="webContentIframe" src="http://www.microsoft.com/presspass/press/NewsArchive.mspx?cmbContentType=PressRelease"></iframe>

to

<iframe id="webContentIframe" src="http://www.google.com"></iframe>

However when I run the app, it still shows the content from Microsoft. I tried rebuilding the project - doesn't work.

Do you have any idea of what I am doing wrong?

Thanks!

Gabster.

Answer 1

Check the "showLinks" function in the webContent.js file of the sample solution, it is changing dinamically the source of the iframe, that's why you are not seeing the change.

function showLinks() { 
        var pages = [ 
            { 
                id: "link1", 
                name: "Microsoft Press", 
                link: "http://www.microsoft.com/presspass/press/NewsArchive.mspx?cmbContentType=PressRelease" 
            }, 
            { 
                id: "link2", 
                name: "Windows Phone Press", 
                link: "http://www.microsoft.com/presspass/presskits/windowsphone/" 
 
            }, 
            { 
                id: "link3", 
                name: "Windows Live Press", 
                link: "http://www.microsoft.com/presspass/presskits/windowslive/" 
            }, 
            { 
                id: "link4", 
                name: "Xbox Press", 
                link: "http://www.microsoft.com/presspass/presskits/xbox/" 
            } 
        ]; 

Change the "link" atribute on the link with id: "link1" to "http://www.google.com" and it should work.

Answer 2

Thanks for the reply Ealsur!

Unfortunately it didn't work. I replaced the id="webContentIframe" with id="link1" in webContent.html and it errored out in webContent.js on this line:

  document.getElementById("webContentIframe").setAttribute("src", this.getAttribute("dataUri"));

I should probably re-formulate my initial question.

I was looking for a clean slate (template) that simply shows a remote web site in a iframe. This MashUp sample above is nice for multiple examples but I think it has too many things going on, and if I start tweaking I break things.

Do you mind recommending a simple starting template that would do just this? I am thinking one that would let me add my own navigation control to it. Would the Navigation App be a good fit?

thanks a lot!

Gabster

Answer 3

I meant that on the showLinks function (which I added part of the code as the reply) on the line that creates the link object which id:"link1", you should change the link attribute, something like:

var pages = [ 
            { 
                id: "link1", 
                name: "My new link", 
                link: "http://www.google.com" 
            }, 

instead of the original:

var pages = [ 
            { 
                id: "link1", 
                name: "Microsoft Press", 
                link: "http://www.microsoft.com/presspass/press/NewsArchive.mspx?cmbContentType=PressRelease" 
            }, 

As for the template, the Navigation App template is a great template to start a project, because it includes the Page Control Navigator pattern (which in my opinion is the best base to build a multi-page App) and doesn't add any GridLayout or ListLayout logic like the Grid template.

There are no templates that show an iframe from the start (at least none that come included in VS2012) but you can always do a search on the Online Gallery (on the same window that let's you pick the template, there is an option to search the Online Gallery) and you might get lucky.Personally I would just use the Navigator template and create a Page Control (or reuse the one that comes created) and add the iframe in there and start playing around with it.

Aditionally, on the Microsoft Press free ebook Programming Windows 8 Apps with HTML, CSS, and JavaScript, there is a Chapter 2 where the author creates a page with a simple iframe (he provides source code) that has Bing Maps inside.

Hope this helps

Answer 4

Thank you SO much for your reply!

Ok, I got the idea with the link in the ShowLinks function. I did just that but it only show the same microsoft news page for some reason if I click on any of the dynamically generated links as if it's ignoring all of them. I see the link text is changing but not the URL for some mysterious reason.

Also thanks a ton for that precious resource you mentioned! I downloaded and will be going through it. I think I'll stop pounding on the MashUp sample and try building something from scratch. Will be learning a ton in the mean time.

Many thanks again!

gabstero

PS: I actually found an error:

"The app couldn’t navigate to http://www.google.com/ because of this error: FORBIDFRAMING."

Seems like Google doesn't allow framing. I tried other websites and they work indeed. Thanks!!

Answer 5

Glad it helped!

By the way, the FORBIDFRAMING error comes from an X-Browser header directive supported on IE8+ that let's a site define if they can be included in a iframe:

http://blogs.msdn.com/b/ieinternals/archive/2010/03/30/combating-clickjacking-with-x-frame-options.aspx