locked
White Screen before an iframe is loaded in windows store app RRS feed

 > 

  • Question

  • Question
    Sign in to vote
    0
    Sign in to vote
    I am loading an iframe dynamically in a metro application . This load operation happens when user clicks a button . 
    The loading into iframe is done using a jquery as follows : 

    jQuery('<iframe>', {
       src: "Source URL ",
       id:  'myFrame',
       allowtransparency: 'true',
       style: "background : transparent "
       frameborder: 0,
       scrolling: 'no',
       width:'100%',
       height:'100%'
       }).appendTo('#'+ parent.id);

    THe problem is that there is a white screen appearing in the iframe area before the actual iframe content is displayed.

    Also even after the content in iframe is loaded , there is a white patch in a part of the iframe . (even when i set the attribute allowtransparency to true ) . 


    This issue is consistent in a surface tablet which runs on an ARM processor . Whereas On a Windows 8 machine running on an Intel processor , this issue is not so consistent. 

    Also I tried loading the HTML/Javascript contnents (which are used to create the Metro app) into an IE 10 browser . The same issue occurs very consistently on the surface tablet (running on ARM processor )
    and it is not so consistent in the Windows 8 machine running on an Intel processor .

    What is the reason for this behaviour and how to solve this issue ?


     
    Friday, November 16, 2012 7:54 AM

Answers

  • Question
    Sign in to vote
    0
    Sign in to vote

    HI Phani,

    As you mentioned that you dynamically create a <iframe> element to load some page, is the page (loaded in iframe) of an external website (rather than some pages in your Windows Store app project), correct?

    When programing Windows Store app with HTML5 and JS, we might need to take care of something which might be somewhat different comparing to standard web page based web applications. The HTML DOM and supported APIs is different and there exists different context for loading local and external web pages(for security restriction purpose). Here is the msdn reference talking about this:

    #HTML, CSS, and JavaScript features and differences (Windows Store apps) (Windows)
    http://msdn.microsoft.com/en-us/library/windows/apps/hh465380.aspx

    Also, the following book is very good for Windows Store app developers using HTML and JS.

    #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?Loc=zatfz_zTS1z&media=zBKz&tech=zSdz&prog=zPressz&prod=zWin8z

    For your case, if the pages you want to load in iframe is not from an external web site (but some static html content pages in your local project), then you can consider using those built-in single navigation approach to load the html content (without completely reload the entire page framework or using iframe).

    #Supporting navigation (Windows Store apps using JavaScript and HTML) (Windows)
    http://msdn.microsoft.com/en-us/library/windows/apps/hh452761.aspx

    And this is also those built-in project templates (such as the "Navigation App", "Grid App" or "Split App" uses).

    If the page does be an external web page or you must use iframe to load it at runtime, then it does be possible that the frame windows will blink when the iframe start loading page (since it will need some time for it to load the entire pae and referenced resources before rendering the UI). That's also what we might see when loading a page in standard web browser. Just like when we embed a webbrowser control in WPF or windows phone application, to avoid the blink or white screen at loading time, we can consider using some UI animation such as displaying a div over the iframe or hide it first and show it after a while.

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

    • Marked as answer by Song Tian Thursday, November 22, 2012 2:25 PM
    Monday, November 19, 2012 7:00 AM
    Moderator