locked
iframe links don't navigate

    Question

  • When my JavaScript/HTML app is online with the Internet, I show an iframe that has external content from my own website. It look good, and I see my external web page.

    The problem is when I click on any of the links (anchors) nothing happens. No navigation, and no errors I can detect.

    The HREF locations on my external website are relative (i.e. /MyController/MyMethod). I thought it might be trying to run local content, so i changed my HREF's on my external content (web site) to use fully qualified links (i.e. http://www.mysite.com/MyController/MyMethod). Didn't work.

    My external content is an ASP.NET MVC project. Wondering if the JavaScript app needs an HTML file extension?

    Thank you!

    Wednesday, October 2, 2013 6:42 PM

Answers

  • On Windows 8 you don't need https, http should work in an iframe. Give that a try. https is only required on Windows 8.1 (with a content URI) because you have the x-ms-Webview element instead. Are you targeting 8 or 8.1?

    As for certification, it can be tricky. Pay attention to section 3 of the cert requirements. I also wrote a blog post about turning a web app into a Store app which will provide some insights here.

    Another approach you can try, by the way, is to have an HTML page in your app that you load into an iframe using an ms-appx-web, and have that page host your remote site in another iframe. That's been one way around certain issues and might help you here.

    Wednesday, October 9, 2013 3:47 AM

All replies

  • An iframe can host most content except for pages that have frame-busting code in them, which will cause it to fail. Is that possibly the case?

    I thought also to suggest that you add a content URI for your external site to your manifest, although the fact that it comes up with the first page doesn't suggest that. Worth a try, though.

    Can you host and navigate other sites within the iframe as a test?

    Friday, October 4, 2013 3:02 AM
  • Thank you for the response.

    Yep, I added the URI to the manifest. I'm simply using JavaScript on the app.onactivated function, and if isWlanConnectionProfile == true, then show an iframe with an https URI location going to external content. I am using an HTTPS connection. I read somewhere that that HTTPS is required. On the footer of this external page there are links with target blank, and they open up a browser and show content normally.

    But, any links on the landing page that I redirected to that are target _self, do not work. I get a cursor of a pointer from my CSS, but no navigation. I also have an embedded iframe with a YouTube video that does not show. And yes, I've included the entire qualified URL in the manifest.

    As per your suggestion, I tried other HTTPS sites, and included them in the manifest. But, they don't show. I read somewhere that some sites do not allow their site to be viewed in an iframe.

    What I am trying to do, is allow a few pages for the mobile app to be used as local content. That all works. But, if there is a connection to the Internet, then I want to have the app navigate to my responsive HTML5 external website. The user should not notice the transition. This will allow me to provide a much richer, cloud experience.

    So, my iPad and Android app do not have a problem. For them, I simply have a standard JavaScript listener delegate that, if the app is online, I simply do document.location.href = ...

    I'd like to figure out how to simply redirect my app to external content (including showing the YouTube videos). And, have the links work. If anybody is curious, my site is https://www.mosaictrack.com. The other issue, is maybe there is some security setting on my app or Windows 8 machine that is preventing me from navigating?

    Also, the question is, since this is so hard to do, and there is almost nothing on the the Internet on how to do this, does this app have a chance of getting certified?

    Tuesday, October 8, 2013 5:53 AM
  • On Windows 8 you don't need https, http should work in an iframe. Give that a try. https is only required on Windows 8.1 (with a content URI) because you have the x-ms-Webview element instead. Are you targeting 8 or 8.1?

    As for certification, it can be tricky. Pay attention to section 3 of the cert requirements. I also wrote a blog post about turning a web app into a Store app which will provide some insights here.

    Another approach you can try, by the way, is to have an HTML page in your app that you load into an iframe using an ms-appx-web, and have that page host your remote site in another iframe. That's been one way around certain issues and might help you here.

    Wednesday, October 9, 2013 3:47 AM
  • Thank you Kraig, for helping out.

    I'm thinking I should target 8.1.

    I took your suggestion, and if I understood correctly, had my Default page with an iframe calling a local page, with this...

    <iframe src="ms-appx-web:///PageLoad.html>

    My PageLoad.html has an iframe pointing to an external resource... https://www.mysite.com

    Same results. I see the external page. My CSS is working with pointers when I hover over the anchor tags, but no navigation. The navigation location is not generated dynamically, just a simple URI location. I even changed my external website to be fully qualified, and not relative. So, I had it... "/Home/Index", now, its https://www.mysite.com/Home/Index".

    I'm thinking maybe I should try PhoneGap or something.

    Thanks!

    Friday, October 11, 2013 8:45 PM
  • I'm not really sure what to tell you. I finally had the time to try your https://www.mosaictrack.com directly with a Blank app to which I added an iframe src='https://www.mosaictrack.com' and I can navigate just fine. I do see access denied exceptions because the site is trying to load activeX controls, but they can be ignored. This is both using the https and http URIs, with and without content URIs in the manifest. Perhaps you need to try it on another machine, say through remote debugging?
    Wednesday, October 16, 2013 8:24 PM
  • Thank you for working this issue.

    I think you're on to something. I'm not getting the Access Denied, and the ActiveX issues. I've seen these issues when trying to load JavaScript, and that's all that is happening.

    I'll take your suggesting and test this on a different machine.

    Thanks!

    Thursday, October 17, 2013 3:44 PM