Chrome、Edge、360及Firefox浏览器加载多个ActiveX插件的介绍

allWebPlugin简介

allWebPlugin 中间件是一款为用户提供安全、可靠、便捷的浏览器插件服务的中间件产品 ， **致力于将浏览器插件重新应用到所有浏览器。**它将现有ActiveX控件直接嵌入浏览器，实现插件加载、界面显示、接口调用、事件回调等。支持Chrome、Firefox、Edge、360等浏览器，接口调用友好、集成方便。为用户提供"信息化系统 + allWebPlugin + 插件 + 浏览器"的解决方案。

allWebPluginV2.0.0.20版本做了很大的改造，支持了一个页面加载多个插件；解决了插件与浏览器抢焦点；同一页面加载多个插件时，插件与插件之间抢焦点的问题。实现了在Chrome、Firefox、Edge、360等浏览器上加载ActiveX插件，与IE浏览器几乎一样的功能及体验。下面将通过allWebOffice Tab多标签实例的代码向大家展示如何在同一个网页加载多个ActiveX插件。

下载地址

链接：百度网盘请输入提取码

提取码：z3q0

如下图所示，下载allWebPlugin_x86_v2.0.0.20_alpha_演示包_20240908.zip安装包。
安装包截图

添加定位元素

首先，需要在正文及经办环节tab标签下，添加插件定位元素。如下图所示：

html 复制代码

<!--正文-->
<div style="height:0px;overflow:hidden;" id="tab_zw">
	<div id="DivID" style="width:100%;height:900px;">
		<text>输入焦点测试: </text><input type="text" name="title1" id="title1" value=""/>
			<!--<canvas id="pluginUI" width="1000" height="800">
				<p class="error">Sorry, It looks as though your browser does not support the canvas tag.</p>
			</canvas>-->
			<canvas id="pluginUI_ZW" style="margin-top: 20px;width:50%;height:50%">
				<p class="error">Sorry, It looks as though your browser does not support the canvas tag.</p>
			</canvas>

	</div>
</div>
<!--正文end-->
<!--经办环节-->
<div style="height:0px;overflow:hidden;" id="tab_jbhj">
	<div id="bd_jbhj" style="width:100%;height:100%;">
		<text>输入焦点测试: </text><input type="text" name="title2" id="title2" value=""/>
		<table style="width:100%;height:100%;">
		<tr style="width:100%;height:100%;">
		<td >
		 <canvas id="pluginUI_JB" style="margin-top: 20px;width:500px;height:450px">
				<p class="error">Sorry, It looks as though your browser does not support the canvas tag.</p>
		</canvas>
		</td>
		
		<td >
		<canvas id="pluginUI_JB2" style="margin-top: 20px;width:500px;height:450px">
				<p class="error">Sorry, It looks as though your browser does not support the canvas tag.</p>
		</canvas>
		</td>
		</tr>
		</table>
	 </div>
</div>
<!--经办环节end-->

创建插件容器及插件

与传统IE浏览器不同，Chrome、Edge、360及火狐浏览器创建ActiveX插件，需要使用allWebPkugin中间件提供的服务。具体如下：

javascript 复制代码

function CreateContainer(){
	var canvas_zw = document.getElementById('pluginUI_ZW');//定位元素
	var canvas_jb = document.getElementById('pluginUI_JB');//定位元素
	var canvas_jb2 = document.getElementById('pluginUI_JB2');//定位元素
	var license = "9y4LEm/V6Su9+CP9ION3CqBZzsnSyJW2BIOmkgGdrKd6LsGVXCWlcRBxGfVF1XOPzC9WxlN0wrsQJJzy/Sb5YUhnxibuGY6cwTXP6MALEUEQFzXbytCCYZ8yuWbKwaSdWw5/nsk02HtT/EqxC9jsQEwXfCiLGpeyww5MszBO4EV6/Whk4dpno9z1IP+gYlZ5emPuZWPcA0xfdPfMd8CdZ7O2Y1kH4iqJRcUDZpZLQZzRaaxD4GC6rmYjAT+0hOxf741S1EV6EjTzdZdllR2Gc3/ho/O+lqeG77Lq/sI7eGuRrB92QT4P/dmWmDpM0Qg9AAAA8AEAAQMCpzvCVYrodJHnQlzcchghAVhG8HkPd/M3WbD7ikYNYSMNpadQHw22md/os+H8in1qcUBIUHlshxFEKT84jEPIP39iTN7E4IqEACvPF8duWkErP8vRvrSSxA67jQEesJV2RkXphVUw20qAYDXse5UBsLuIlpsfae59Q3VuDFyGZ9K7Rj3fGG7lMrQxhNPj0IkDKfsa/4S2vDl43A4JLdGE8PyHMOxOGWIBwAzTQvOIA2gT2bC8bUP2HnHz//04r8CZ848wnMgZ8ifdtBGgPIIvhvhNvdHNW3d7GDWIFz7migklvNukCsVNhNjck73Co8JMQppp5n4RY5Ck0DdBVe1iogABAYICCgGCMEGy6w+KRf1qX5NoDdyEKnrHfuE5hco4f/fwKsNo3Dwo1sUFB9hbxusOUSAAyYDfvQWc4CdxoSf7kM4ojInlHHvTw0ppKCFV7H17iDOXdJFKZmkjeFCeubn3VezepCvW1+Z9s84M2uILZgIGw7eIQ/je0Bz+qEWyiqWbA4QYiTHzUwQtZyntNcqYpS0PxXXmV9I21wh48DIV/9DTeZW5OZwRcHivVXFaqW2uxngqGdbw1xyJ9AMhrGdt9S2R2rd1jzNq7ddiKN09TCt806vlF1zGAxb5zq6WjwPxeG7aoE33cTRnEg5WvNM4puhmYOWYi61D8j8lzXheUCJGpsw39CoAAAEOAAAAAUFXUEY=";	
	var installPackageUrl = "http://127.0.0.1:6651/install/allwebPlugin_x86_v2.0.1.16_20240806.exe";
	var installPackageVersion = "2.0.0.16";
	g_allWebPlugin = new allWebPlugin();
	if(g_allWebPlugin.IsInstall() == false){
		//未安装，需要手动安装
		if(confirm("allWebPlugin中间件未安装或未启动,是否立即安装？")){
			window.open(installPackageUrl, '_blank');
		}
	}else{
		//已安装，检测是否需要版本更新
		if(g_allWebPlugin.IsNewVersion(installPackageVersion) == false)
		{
			hostCnt_zw = g_allWebPlugin.createContainer(canvas_zw,"PluginContainer",license,false);//创建插件容器
			if(hostCnt_zw)
			{	
				hostCnt_zw.UI.ForceShowUI(false);//创建时隐藏插件,需要调用这句，隐藏插件
				hostCnt_zw.RegisterEvent("OnCreated;OnCommand;OnRibbonCtrlCommand;OnOLECommand");
				allWebOfficeAx_zw = CreatePlugin(hostCnt_zw);//创建插件
			}
			hostCnt_jb = g_allWebPlugin.createContainer(canvas_jb,"PluginContainer",license,false);
			if(hostCnt_jb)
			{	
				hostCnt_jb.UI.ForceShowUI(false);//创建时隐藏插件,需要调用这句，隐藏插件
				hostCnt_jb.RegisterEvent("OnCreated;OnCommand;OnRibbonCtrlCommand;OnOLECommand");
				allWebOfficeAx_jb = CreatePlugin(hostCnt_jb);
			}
			hostCnt_jb2 = g_allWebPlugin.createContainer(canvas_jb2,"PluginContainer",license,false);
			if(hostCnt_jb2)
			{	
				hostCnt_jb2.UI.ForceShowUI(false);//创建时隐藏插件,需要调用这句，隐藏插件
				hostCnt_jb2.RegisterEvent("OnCreated;OnCommand;OnRibbonCtrlCommand;OnOLECommand");
				allWebOfficeAx_jb2 = CreatePlugin(hostCnt_jb2);
			}
		}else{
			//需要升级
			alert("检测到升级包,立即升级。");
			g_allWebPlugin.UpdateVersion(installPackageUrl).then(function(data){
				if(data.code == 0)
				{	//检测是否安装成功
					var checkInstall = setInterval(function(){
						if(g_allWebPlugin.GetVersion() == installPackageVersion){
							window.location.reload();
							clearTimeout(checkInstall);
						}
					}, 1000);
					
				}
				else{
					window.open(installPackageUrl, '_blank');//直接下载包，手动安装
				}
			}).catch(function(strErr){
				window.open(installPackageUrl, '_blank');//直接下载包，手动安装
			});
		}
	}
}

javascript 复制代码

function CreatePlugin(hostCnt){
	var officePlugin;
	if(hostCnt == null)
		return officePlugin;
	//{6888ECA8-57D0-6E0E-9B9B-F1FF9B2DBD86} allWebOffice
	//{C7F277DC-6C47-AB2C-FB6A-070DC8BE7533} suwellreader
	//{D89F482C-5045-4DB5-8C53-D2C9EE71D025} 老东家iWebOffice2015
	//{9BE31822-FDAD-461B-AD51-BE1D1C159921}  VLC
	//{082ECC40-38F1-4E8F-82D3-216009A96686}  RSignReader
	var officePlugin = hostCnt.createProxyPlugin("{6888ECA8-57D0-6E0E-9B9B-F1FF9B2DBD86}");
	if(officePlugin != null)
	{
		officePlugin.GetDisplayStyle().ShowOpenProgress = false;
	}
	return officePlugin;
}

ActiveX插件接口调用

最后，调用插件对象接口，注意：调用插件读属性与传统调用存在差异，需要在属性后面加上"()"方可获取属性值（仅适合createProxyPlugin方法创建的插件对象）。

javascript 复制代码

/*
*打开远程大文档
*/
function openOnWebFile(){
	if(!g_allWebPlugin.ActivateContainer) return;
	var pluginUtilityObj = g_allWebPlugin.ActivateContainer.getPluginUtility();
	var httpclientObj = g_allWebPlugin.ActivateContainer.getHttpClient();
	httpclientObj.Clear();
	if (httpclientObj.Open(0, "http://127.0.0.1:6651/test2.docx", false)) {
		httpclientObj.Send().then(function(data){
			if (httpclientObj.GetStatus() == 200) {
				var varTempPath = pluginUtilityObj.GetTempPath();
				var varFile = pluginUtilityObj.GetTempFileName(varTempPath,"zso") + ".docx";
				httpclientObj.ResponseSaveToFile(varFile);
				g_allWebPlugin.ActivateContainer.ObjectAx.Open(varFile);
				g_allWebPlugin.ActivateContainer.ObjectAx.DeleteAfterClose = true;
			}
			else{
				alert("LoadFile test2.docx Status:" + httpclientObj.GetStatus() + ",请确保安装目录下web目录存在test2.docx");
			}
			httpclientObj.Close();
		});	
	 }
}

显示效果

下面展示了allWebOffice Tab标签示例效果，实现了在谷歌、火狐、360及Edge等浏览器同一页面加载多个插件的效果。
正文tab标签页加载电子表格文档

经办环节tab标签页，同时加载两个插件，打开Word文档