ActiveX控件

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

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

由于可以运行Native Code所以给客户端用户带来很大的安全隐患

ActiveX 是IE独有的控件, 微软的初衷是可以自动下载带有数字签名的ActiveX控件,不过并非所有的开发者都会申请数字证书,用户通过调整浏览器安全级别,浏览器可以自动下载ActiveX,因此带来了很多安全问题。

如何找到我们项目种的ActiveX

前端代码会使用Object标签来进行资源加载,如下:

js 复制代码
<object id='myObj' classid='clsid:sdfasfasdf' ></object>

clsid对应的值可以在IE浏览器-管理加载项-工具栏和扩展中 找到你安装的ActiveX控件,双击显示的相信信息中 类ID对应

延申

CA锁的实现

CA锁可以实现一种登录机制和签章

使用

用户登陆之前,需要先插入CA锁(类似于一个USB),此时,网页会自动读取这把锁的账号信息

那,怎么做到读取的呢?

其实就是利用了ActiveX控件,查看项目代码可以发现,在项目进行加载的时候,会加载一个js,这个js里面会提前渲染除Active控件,如下图所示:

ini 复制代码
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中使用很简单

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属性也无效,所以只能通过动态创建的方式

js 复制代码
<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;
    },
    }
}

参考:www.cnblogs.com/cheery-go/p...

相关推荐
国家不保护废物4 分钟前
多模态模型数据传输的秘密武器:html5对象Blob深度解析
前端·面试·html
用户2519162427114 分钟前
Canvas之概述,画布与画笔
前端·javascript·canvas
南方kenny4 分钟前
前端小知识:搞懂 BFC块级格式化上下文,告别面试“拦路虎”!
前端·css·面试
邵洛5 分钟前
前端导出excel表格并修改导出表格样式
前端
风舞5 分钟前
JavaScript 核心概念及代码示例的梳理
前端
学长学姐我该怎么办7 分钟前
从零开始学前端html篇2
前端·html
尘世中一位迷途小书童8 分钟前
从零实现 Canvas 图形拖拽:让你的网页动起来!
前端
mrsk9 分钟前
JavaScript之变量的解构赋值全面解析(●'◡'●)
前端·javascript·面试
归于尽9 分钟前
回调函数在Node.js中是怎么执行的?
前端·javascript·node.js
浏览器API调用工程师_Taylor14 分钟前
Look my eyes 都2025年了,你还不会将重复的事情自动化?
前端·javascript·爬虫