Chrome浏览器中Object标签加载.cab文件占用空白空间问题求助

这个问题其实挺典型的——Chrome早早就彻底放弃了对ActiveX控件的支持，而你用到的.cab文件正是ActiveX控件的载体，所以Chrome根本没法解析这个控件。但它不会自动隐藏这个object元素，反而会保留默认的尺寸（通常是150×30px左右），于是就出现了那块烦人的空白。

下面给你几个可行的解决办法：

1. 针对Chrome隐藏Object元素 #

你可以通过CSS或JS检测浏览器环境，只在Chrome中隐藏这个元素：

CSS方案 #

利用Chrome特有的CSS特性来定位：

/* 仅在Chrome中隐藏目标object元素 */
@media screen and (-webkit-min-device-pixel-ratio:0) {
    #SampleX {
        display: none !important;
        visibility: hidden !important;
        height: 0;
        width: 0;
    }
}

JavaScript方案 #

更精准的浏览器检测（虽然浏览器检测不是最优解，但这个场景下很实用）：

// 判断当前是否为Chrome浏览器
function isChrome() {
    return /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
}

if (isChrome()) {
    const objElement = document.getElementById('SampleX');
    if (objElement) {
        objElement.style.display = 'none';
        objElement.style.height = '0';
        objElement.style.width = '0';
    }
}

2. 替换为跨浏览器兼容方案 #

如果这个控件的功能是业务必需的，建议用跨浏览器支持的技术替代ActiveX：

• 用WebAssembly复刻原控件的核心功能
• 换成HTML5原生API或成熟的JS库实现对应功能
• 如果是桌面端的硬件交互、文件操作需求，可以考虑用Electron封装应用

3. 强制设置Object元素尺寸为0 #

如果暂时没法替换控件，也可以直接强制把object元素的尺寸设为0，这样即使Chrome不支持，也不会显示空白：

<div class="container">
    <object id="SampleX" codebase="../utils/SampleControl.cab" 
            classid="clsid:58F47D90-DB5D-HK8-B9B5-CHKHH786HJ67"
            style="height:0; width:0; display:block; visibility:hidden;">
        <param name="Visible" value="0">
    </object>
</div>

不过要注意，这个方法可能影响老版IE这类支持ActiveX的浏览器，最好配合浏览器检测，只在非IE环境下应用这个样式。另外你原来加的<param name="Visible" value="0">只对ActiveX控件本身生效，Chrome不识别这个参数，所以起不到隐藏作用。

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