“Invalid argument” in IE 8 on jQuery.prepend() on flash objects

问题

Demo page.

When run in IE 8, this code yields an exception with "Invalid argument." as description and message, and this number: -2147024809

I'm using latest (1.7.1) jQuery. Is this a known bug? How to resolve?

var objs=$('object').not('object param[name="wmode"][value="transparent"]');
var appended = $('<param name="wmode" value="transparent"></param>');
objs.prepend(appended);

Html snippet:

<object width="Width in Pixels" height="Height in Pixels" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0">
  <param name="salign" value="lt">
  <param name="quality" value="high">
  <param name="scale" value="noscale">

  <param name="movie" value="http://geekfile.googlepages.com/flvplay.swf">
  <param name="FlashVars" value="&streamName=FLV_Video_URL&skinName=http://geekfile.googlepages.com/flvskin&autoPlay=true&autoRewind=true">
  <embed width="Width in Pixels" height="Height in Pixels" flashvars="&streamName=FLV_Video_URL&autoPlay=true&autoRewind=true&skinName=http://geekfile.googlepages.com/flvskin" quality="high" scale="noscale" salign="LT" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" src="http://geekfile.googlepages.com/flvplay.swf" wmode="transparent">
  </embed>
</object>

The error occurs on jquery.js line 5771:

this.insertBefore( elem, this.firstChild );

Update: This is not "a jQuery issue" - it happens with raw javascript.

This code throws:

function handle(object) {
  var html = object.innerHTML;

  // The following line throws an exception:
  // Also, 'html' is not empty or undefined at this point.
  object.innerHTML = '<param name="wmode" value="transparent"></param>' + html;  
}

回答1:

I'm not 100% sure about this off the top of my head, but encountered something like this before, and it was specific to the <object> tag. IE does not see this as part of the html dom, so manipulation with jquery returns a null object. The solution I remember working was html5shiv like, create an object element and append the param as a string instead of a jQuery object and all should be well.

Alternatively, you could wrap the flash in a div, then get that div's inner html, append to that html, then drop it back into the wrapper div.

回答2:

As Fresheyeball states, IE does not see <object/> as part of the DOM or rather does not allow modifications as soon it has been inserted into the document (whereas before insertion, it can be modified very well).

A plain and quite save solution to fix this is to modify the full outerHTML of the node. This will not cause a modification of the element but will remove it, recreate it, replace it and therefore not throw the above exception.

Example for jQuery:

$("object:has(> param[name=wmode][value=window]), object:not(:has(> param[name=wmode]))").each(replace);
function replace() {
  this.outerHTML = this.outerHTML.replace(/<(?:[^">]+|(["']).*?\1)*>/, '$&<param name="wmode" value="opaque"/>');
}

A similar re-rendering for <embed/> could be achieved as follows:

$("embed[wmode=window], embed:not([wmode])").attr("wmode", "opaque").wrap("<div/>").unwrap();

回答3:

The script below isn't exactly the 2 or 3 line fix I was hoping for, but I found this article very helpful. I modified it slightly and removed the check for jQuery, but it worked like a charm!

http://www.developersnippets.com/2010/12/04/how-to-add-wmodetransparent-for-flash-object-using-jquery-and-native-javascript/

来源：https://stackoverflow.com/questions/9150938/invalid-argument-in-ie-8-on-jquery-prepend-on-flash-objects

标签

javascript

jquery

flash