locked
Correct way of embedding an iframe with a remote website in a metro app

    Question

  • I am facing problems when embedding external websites via iframe in my win 8 metro app.

    I just do it the usual way like

    <iframe src="http://d1303.de/boom.htm"></iframe>

    If there is something seriously wrong on the embedded webpage (javascript errors..., like it is the case with http://d1303.de/boom.htm), my whole app crashes and Visual Studio complains about something in some script file deep in the included website.

    Is there something special I have to take into account when dealing with remote iframes?

    What I tried is adding all kinds of error handlers:

    $("iframe").on("error", function()
    {
        return true;
    });
    
    window.onerror = function () {
        return true;
    };
    
    WinJS.Application.addEventListener("error", function (x) {
        return true;
    }, false);

    None of them was able to silence the error. Event if I tell Visual Studio to ignore this error, it's not stopping to furiously shout at me everytime there is something wrong in the iframe...

    Monday, November 19, 2012 5:32 PM

Answers

  • Hi Incloud,

    For Windows Store javascript based application, external web pages referenced via iframe will be loaded in a different context than the local pages (loaded from project content folders). Thus, the iframe hosted external page will not be able to access some system APIs and resources.

    For your case, I don't think the iframe hosted external page should cause the main Windows Store app (the host application) to crash. I've created a simple test Windows Store javascript app (use the Navigation project template) and add a page to show the "http://d1303.de/boom.htm" page in an iframe element. Here is the behavior I've got:

    1) When starting through "Ctrl + F5", when navigate to the iframe page, the page just failed to load iframe content since there is script error.But the hosting app doesn't crash and I can still navigate back to other pages to work well on other pages.

    2) When starting through "F5" to debug the application, it will break into Visual Studio when navigating to the iframe page. This is because the default debug setting will break into VS IDE when there is unhandled js exception occured in application (you can see the configuration through "Debug --> Exceptions..." menu). Also, If I choose "continue", the app can still go ahead and function(navigate to other pages to work).

    So the script error in the iframe referenced page will just break its own page. For more information about the different context of web pages loaded in javascript/html based windows store app, the following book is quite good for you:

    #Free ebook: Programming Windows 8 Apps with HTML, CSS, and JavaScript (First Preview)
    http://blogs.msdn.com/b/microsoft_press/archive/2012/06/04/free-ebook-programming-windows-8-apps-with-html-css-and-javascript-first-preview.aspx


    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    • Marked as answer by Incloud GmbH Wednesday, November 21, 2012 8:45 AM
    Wednesday, November 21, 2012 2:44 AM
    Moderator

All replies

  • Hi,

    To protect user privacy and safeguard your applications, Internet Explorer restricts some interactions between frames that host Web pages from different domains.

    So you may do that like follow:

    <a href="http://www.microsoft.com" target="Frame1">See Microsoft's Web Site</a>

    #Using IFRAME Elements (Internet Explorer)

    http://msdn.microsoft.com/en-us/library/windows/apps/ms537627.aspx


    Please mark the replies as answers if they help or unmark if not.
    If you have any feedback about my replies, please contact msdnmg@microsoft.com
    Microsoft One Code Framework

    Tuesday, November 20, 2012 2:12 AM
  • Thanks for wanting to help me, Song Tian - but have you read my question?

    Opening a page in an iframe via clicking a link and loading the page right away changes exactly nothing considering my app crash problem.

    The app is crashing either way when taken my url http://d1303.de/boom.htm with a javascript error.

    Tuesday, November 20, 2012 7:04 AM
  • Hi,

    I have said above. To protect user privacy and safeguard your applications, Internet Explorer restricts some interactions between frames that host Web pages from different domains.


    Please mark the replies as answers if they help or unmark if not.
    If you have any feedback about my replies, please contact msdnmg@microsoft.com
    Microsoft One Code Framework

    Tuesday, November 20, 2012 8:06 AM
  • Hey Song Tian,

    I still don't see how this helps me. What has "protecting user privacy" to do with a crashing app when some javascript error happens in the webpage I am embedding in the iframe?

    Is there no way around this? It has to be possible to stop the whole app from crashing.

    Tuesday, November 20, 2012 9:17 AM
  • Hi Incloud,

    For Windows Store javascript based application, external web pages referenced via iframe will be loaded in a different context than the local pages (loaded from project content folders). Thus, the iframe hosted external page will not be able to access some system APIs and resources.

    For your case, I don't think the iframe hosted external page should cause the main Windows Store app (the host application) to crash. I've created a simple test Windows Store javascript app (use the Navigation project template) and add a page to show the "http://d1303.de/boom.htm" page in an iframe element. Here is the behavior I've got:

    1) When starting through "Ctrl + F5", when navigate to the iframe page, the page just failed to load iframe content since there is script error.But the hosting app doesn't crash and I can still navigate back to other pages to work well on other pages.

    2) When starting through "F5" to debug the application, it will break into Visual Studio when navigating to the iframe page. This is because the default debug setting will break into VS IDE when there is unhandled js exception occured in application (you can see the configuration through "Debug --> Exceptions..." menu). Also, If I choose "continue", the app can still go ahead and function(navigate to other pages to work).

    So the script error in the iframe referenced page will just break its own page. For more information about the different context of web pages loaded in javascript/html based windows store app, the following book is quite good for you:

    #Free ebook: Programming Windows 8 Apps with HTML, CSS, and JavaScript (First Preview)
    http://blogs.msdn.com/b/microsoft_press/archive/2012/06/04/free-ebook-programming-windows-8-apps-with-html-css-and-javascript-first-preview.aspx


    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    • Marked as answer by Incloud GmbH Wednesday, November 21, 2012 8:45 AM
    Wednesday, November 21, 2012 2:44 AM
    Moderator
  • Hey Steven Cheng,

    this is exactly what I was looking for, thank you very much!

    Wednesday, November 21, 2012 8:45 AM