#264 ✓resolved
Tobias H. Michaelsen

IE can't create link elements from HTML literals

Reported by Tobias H. Michaelsen | August 4th, 2008 @ 02:53 PM | in 1.7

If you try to insert a link element as a HTML string, eg. '', IE will not create the DOM element in Element._getContentFromAnonymousElement but simply ignore it.

A fix for this is to insert some (any) text in the string before the link element.

(This patch is inspired by jQuery's implementation.)

Comments and changes to this ticket

  • John-David Dalton

    John-David Dalton August 4th, 2008 @ 03:02 PM

    Can you provide an example snippet. NM I see the unit test in the patch :)

  • John-David Dalton

    John-David Dalton August 4th, 2008 @ 03:04 PM

    • Assigned user set to “John-David Dalton”
    • State changed from “new” to “bug”
    • Milestone set to 1.7
  • Tobias H. Michaelsen

    Tobias H. Michaelsen August 4th, 2008 @ 03:10 PM

    Example:

    var css = '<link rel="stylesheet" type="text/css" href="my.css" />';
    $$('head').first().insert(css);
    
  • Jesper Rønn-Jensen

    Jesper Rønn-Jensen August 4th, 2008 @ 03:17 PM

    This bug is highly annoying in this typical usecase where you want to add a css file reference via javascript. As i recall, this must be done in the HEAD section of the file and use a LINK element.

    I am attaching a working example with a workaround that uses document.createElement in stead of an html string (but that's far from elegant).

    The example is working code from a current project. It attaches a css file to html head if it's necessary.

    So I really vote in favor that you include this patch as soon as possible in the release cycle.

  • John-David Dalton

    John-David Dalton August 4th, 2008 @ 04:09 PM

    By the way, thanks for taking the time to make a patch and unit tests.

    This really makes things easier :)

  • Tobias H. Michaelsen

    Tobias H. Michaelsen August 4th, 2008 @ 04:25 PM

    Sorry about making the diff from Subversion :)

    Just had the old repository laying around and didn't think about the move to Git until after I submitted the ticket.

  • Tobie Langel

    Tobie Langel August 4th, 2008 @ 04:29 PM

    I'd like to avoid the sniff if that's at all possible.

  • John-David Dalton

    John-David Dalton August 4th, 2008 @ 06:17 PM

    Ya it wouldn't hurt to simply remove the sniff and just append the dummy text to everything, or we could do a capability test (perform a one time test and if it fails fork the method).

    -- remove snippet because a patch has been attached --

  • Tobias H. Michaelsen

    Tobias H. Michaelsen August 4th, 2008 @ 08:53 PM

    It isn't really a capability problem but seemingly a bug in IE.

    Setting the innerHTML to something that contains a link element will create every other elements but just ignore the link, unless there is some text before the element -- after will not do.

    var div = new Element('div');
    div.innerHTML = '<link>';
    // => ''
    div.innerHTML = '<div><link></div>';
    // => '<div></div>' 
    div.innerHTML = '<div><link></div>text';
    // => '<div></div>text'
    div.innerHTML = 'text<link>'
    // => 'text<link>'
    

    I was also thinking that maybe it was because a link could only be added to the head element, but trying to set innerHTML on that causes an exception in IE.

    While I'm not crazy about browser sniffing, I do think there should be some kind of indication that this is a IE specific issue. That said, I don't think adding the wrapper as default should cause any problems in other browser.

  • Juriy Zaytsev

    Juriy Zaytsev August 4th, 2008 @ 08:57 PM

    Appending text to everything is silly : )

    Capability test should do just fine.

  • Tobias H. Michaelsen

    Tobias H. Michaelsen August 4th, 2008 @ 09:32 PM

    Testing for the buggy parsing behavior would result in a lot of overhead and extra code.

    I've attached an alternative patch (w/o the test) that just always sets a wrapper, but still uses the sniffer (but that could easily be omitted).

  • Tobias H. Michaelsen

    Tobias H. Michaelsen August 4th, 2008 @ 09:36 PM

    JDD: Didn't see your post before I wrote mine. I'm still not sure which approach I prefer.

  • Juriy Zaytsev

    Juriy Zaytsev August 4th, 2008 @ 09:37 PM

    @JDD

    Oh, my bad :)

    @Tobias

    The code size decrease is not really worth method reliability.

  • Tobie Langel

    Tobie Langel July 24th, 2009 @ 02:10 AM

    • Tag changed from dom, patched to patched, section:dom

    [not-tagged:"dom" tagged:"section:dom" bulk edit command]

  • T.J. Crowder

    T.J. Crowder November 16th, 2009 @ 04:50 PM

    • Assigned user cleared.

    [responsible:none bulk edit command]

  • Andrew Dupont

    Andrew Dupont October 18th, 2010 @ 12:40 AM

    • Assigned user set to “Andrew Dupont”
    • Tag changed from patched, section:dom to needs:discussion, patched, section:dom
    • Importance changed from “” to “Low”

    As far as I can tell, this is what we'd have to do in order to fix this. I've attached a patch. I'm not committing this, at least not yet, because it's an awful workaround and it makes me sad. But it makes the tests pass.

    This could go in one of several directions:

    1. We decide this is too ugly, someone finds an approach that isn't so awful, and we commit that instead.
    2. We decide this is too ugly, nobody finds a different approach, and we punt until a later release.
    3. We decide this is ugly, but we commit it anyway because we want this bug fixed.
  • GitHub Robot

    GitHub Robot November 2nd, 2010 @ 07:41 AM

    • State changed from “bug” to “resolved”

    (from [7c26a1e7cf891d74e2d2c32b238979e44e3cee19]) Ensure Element#update works with string content that includes a LINK tag in Internet Explorer. [#264 state:resolved] (Tobias H. Michaelsen, Andrew Dupont) http://github.com/sstephenson/prototype/commit/7c26a1e7cf891d74e2d2...

Please Sign in or create a free account to add a new ticket.

With your very own profile, you can contribute to projects, track your activity, watch tickets, receive and update tickets through your email and much more.

New-ticket Create new ticket

Create your profile

Help contribute to this project by taking a few moments to create your personal profile. Create your profile »

The Prototype JavaScript library.

Shared Ticket Bins

Referenced by

Pages