html - ActiveX控件 - 《好记性不如烂笔头 - 技术学习笔记》

ActiveX是一种控件，属于IE浏览器的插件，一般使用c++开发的可以运行Native代码的控件

在创建包括ActiveX程序时，主要的工作就是组件，一个可以自足的在ActiveX网络（Windows，Mac，Linux）中任意运行的程序。这个组件就是ActiveX控件。ActiveX是Microsoft为抗衡Sun Microsystems的JAVA技术而提出的，此控件的功能和java applet功能类似。

参考：https://www.cnblogs.com/cheery-go/p/15567411.html
由于可以运行Native Code所以给客户端用户带来很大的安全隐患
ActiveX 是IE独有的控件，微软的初衷是可以自动下载带有数字签名的ActiveX控件，不过并非所有的开发者都会申请数字证书，用户通过调整浏览器安全级别，浏览器可以自动下载ActiveX,因此带来了很多安全问题。
如何找到我们项目种的ActiveX
前端代码会使用Object标签来进行资源加载，如下：

<object id='myObj' classid='clsid:sdfasfasdf' ></object>

clsid对应的值可以在IE浏览器-管理加载项-工具栏和扩展中找到你安装的ActiveX控件，双击显示的相信信息中类ID对应
延申
CA锁的实现
CA锁可以实现一种登录机制和签章（广联达新疆交易）
使用
用户登陆之前，需要先插入CA锁（类似于一个USB），此时，网页会自动读取这把锁的账号信息
那，怎么做到读取的呢？
其实就是利用了ActiveX控件，查看项目代码可以发现，在项目进行加载的时候，会加载一个js，这个js里面会提前渲染除Active控件，如下图所示：

pluginDiv = document.createElement("div");
pluginDiv.id = "pluginDiv" + ctlName;
document.body.appendChild(pluginDiv);
pluginDiv.innerHTML = '<object id="' + ctlName + '" classid="CLSID:' + CLSID + '" style="HEIGHT:0px; WIDTH:0px"></object>';

上面我们已经说过了，承接ActiveX控件的话，前端就需要渲染一个object标签，并且如图所示进行定义
所以，当这把锁插入后，控件就会加载，然后读取锁内的信息了
注意：

这把锁可能还会往IE浏览器里面添加插件，如果用户想要使用控件的方法，则可以进行调用了
如果无法加载控件，还需要下载驱动

在vue中使用
监听ActiveX的方法，进行响应
在html中使用很简单

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  // for对应ActiveX控件，event对应监听的方法名称
   <script language="javascript" for="ShareSunReaderSDK" event="AfterControlReady">
    document.getElementById("ShareSunReaderSDK").FX_SignPDF_AddAboutLicense("xzu3X6dlBVyaBPw9L0eWazAXRbXsuXEn0y5DMEGbYXc8GLWYF8l7I6Xs1Z/seq2bkoNnomhWOmCRwtQMmdB1/kfI/E6GsKvL38o=");
    document.getElementById("ShareSunReaderSDK").XSOpenFile("http://www.share-sun.com/gaizhang/3.pdf", "");
    </script>
 </head>
 <body>
    <object classid="CLSID:358327D8-B2C5-402F-B1F5-DD89FAA68BFF" id="ShareSunReaderSDK"
        style="height: 800px; width:100%; margin-top: 0px;" 
        align="right">
    </object>
 </body>
</html>

如果是vue中，因为一个组件只能有一个script标签，并且设置for或者event属性也无效，所以只能通过动态创建的方式

<template>
<el-dialog
    title="test"
    :visible.sync="dialogVisible1"
    width="90%"
    height="600px"
    top="50px"
  >
    <div style="height: 60vh" id="obj">
      <object classid="CLSID:358327D8-B2C5-402F-B1F5-FESFFF" id="ShareSunReader"
        style="height: 100%; width:100%; margin-top: 0px;" 
        align="right">
      </object>
    </div>
  </el-dialog>
</template>
export default {
  mounted() {
    window._this = this;
  },
  methods: {
    // 监听ActiveX控件的方法进行逻辑处理——展示pdf
    getUp() {
      document.getElementById("ShareSunReader").fn("988xzu3X6dlBdVyaBPw9L0eWazAXRbXsuXEn0y5DMEGbYXc8GLWYF8l7I6Xs1Z/seq2bkoNnomhWOmCRwtQMmdB1/kfI/E6GsKvL38o=");
      document.getElementById("ShareSunReader").method("ddd.pdf", "");
    },
    showCover() {
      const _self = this;
      if (!!window.ActiveXObject || "ActiveXObject" in window) {
        //签章组件只支持ie浏览器
        this.dialogVisible1 = true;
        // 动态加入script标签
        this.$nextTick(() => {
          let sr = document.createElement('SCRIPT');
          sr.setAttribute('for', 'ShareSunReader');
          sr.setAttribute('language', 'javascript');
          sr.event = 'AfterControl';
          sr.appendChild(document.createTextNode('_this.getUp()'));
          document.getElementById('obj').appendChild(sr);
        })
      } else {
        this.$message({
          message: "请使用IE浏览器打开此页面",
          type: "warning",
        });
      }
      this.dialogVisible1 = true;
    },
    }
}