You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Vue.js中能否使用带HTML4 classid属性的object标签？如何实现？

avatar
API 探路者
2026-9-29
Vue迁移ActiveX控件相关问题解答

1. Vue是否支持HTML4语法

Vue本身不会限制你编写的HTML标签及属性，语法是否生效完全取决于运行环境的浏览器支持能力。你提到的classid是HTML4专为ActiveX控件设计的属性，HTML5标准已明确废弃，除了IE11及更早版本的IE浏览器，所有现代浏览器（Chrome、Edge、Firefox、国产双核浏览器的极速模式等）都不识别该属性，也不支持ActiveX控件运行，与是否使用Vue框架无关。

另外老代码中的language="javascript"属性也早已被HTML5废弃，迁移时可以直接删除，不影响功能。

2. 该场景下标签的使用方案

方案1：仅兼容IE11及更早版本IE浏览器

如果你的业务场景固定只能在旧IE环境运行，可以选择支持IE11的Vue2版本进行迁移，操作要点如下：

  • 若Vue模板编译时自动过滤了不识别的classid属性，可选择在mounted钩子中动态创建object元素，避免属性丢失
  • 不要直接通过id调用控件方法，使用Vue的ref绑定获取DOM元素后再调用，避免DOM未挂载或id冲突问题
  • 所有控件操作必须在组件挂载完成后执行

迁移后的Vue单文件组件示例代码：

<template>
  <div class="container">
    <input type="button" value="bar" @click="handleBar">
    <!-- 直接写object标签如果出现classid丢失的情况，就改用动态创建的方式 -->
    <!-- <object ref="FOO" classid="clsid:AnUUID"></object>
    <object ref="SAMPLE_API" classid="CLSID:AnUUID" width="0" height="0"></object> -->
  </div>
</template>

<script>
export default {
  mounted() {
    // 动态创建object控件，避免Vue模板过滤属性
    this.$refs.FOO = document.createElement('object')
    this.$refs.FOO.setAttribute('classid', 'clsid:AnUUID')
    document.body.appendChild(this.$refs.FOO)

    this.$refs.SAMPLE_API = document.createElement('object')
    this.$refs.SAMPLE_API.setAttribute('classid', 'CLSID:AnUUID')
    this.$refs.SAMPLE_API.width = 0
    this.$refs.SAMPLE_API.height = 0
    document.body.appendChild(this.$refs.SAMPLE_API)

    // 挂载完成后检测ActiveX安装状态
    this.checkActiveX()
  },
  methods: {
    handleBar() {
      const ret = this.$refs.FOO.bar()
      alert(ret)
    },
    checkActiveX() {
      try {
        new ActiveXObject("IniSX.SClient.1")
      } catch (e) {
        alert("请先安装SSO客户端程序后重试->业务认证登录，跳转至程序手动安装页面。")
        window.location.replace("http://sso.the.url/SCInstall.html")
        return
      }
      this.handleSSO()
    },
    handleSSO() {
      const ticket = this.$refs.SAMPLE_API.GetTicketAppWithEnc("APP_ID")
      if (ticket.length === 1) {
        if (ticket === 2) {
          alert("请登录")
        }
        this.$refs.SAMPLE_API.OpenLogin("www.the.url", ticket)
        this.noConfirmClose()
      } else {
        alert(ticket)
      }
    },
    noConfirmClose() {
      top.window.open('about:blank', '_self').close()
      top.window.opener = self
      top.self.close()
    }
  }
}
</script>

方案2：需要兼容现代浏览器

ActiveX控件已被所有现代浏览器淘汰，原有方案完全无法运行，必须替换技术实现：

  • 让客户端控件开发本地HTTP/WebSocket服务，前端通过调用本地端口接口与客户端交互
  • 替换为标准浏览器支持的SSO鉴权方案，如OAuth2、JWT等协议，完全去掉对客户端控件的依赖

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

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级，最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分)， 限时 9.9 元起

产品介绍相关文档
相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级，最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分)， 限时 9.9 元起

产品介绍相关文档
火山引擎 最新活动
全面开放
Doubao-Seedance-2.5全新模型升级

模型再升级,30秒超长叙事, 模态参考扩容

HOT
方舟Codingplan

模型自由，工具不限，最新支持 Deepseek-V4 系列、GLM-5.3 系列

HOT
方舟Agent plan

超全模态模型 × Harness 升级，最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列

HOT
新用户特惠专场

大模型19元起，Al应用9.9元畅享，新人首购爆款尽享优惠

最近更新时间：2026.09.29 18:45:07