What's up with innerHTML and <embed>?

StackOverflow https://stackoverflow.com/questions/437086

Question

I'm trying to fix a bug in a rich text editor I'm using, which causes <embed> tags to be inserted without their closing tag (which screws the output up completely). I've isolated the problem to this operation:

// body is a <body> tag
body.innerHTML = '<embed src="http://example.com/whatever"></embed>';

No fancy code, just Firefox's innerHTML assignment. You should be able to duplicate the error in Firebug like so:

>>> document.body.innerHTML = "<embed></embed>"
"<embed></embed>"
>>> document.body.innerHTML
"<embed>"

Is there a workaround for this? I need the tag, but I can't justify rebuilding/replacing the entire rich text editor because of one crappy edge case.

I can't convert this to something like document.createElement('embed'), because real-world input to this editor can easily include a few paragraphs of text wrapped around the <embed>; innerHTML is, on paper, perfect for this use case, I just can't get it to work with an <embed>.

Was it helpful?

Solution

This might not be an answer to your problem, but <embed> was not part of any standardized version of HTML until HTML5, according to W3C.

OTHER TIPS

Although <embed> is not a part of a standard html, it has been widely implemented and is, therefore, a de-facto standard.

That said, I'm running Firefox 3 (MineField v3.0.0.5) and am getting slightly unexpected, but altogether correct functionality. I was expecting the exact HTML to be put into the element I selected, but instead I got clean html.

Since <embed is an empty tag (that is, it cannot have contents, only attributes), Firefox turns this

<embed attribute="value"></embed>

into 

<embed  attribute="value"/>

, which is a prefectly valid closed tag. It does the same on other empty tags, such as <input /> and <image>

At the this page you can see this in action. The scriptless version of the page has an embedded video (youtube) inside of a bright pink div. The script steals its contents and places it into the body as innerHTML.

This reminds me of the problems document.write had/has with <script /> tags.

Lies. Don't answer SO questions right before bed.

I tried the following in Firebug 

//break up initial embed into single chunks
document.body.innerHTML = "<e"+"mbe"+"d></embed>"

and got the expected to show up when I checked the value of innerHTML. The idea here is to break up the initial string into multiple concatenated strings. Stupid, but a possible work-around.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top