使用jQuery动态添加VLC插件时IE自动将object宽高设为0的问题

这种情况我太熟悉了——IE对ActiveX控件的动态插入总是有各种奇怪的“自作主张”，尤其是VLC的axvlc控件，经常会把你设置好的宽高直接清零。给你几个亲测有效的解决办法：

方法一：用innerHTML插入而非jQuery直接append #

jQuery在处理IE下的ActiveX标签时，解析逻辑可能会出问题。换个思路，先创建一个空的容器元素，再把完整的object HTML字符串赋值给它的innerHTML，最后把容器加到页面里：

// 先准备好VLC插件的HTML字符串
var vlcHtml = '<object width="285" height="185" id="A9AC8F7084A4743A8198A6E1EF89BA1" classid="clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921" codebase="http://download.videolan.org/pub/videolan/vlc/last/win32/axvlc.cab" style="left: 0px; top: 0px; width: 285px; height: 185px;" events="True">' +
    '<param name="Src" value="rtsp://10.1.34.236:654/01000000-0001-BABE-0007-000F7C140DF5/live">' +
    '<param name="controls" value="false">' +
    '<param name="autostart" value="true">' +
    '<param name="allowfullscreen" value="false">' +
    '<embed name="A9AC8F7084A4743A8198A6E1EF89BA1" width="285" height="185" pluginspage="http://www.videolan.org" type="application/x-vlc-plugin" target="rtsp://10.1.34.236:654/01000000-0001-BABE-0007-000F7C140DF5/live" autoplay="false">' +
'</object>';

// 创建空容器并插入HTML
var container = $('<div></div>');
container.html(vlcHtml);
// 把容器加到目标位置
$('#your-target-container').append(container);

方法二：插入后强制重置宽高 #

如果还是用jQuery的append方式，那就在插入完成后立即手动重置object和embed的宽高属性及样式——IE可能在控件初始化时覆盖了这些值：

// 插入插件后立即执行
var vlcObj = $('#A9AC8F7084A4743A8198A6E1EF89BA1');
// 重置object的属性和样式
vlcObj.attr({width: 285, height: 185})
      .css({width: '285px', height: '185px'});
// 同时重置内部的embed标签
vlcObj.find('embed').attr({width: 285, height: 185});

方法三：延迟设置宽高（等控件加载完成） #

IE加载ActiveX控件需要一点时间，你可以等控件加载完成后再设置宽高。给object标签加上onload事件：

// 修改HTML字符串，加入onload事件
var vlcHtml = '<object width="0" height="0" id="A9AC8F7084A4743A8198A6E1EF89BA1" classid="clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921" codebase="http://download.videolan.org/pub/videolan/vlc/last/win32/axvlc.cab" style="left: 0px; top: 0px;" events="True" onload="setVLCSize()">' +
    '<param name="Src" value="rtsp://10.1.34.236:654/01000000-0001-BABE-0007-000F7C140DF5/live">' +
    '<param name="controls" value="false">' +
    '<param name="autostart" value="true">' +
    '<param name="allowfullscreen" value="false">' +
    '<embed name="A9AC8F7084A4743A8198A6E1EF89BA1" width="0" height="0" pluginspage="http://www.videolan.org" type="application/x-vlc-plugin" target="rtsp://10.1.34.236:654/01000000-0001-BABE-0007-000F7C140DF5/live" autoplay="false">' +
'</object>';

// 定义加载完成后的设置函数
function setVLCSize() {
    var obj = document.getElementById('A9AC8F7084A4743A8198A6E1EF89BA1');
    obj.width = 285;
    obj.height = 185;
    obj.style.width = '285px';
    obj.style.height = '185px';
    // 处理embed
    var embed = obj.getElementsByTagName('embed')[0];
    embed.width = 285;
    embed.height = 185;
}

为什么会出现这个问题？ #

本质上是IE对ActiveX控件的特殊处理机制：当它解析到带有classid的object标签时，会先加载对应的控件，这个过程中可能会重置元素的布局属性（比如宽高），导致你预先设置的值被覆盖。

内容的提问来源于stack exchange，提问作者sharpcodex