Edge浏览器加载ActiveX控件

news2024/9/23 5:21:52

 背景介绍

        新版Edge浏览器也是采用Chromium内核,虽然没有谷歌浏览器市场占有率高,但是依托微软操作系统的优势,Edge浏览器还是发展很强劲,占据着市场第二的位置。随着微软停止服务IE浏览器,曾经风光无限的IE浏览器页退出历史舞台,这导致大量曾经安全可靠、便捷易用的ActiveX控件无法使用。allWebPlugin中间件也应运而生,解决现代浏览器加载控件难的问题。

技术原理

       控件容器精准定位,与页面整体布局无缝衔接——通过不断研究谷歌、火狐源代码及浏览器H5技术,我们首次发现了一种页面元素定位控制控件容器窗口的方法,可以实现控件容器与页面整体布局无缝衔接。核心思路是在浏览器页面插入一个定位元素,通过H5技术计算定位元素在浏览器页面的位置,然后将控件容器窗口放到定位元素位置。当页面缩放比例或大小发生变化时,重复上述步骤。如此这般,即可实现控件容器窗口与页面整体布局无缝衔接。

        原汁原味的控件接口调用方式——为了方便用户集成,减少用户学习的时间。通过大量的试验,我们实现了通过javascript封装ActiveX或NPAPI原生接口,用户业务系统调用javascript封装类接口,就像调用浏览器ActiveX或NAPAI控件接口一样,做到用户业务系统小调整,即可实现业务系统升级改造,后续我们将通过VLC ActiveX 控件的例子进行讲解。

       一个容器支持所有控件——我们深入研究ActiveX控件、COM技术及NPAPI控件原理,查阅谷歌、火狐等浏览器控件相关开源代码,攻坚克难,实现了一个控件容器程序,加载所有ActiveX控件,无需为每个ActiveX控件提供不同的控件容器程序。

浏览器控件集成步骤

allWebPlugin中间件与浏览器、控件关系图

    业务系统调用PluginHostCnt创建allWebPlugin中间件,allWebPlugin中间件会嵌入浏览器页面,并在内部容器中创建客户ActiveX控件,根据控件标识实例化JS封装类对象,实现控件无缝嵌入浏览器及控件接口的调用。

Javascript封装控件接口

使用javascript脚本对ActiveX控件导出类的方法和属性进行封装,方便后续网页调用控件接口。例如:针对axvlc控件,首先新建一个allWebVLC.js文件,根据控件VLCPlugin2类,新建javascript的allWebVLCPlugin2(派生自NObject)类,并用javascript脚本封装控件VLCPlugin2类方法和属性。(如下图所示)

axvlc控件 VLCPlugin2 类

Javascript allWebVLCPlugin2

引入相关allWebPlugin中间件js文件

     为了页面加载控件,需要引入allWebPlugin.Common.js allWebPlugin.UI.js及控件封装js文件。例如,axvlc控件,需要引入allWebVLC.js控件封装js文件。如下图所示:

<script type="text/javascript" src="js/jquery.min.js"></script>

<script type="text/javascript" src="js/allWebPlugin.Common.js"></script>

<script type="text/javascript" src="js/allWebPlugin.UI.js"></script>

<script type="text/javascript" src="js/allWebVLC.js"></script>

添加页面canvas元素

      在需要展示控件的位置添加canvas页面元素。如下图所示:

<td valign="top"  border="1">

    <canvas id="pluginUI" width="1024" height="600">

         <p class="error">Sorry, It looks as though your browser does not support the canvas tag.</p>

         </canvas>

</TD>

创建控件容器及控件

         首先,实例化PluginHostCnt类,使用CreateContainer方法创建控件容器子窗口,然后使用createPlugin接口创建控件,并实例化allWebVLCPlugin2类。

控件javascript封装类接口调用

控件对象创建成功之后,实例化控件javascript封装类对象。可以像传统控件接口调用一样,调用控件javascript封装类对象的方法和属性。如下图所示:

控件事件响应

         为了响应控件事件,需要在控件创建时,注册待响应的控件事件,实现控件响应函数。如下图所示:

集成示例

链接:https://pan.baidu.com/s/1xUyQDzOabh7mU7J7TYhtig?pwd=z3q0 
提取码:z3q0 

如下图所示,下载allWebPlugin_x86_v2.0.0.16_beta_20240721.exe安装包。

演示效果

        allWebPlugin中间件不仅适合Edge浏览器,而且还可以支持谷歌、火狐、360等浏览器,下图展示Edge浏览器加载VLC播放视频效果,欢迎大家下载试用。

Edge浏览器加载VLC控件显示效果
Edge浏览器加载VLC控件播放结束事件回调效果

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1946669.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

LLM 大语言模型显存消耗估计与计算

LLM 大语言模型显存消耗估计与计算 1. LLM 大语言模型开发流程 在大模型&#xff08;如 LLaMA-7B、GPT-3 等&#xff09;的开发、训练、微调、推理和部署过程中&#xff0c;各个阶段的流程都涉及多个复杂的步骤。以下是详细的流程描述&#xff0c;涵盖训练和微调的区别&#…

docker相关内容学习

一、docker的四部分 二、镜像相关命令 三、容器相关命令

SpringCloud断路器的使用与原理解析

Spring Cloud断路器是在分布式系统中实现容错的一种方式。它的原理是通过在调用链路上添加断路器,当某个服务的调用出现故障或超时时,断路器会自动迅速地切换到快速失败模式,防止故障扩散,从而保护整个系统的稳定性。 Spring Cloud断路器的使用与原理解析如下: 一、使用断…

计算机网络知识点总结————物理层

前言 一、物理层的基本概念 物理层解决什么问题 物理层的主要特性 二、传输媒体 导引型传输媒体 同轴电缆 双绞线 光纤 非导引型传输媒体 三、数据通信的基础知识 1.术语 2.编码方式 总结 前言 我站在清醒和麻木的边缘&#xff0c;不能堕落也不能解脱 一、物理层的…

Godot学习笔记4——函数

GDScript中函数也叫方法或模块&#xff0c;与变量一样&#xff0c;包括自定义函数与内置函数。大部分内置函数可以对游戏内容产生实质性影响&#xff0c;少部分函数比较特殊。 一、函数定义 在Godot中&#xff0c;我们使用“func”来定义函数&#xff0c;后面跟函数名、括号和…

php仓库管理系统设计与实现

1.1 研究背景 随着经济一体化和电子商务的迅速发展&#xff0c;网络传播信息的速度打破了传统信息传递的模式&#xff0c;互联网的高速发展和计算机应用在各个高校进展迅速&#xff0c;更多信息化产品的突飞猛进&#xff0c;让现代的管理模式也发生了巨大的变化&#xff0c;本…

0503触发器的电路结构和工作原理

触发器的电路结构和工作原理 如何区分锁存器还是触发器&#xff0c; 看有没有这个三角符号&#xff0c;告诉是上升沿触发还是下降沿触发&#xff0c;没有三角符号就是电平触发。低电平触发就画个小圈。高电平触发就不画小圈。有小圈的三角就是下降沿触发 setup建立时间 hold 保…

ecshop网站部署

目录 步骤1 ecshop网站的部署 一、安装环境 二、设置开机启动 ​三、 测试php ​四、上传安装包 五、安装ecshop 步骤1 ecshop网站的部署 一、安装环境 yum install -y httpd mariadb-server php php-devel php-mysql 浏览器访问&#xff1a;192.168.30.2 二、设置开机启…

解决小程序web-view两个恶心问题

&#x1f9d1;‍&#x1f4bb; 写在开头 点赞 收藏 学会&#x1f923;&#x1f923;&#x1f923; 1.web-view覆盖层问题 问题由来 web-view 是一个 web 浏览器组件&#xff0c;可以用来承载网页的容器&#xff0c;会自动铺满整个页面。 所以这得多恶心。。。不仅铺满&…

集合的面试题和五种集合的详细讲解

20240724 一、面试题节选二、来自于b站人人都是程序员的视频截图 &#xff08;感谢人人都是程序员大佬的视频&#xff0c;针对于个人复习。&#xff09; 一、面试题节选 二、来自于b站人人都是程序员的视频截图 hashmap&#xff1a; 唯一的缺点&#xff0c;无序&#xf…

mysql之视图的创建以及查询;

一&#xff1a;数据库及其表的创建&#xff1a; mysql> create database mydb15_indexstu; Query OK, 1 row affected (0.00 sec)mysql> use mydb15_indexstu; Database changed mysql> create table student(-> sno int primary key auto_increment,-> sname …

js语法 proxy对象拦截方法详解,proxy代理一个对象(数组,函数)的操作方法

如果还不能理解什么是proxy代理可以参考&#xff1a;js语法---理解反射Reflect对象和代理Proxy对象_js代理对象-CSDN博客 proxy代理对象(数组&#xff0c;函数)&#xff0c;可以拦截的操作 apply---拦截方法的执行(包括直接执行&#xff0c;通过apply&#xff0c;call执行),和对…

【element ui】input输入控件绑定粘贴事件,从 Excel 复制的数据粘贴到输入框(el-input)时自动转换为逗号分隔的数据

目录 1、需求2、实现思路:3、控件绑定粘贴事件事件修饰符说明: 4、代码实现&#x1f680;写在最后 1、需求 在 Vue 2 和 Element UI 中&#xff0c;要实现从 Excel 复制空格分隔的数据&#xff0c;并在粘贴到输入框&#xff08;el-input&#xff09;时自动转换为逗号分隔的数据…

Pycharm 和虚拟环境的那些事?

背景: 我既有 python 又有Anaconda Pycharm新建虚拟环境: 只说两种方式 通过Virualenv Environment新建: 这里我们勾选上 Make available to all projects ,之后点击&#x1f197; 然后可以发现只有非常少的包,因为没有勾选继承 编译器的包 创建的虚拟环境一般目录如下&…

【Git多人协作开发】知识点总结

目录 知识点总结 1.创建dev分支开发 1.1在本地创建 1.1在远程创建&#xff08;推荐&#xff09; 2.远程分支和本地分支建立连接☞pull和push操作 2.1情况1 2.2情况2 2.3情况3 3.本地仓库对远程仓库的拉取pull操作 3.1情况1 3.2情况2 4.将开发分支的内容合并到远程m…

充电桩浪涌保护方案—保障充电设施安全稳定运行的关键

在当今新能源汽车蓬勃发展的时代&#xff0c;充电桩作为电动汽车的“加油站”&#xff0c;其重要性不言而喻。然而&#xff0c;由于其复杂的电气环境和暴露于户外的特点&#xff0c;充电桩容易受到浪涌的影响。浪涌可能来自雷电、电网故障、大功率设备的启停等&#xff0c;对充…

在 Windows 上安装 PostgreSQL

官网下载地址&#xff1a; https://www.enterprisedb.com/downloads/postgres-postgresql-downloadsWindows平台 官网直接提供exe安装包&#xff0c;没有手动安装的压缩包 postgresql-14.4-1-windows-x64.exe几个重要的安装选项 安装界面会指定服务程序和库两个路径&#xf…

5G赋能车联网,无人驾驶引领未来出行

无人驾驶车联网应用已成为智能交通领域的重要发展趋势。随着无人驾驶技术的不断进步和5G网络的广泛部署&#xff0c;5G工业路由器在无人驾驶车联网中的应用日益广泛&#xff0c;为无人驾驶车辆提供了稳定、高效、低时延的通信保障。 5G工业路由器的优势 低时延&#xff1a;5G网…

【STM32 HAL库】ADC

ADC&#xff0c;顾名思义就是模拟信号->数字信号ADC工作原理 分类&#xff1a; 并联比较型-----转换速度快-----成本高、功耗高、分辨率低 分压部分比较部分编码部分&#xff08;其中Vx为模拟电压输入 &#xff09; 逐次逼近型-----结构简单&#xff0c;功耗低-----转换速…

electron 网页TodoList应用打包win桌面软件数据持久化

参考&#xff1a; electron 网页TodoList工具打包成win桌面应用exe https://blog.csdn.net/weixin_42357472/article/details/140648621 electron直接打包exe应用&#xff0c;打开网页上面添加的task在重启后为空&#xff0c;历史没有被保存&#xff0c;需要持久化工具保存之前…