[CLOSED] IFrame's Loader "Load" listener is not fired when non-html content is loaded

  1. #1

    [CLOSED] IFrame's Loader "Load" listener is not fired when non-html content is loaded

    Hi,

    When the client have adobe acrobat reader installed then the viewer (or in FF build-in viewer) is loaded and then it loads the pdf file.
    I would assume that Load event should be at least triggered when the viewer is loaded (not necessarily the pdf file within the viewer)

    If you load html content then both BeforeLoad and Load events are triggered. When Acrobat viewer is loaded then only BeforeLoad is triggered.

    Is it a bug or it meant to be like that by design ?

    <%@ Page Language="C#" %>
    
    <script runat="server">
    
        private Window CreateWindow(string id, string url)
        {
            Window win = new Window()
            {
                ID = id,
                Title = "Ext.NET",
                Width = Unit.Pixel(1000),
                Height = Unit.Pixel(600),
                Modal = true,
                AutoRender = false,
                Collapsible = true,
                Maximizable = true,
                Hidden = true,
                Loader = new ComponentLoader
                {
                    Url = url,
                    Mode = LoadMode.Frame,
                    LoadMask =
                    {
                        ShowMask = true
                    },
    
                    Listeners =
                    {
                        BeforeLoad =
                        {
                            Handler = "alert('before load');"
                        },
    
                        Load =
                        {
                            Handler = "alert('content loaded');"
                        }
                    }
                }
            };
            
            return win;
            
        }
        
        protected void Page_Load(object sender, EventArgs e)
        {
           
            this.Form.Controls.Add(
                CreateWindow("Window1", "http://www.ext.net"));
            
            this.Form.Controls.Add(
                CreateWindow("Window2", "http://www.adobe.com/enterprise/accessibility/pdfs/acro6_pg_ue.pdf"));
            
        }
    </script>
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <title>IFrame's Loader "Load" listiner is not triggered when non-html content is loaded</title>    
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
            
      
            <ext:Button runat="server" Text="Html Content" Icon="Application">
                <Listeners>
                    <Click Handler="#{Window1}.show(this);" />
                </Listeners>
            </ext:Button>
    
            <ext:Button runat="server" Text="Pdf Content" Icon="Application">
                <Listeners>
                    <Click Handler="#{Window2}.show(this);" />
                </Listeners>
            </ext:Button>
        </form>
    </body>
    </html>

    Update:

    It is working fine in FF, Opera and Safari.

    The event is not triggered in IE11.
    Chrome is the odd one... the document is loading but the mask never disappear.

    Thank you,
    Last edited by Daniil; Feb 25, 2015 at 9:23 AM. Reason: [CLOSED]
  2. #2
    Hello @matt,

    It seems you are not the only one having this issue with iFrames containing PDFs, and also it does not seem that's an Ext.NET/ExtJS limitation or bug.

    But maybe this is something from the browsers itself.

    On a short search what I found about this:
    How to handle iframe onload event in ajax control? (Firefox issue)
    onload in iframes not working, if iframe have non-html document in src (pdf or text)
    HTML Embedded PDF's & onload

    It is not completely clear to me though, that it is an issue just on IE, just on FF, or what. Though, several options to overcome this issue are suggested on the links.

    I hope that helps
    Fabrício Murta
    Developer & Support Expert
  3. #3
    Thank you Fabricio,

    I will look into that tomorrow. At the moment it is not "end of the world" if I will not be able to archive "cross-browser" solution. I needed the event to be fired for my "delayed" mask - mask that would be shown after e.g. 250ms after the request was sent. (would be nice if every load mask had this feature - it is much better user experience not seeing flickering load mask if the request takes only few milliseconds.

    Having said that... if the Loader is aware (even in IE) when to turn the mask off (the standard one) and it does it , it should be able to fire the event too.

    I will check the workarounds in the links tomorrow... also will dig in to extjs code a bit.

    Best Regards
  4. #4
    Hi

    Try to set MonitorComplete=true for Loader
  5. #5
    Hi,

    It has opposite effect. Load event is not triggered even for html content. Is there any other event which is called when MonitorComplete=true?

    Thank you,
    Last edited by geoffrey.mcgill; Apr 26, 2016 at 3:12 PM.
  6. #6
    MonitorComplete should not be used with html content. It should be used with documents like PDF
    Does it work for PDF?
  7. #7
    Sorry for the late feedback...

    Setting up MonitorComplete=true does not bring the desired effect. The "load" event is not fired at all and in some cases (FF) the content after load stay masked.

    When the window stay masked, it will not trigger before load event anymore.
    Last edited by matt; Feb 17, 2015 at 2:41 PM.
  8. #8
    Hello @matt!

    If you are going to depend on browser's handling of PDF load, I must say you are treading on dangerous grounds.

    In fact, here I am using a different PDF viewer and the browser behaves differently. In other words, the handling of the loading event of the PDF documents is bound to the associated third-party application.

    One solution I thought was about embedding your PDF file. But if you could, you will still be subject to the 3rd party handlings.

    So I come up with something you may find interesting: use a fixed JS handler for your PDF opening handling. The alternative below scales neatly with Ext.NET:

    1. Download PDF.js. All you'll need from the .zip package is Build/pdf.js and Build/pdf_worker.js.
    2. Base your page on the following sample (adapted from your own example):


    You'll have the mask correctly being added when PDF load starts, and removed as soon as load is complete. You can also add neat features for the PDF file browsing, without (as far as I understood it) depending on the client user having this or that PDF viewer. It is not a big javascript either.

    Limitation: due to javascript rules, you will not be able to just use remote URLs for .PDF (for example, open a PDF file directly from adobe website). There are some workarounds for this pointed in PDF.js website.

    Well, I hope this helps!
    Last edited by fabricio.murta; Feb 17, 2015 at 6:53 PM.
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. Replies: 8
    Last Post: May 31, 2013, 12:16 PM
  2. [CLOSED] Problems when usin "Content" instead of "Items"
    By Pablo_Azevedo in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Jul 24, 2012, 1:43 PM
  3. [CLOSED] Panel Load Content is not working in "Chrome"
    By rnachman in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Dec 26, 2011, 2:49 PM
  4. Replies: 2
    Last Post: Nov 03, 2011, 5:24 PM
  5. Replies: 2
    Last Post: Jun 26, 2011, 1:59 AM

Tags for this Thread

Posting Permissions