[whatwg] Link.onload

[Garrett Smith]

On Sun, Mar 15, 2009 at 12:07 AM, Jonas Sicking <jonas at sicking.cc> wrote:
> On Sat, Mar 14, 2009 at 10:21 PM, Garrett Smith <dhtmlkitchen at gmail.com> wrote:
>> On Sat, Mar 14, 2009 at 6:54 PM, Jonas Sicking <jonas at sicking.cc> wrote:
>>> On Sat, Mar 14, 2009 at 1:48 PM, Greg Houston <gregory.houston at gmail.com> wrote:
>>
[...]

>> What other cases do you have?
>
> A web application, such as GMail, wanting to show a dialog box to the
> user asking the user to enter some information. In order to do this it
> needs to first load a stylesheet to properly style the dialog box. The
> application would do this by inserting a <link rel="stylesheet"
> href="dialog.css"> into the head of the document. It would then want
> to know when the stylesheet has loaded so that it can display the
> dialog box.
>
(To avoid FOUC on the dialog box).

That is a case where it would seem useful to have a scope=[selector]
on the link element. (wildly off-topic, I know).

> There's a few reasons depends is not a good solution for this scenario.
>
> First off, in order to use it the page would have had to not only
> insert the <link> element, but also ad a <script
> depends="dialogStylesheetId">displayDialog()</script>.
>

Provided that no script was downloaded, then yes, onload would be easier.

If the dialog needed a script that did not exist, it might be useful
to use depends.

[...]

> Third, if something like Content Security Policy [1] gets adopted in
> browsers it would be impossible to use an inline script. You would
> instead have to host a separate file that contains the call to
> displayDialog() call. This would get even worse when combined with the
> ability to show a specific dialog as described above.
>

Adding an inline script is painful.

> It seems much simpler to be able to do:
>
> link = document.createElement('link');
> link.rel = "stylesheet";
> link.href = "dialog.css";
> link.onload = function() {
>  displayDialog("Dialog Title", someObject);
> }

Why not implement EventTarget on link? For example:

link.addEventListener('load', displayDialog, true);

What happens if dialog.css has:

 @import "panel.css"
  /* other rules */

?
What do IE and Opera do?

> document.getElementsByTagName('head')[0].appendChild(link);
>
> / Jonas
>
> [1] http://people.mozilla.org/~bsterne/content-security-policy/

Will look into that.

Garrett
>