PDA

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



matt
Feb 06, 2015, 11:18 AM
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,

fabricio.murta
Feb 06, 2015, 9:58 PM
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) (http://forums.asp.net/post/2430932.aspx)
onload in iframes not working, if iframe have non-html document in src (pdf or text) (http://stackoverflow.com/questions/12076494/onload-in-iframes-not-working-if-iframe-have-non-html-document-in-src-pdf-or-t)
HTML Embedded PDF's & onload (http://stackoverflow.com/questions/1138232/html-embedded-pdfs-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

matt
Feb 06, 2015, 10:48 PM
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

Vladimir
Feb 07, 2015, 7:49 AM
Hi

Try to set MonitorComplete=true for Loader

matt
Feb 08, 2015, 9:31 AM
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,

Vladimir
Feb 10, 2015, 6:54 AM
MonitorComplete should not be used with html content. It should be used with documents like PDF
Does it work for PDF?

matt
Feb 17, 2015, 2:38 PM
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.

fabricio.murta
Feb 17, 2015, 6:50 PM
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 (http://mozilla.github.io/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):
d7a5d5668627e62c6144

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 (https://github.com/mozilla/pdf.js/wiki/Frequently-Asked-Questions#can-i-load-a-pdf-from-another-server-cross-domain-request).

Well, I hope this helps!