CN117873601A - 一种控制浏览器插件容器窗口的方法 - Google Patents

Abstract

本发明涉及浏览器插件领域，公布了一种控制浏览器插件容器窗口的方法：首先在浏览器页面***一个用于定位的页面元素，创建一个无边框的插件容器窗口，在插件容器窗口加载插件（如ActiveX插件、NPAPI插件等），当页面元素位置或大小变化时，插件容器窗口实时根据页面元素信息更新其自身位置和大小，使插件容器窗口按照浏览器页面布局规则，精准的依附在浏览器页面元素位置；在浏览器打开提示对话框等操作时，采集插件容器窗口界面图像，隐藏插件容器窗口，并将插件容器窗口界面图像在浏览器页面元素上展示。使用户视觉上和操作上感觉不到插件容器窗口的存在，就像浏览器直接加载插件一样似的。如此，将大大减少采集容器窗口界面图像、显示插件容器窗口图像、处理鼠标键盘事件工作，降低计算机资源消耗；同时，也避免了传统插件容器窗口弹窗方案中，插件容器窗口显示突兀，遮挡页面其他元素（提示框、菜单等）等问题。

Description

一种控制浏览器插件容器窗口的方法

技术领域

本发明涉及浏览器领域，尤其涉及一种控制浏览器插件容器窗口的方法。

背景技术

浏览器插件是浏览器的重要组成部分，丰富浏览器的能力和应用。但出于对安全性的考虑，因为Active X、NPAPI、PPAPI插件可以窃取操作***底层资源，容易发起恶意攻击，所以，各浏览器对插件的支持越来越弱，截止2022年10月底，Chrome发布的107版本及Edge等浏览器停止支持PPAPI插件运行，至此市面上主流浏览器都不再支持插件技术。但在很多大型OA办公应用等场景，依然离不开浏览器插件，因此，急需一种简单高效的方法解决浏览器加载插件的行业问题。

为了解决浏览器加载插件的问题，前期本人发明了《一种浏览器加载插件的装置和方法》（申请号：2022110742638）。虽然，该发明可以解决所有浏览器加载插件的问题及传统插件容器窗口弹窗体验差的问题，但是该发明需要实时采集容器窗口界面图像、显示界面图像、处理鼠标键盘事件，这导致***资源消耗比较大，对计算机配置要求高。

在传统插件容器窗口弹窗方案使用方面，有企业实现浏览器页面控制插件容器窗口位置，虽然该方案能做到根据页面属性信息控制插件容器窗口位置，但是不能做到准确的定位插件容器窗口与页面，插件容器窗口与页面元素的相对位置。因此，当浏览器页面元素布局发生变化时，极难根据指定位置坐标，设置插件容器窗口与页面及页面元素相对位置，与浏览器页面布局效果保持一致；此外，由于不同浏览器页面元素布局存在差异，开发人员根据经验指定的位置信息，不能满足所有浏览器页面显示需要，只能根据已知浏览器显示情况，指定不同的位置信息；这增加了开发人员维护插件容器窗口位置工作负担。由于本方案天然存在遮挡页面元素的问题，由于插件容器窗口定位不准将遮挡页面元素，无论从视觉上还是操作上都非常影响用户体验。

为此，本人结合发明专利《一种浏览器加载插件的装置和方法》和传统插件容器窗口弹窗方案，发明一种控制浏览器插件容器窗口的方法。

首先在浏览器页面***一个用于定位的页面元素，同时创建一个无边框的插件容器窗口，在插件容器窗口加载插件（如ActiveX插件、NPAPI插件等），当页面元素位置或宽高变化时，插件容器窗口实时根据浏览器页面元素信息更新其自身位置和宽高，使插件容器窗口按照浏览器页面布局规则，精准的依附在浏览器页面元素位置；在浏览器打开提示对话框等操作时，采集插件容器窗口界面图像，并将插件容器窗口界面图像在浏览器页面元素上展示出来，隐藏插件容器窗口，避免了插件容器窗口遮挡提示对话框。从而让用户视觉和操作上感觉不到插件容器窗口的存在，就像浏览器直接加载插件一样似的。如此，将大大减少发明专利《一种浏览器加载插件的装置和方法》采集容器窗口界面图像、显示插件容器窗口图像、处理鼠标键盘事件工作，有效降低计算机资源消耗；同时，也避免了传统插件容器窗口弹窗方案中，插件容器窗口显示突兀，遮挡其他页面元素（提示框、菜单等）的问题。

发明内容

本发明克服传统插件容器窗口弹窗方案及专利《一种浏览器加载插件的装置和方法》(申请号：2022110742638)的不足，发明了一种控制浏览器插件容器窗口的方法。

本方法中参考或直接使用发明专利《一种浏览器加载插件的装置和方法》部分方法和装置，仅为了更好的说明本方法原理，不用来限制本方法保护范围。

一种控制浏览器插件容器窗口的方法：包含基于浏览器页面元素定位插件容器窗口位置和大小的方法、插件容器窗口与浏览器页面元素交互的方法。

优选地，基于浏览器页面元素定位插件容器窗口位置和大小的方法，包括以下步骤：

步骤一、***浏览器页面元素，创建所述插件容器窗口。在浏览器页面需要显示所述插件容器窗口区域***浏览器页面元素，用于定位所述插件容器窗口位置，后续将其简称为定位元素。参照发明专利《一种浏览器加载插件的装置和方法》中所述浏览器创建插件虚拟桌面运行的方法，创建所述插件容器子***，所述插件容器子***在用户桌面内创建所述插件容器窗口，并隐藏所述插件容器窗口；

优选地，本方法直接在用户操作桌面创建所述插件容器窗口，不需要创建虚拟桌面；

优选地，当所述插件容器窗口不能创建为浏览器窗口的子窗口时，需要监听浏览器窗口位置变化，来调整所述插件容器窗口位置。

步骤二、采集定位相关信息。使用JavaScript脚本采集浏览器信息（包括但不限于浏览器宽高信息）、浏览器页面信息（包括但不限于页面宽高、页面缩放比、垂直或水平滚动条是否存在、页面滚动条宽度信息）、浏览器定位元素信息（包括但不限于定位元素宽坐标及宽高信息）。将上述信息统称为S1，将所述S1信息、位置更新命令CMD01封装成命令数据包P1。

步骤三、传送定位相关信息。参照发明专利《一种浏览器加载插件的装置和方法》中所述浏览器JavaScript脚本调用插件方法和属性的方法，将所述命令数据包P1从所述插件交互子***，经过所述浏览器插件服务子***，发送给所述浏览器插件容器子***。

步骤四、计算所述浏览器定位元素在屏幕上的位置及宽高：所述插件容器子***接收所述命令数据包P1，解析命令信息，调用所述插件容器子***位置更新命令方法。获取上述步骤二中所述S1信息，结合浏览器窗口在用户屏幕中的位置和宽高信息，根据浏览器窗口、浏览器页面、所述定位元素之间位置关系，精准计算出所述浏览器定位元素在屏幕中的位置及宽高；

进一步，根据浏览器信息，可以获取浏览器工具条高度toolHeight,浏览器页面宽度b_width,浏览器页面高度b_height；

进一步，根据所述定位元素信息，可以获取所述定位元素在视图可见区域坐标（e_left,e_top）及宽高(e_width,e_height)；

进一步，可以通过***接口，获取浏览器窗口的屏幕坐标（c_left,c_top）及宽高（c_width,c_height）；

进一步，使用上述信息，根据浏览器窗口、浏览器页面、所述定位元素之间位置关系，精准计算所述插件容器窗口在屏幕中的位置（d_left,d_top）及宽高（d_width,d_height）。即：

d_left = c_left + e_left

d_top = c_top + toolHeight + e_top

d_width = e_width

d_height = e_height

进一步：

当e_left小于零时，表示所述插件容器窗口越过浏览器页面左边界，此时：

d_left = c_left 且d_width = e_width + e_left

当e_top小于零时，表示所述插件容器窗口越过浏览器页面上边界，此时：

d_top = c_top + toolHeight且 d_height = e_height + e_top

当 e_left + e_width 大于 b_width时，表示所述插件容器窗口超过浏览器右边界，此时：d_width = b_width - e_left

当 e_top + e_height 大于 b_height时，表示所述插件容器窗口超过浏览器下边界，此时：d_height = b_height - e_top

进一步，若页面存在滚动条时，当所述插件容器窗口在右边界或下边界时，d_width 或 d_height 还需减去滚动条宽度；

进一步，当d_width 等于或小于零或 d_height 等于或小于零时，表示所述插件容器窗口不在页面可视区域内，需隐藏所述插件容器窗口。当d_width 大于零 且 d_height 大于零时，需显示所述插件容器窗口；

第五步、控制所述插件容器窗口位置和宽高及显示状态，根据步骤四计算的所述浏览器定位元素在屏幕的位置和宽高信息，控制所述插件容器窗口位置和宽高，同时调整插件在所述插件容器窗口的位置和宽高。若所述定位元素在屏幕宽及高大于零时，需要显示所述插件容器窗口；若所述定位元素在屏幕宽或高小于或等于零时，说明所述定位元素不在浏览器页面视图可见区域，需要隐藏所述插件容器窗口；

进一步，为了更好的达到滚动及视图缩放效果，须调整插件在所述插件容器窗口里的位置和大小；

优选地：包括但不限于所述插件容器窗口显示时、浏览器窗口大小发生变化时、页面视图缩放时、页面布局变化时、页面水平方向或垂直方向滚动时，执行上述步骤二、步骤三、步骤四、步骤五过程，实现所述插件容器窗口实时依附在所述浏览器定位元素上。

优选地，插件容器窗口与浏览器页面元素交互的方法，包括以下步骤：

步骤一、隐藏所述插件容器窗口。所述浏览器插件容器子***采集所述插件容器窗口界面图像，隐藏所述插件容器窗口。根据《一种浏览器加载插件的装置和方法》中所述浏览器展示插件界面图像的方法，将所述插件容器窗口界面图像数据，发送给所述浏览器插件交互子***，所述浏览器插件交互子***解析获取所述插件容器界面图像，并在所述插件界面展示模块显示所述插件容器窗口界面图像。

步骤二：显示所述其他页面元素。可在浏览器页面可视区域内，任何位置展示和操作所述其他页面元素。

步骤三：关闭或隐藏所述其他页面元素，显示所述插件容器窗口。首先关闭或隐藏所述其他页面元素，然后按照所述基于浏览器页面元素定位插件容器窗口位置和大小的方法中步骤二、步骤三、步骤四、步骤五，控制所述插件容器窗口位置和大小以及显示状态；

进一步，当所述定位元素响应鼠标键盘事件时，应立即显示所述插件容器窗口，响应用户操作，同时隐藏所述其他页面元素，有效避免出现页面元素遮挡的情况。

本发明有益效果

本发明是结合发明专利《一种浏览器加载插件的装置和方法》与传统插件容器窗口弹窗方案创新发明而来，吸取两种方案的优点，实现1+1大于2的效果：使所述插件容器窗口精准的依附在浏览器定位元素位置；同时，巧妙地避免了所述插件容器窗口遮挡页面元素的问题。使用户无论在视觉上，还是操作上感觉不到所述插件容器窗口的存在，就像插件在浏览器直接加载一样似的，实现插件与浏览器的完美融合。

所述插件容器窗口可以精准依附在浏览器定位元素上，并随所述浏览器定位元素在浏览器布局中位置变化而变化，有效解决了浏览器插件窗口与浏览器页面、浏览器其他页面元素相对位置，与浏览器页面布局效果不一致的行业难题。

本方法不限制浏览器，不限操作***，无需修改现有插件产品，即可实现在谷歌、火狐等浏览器中保持原有操作习惯使用，让现有存量插件产品重新焕发生机，具有很强的实用价值。

减轻插件集成难度，开发人员无需计算指定所述插件容器窗口位置及大小，只需要将当前浏览器、浏览器页面、浏览器定位元素相关信息发送给所述插件容器子***，即可实现所述插件容器窗口精准依附所述定位元素上，可以通过控制所述定位元素位置和大小，来控制所述插件容器窗口。

避免了插件容器窗口遮挡其他页面元素的问题。当需要在插件界面展示其他页面元素时，可使用所述定位元素展示插件界面图像，能够支持页面层次复杂应用场景，提升了产品的适用性。

大大减少采集容器窗口界面图像、显示所述插件容器窗口图像、处理鼠标键盘事件工作，有效降低计算机资源消耗，降低技术实现难度，提升了产品稳定性。

附图说明

图1是本发明的结构原理图；

图2是本发明基于浏览器页面元素定位插件容器窗口位置和大小方法的流程图；

图3是浏览器、浏览器页面、定位元素位置关系图；

图4是本发明插件容器窗口与浏览器定位元素交互的的流程图；

图5是插件容器窗口遮挡浏览器页面元素效果图；

实施方式

下面将结合附图和实施例，对本发明的具体实施方式作进一步详细描述。以下实施例用于说明本发明，但不用来限制本发明的范围。

图2是本发明基于浏览器页面元素定位插件容器窗口位置和大小方法的流程图，其具体步骤如下：

步骤201：***浏览器页面元素，创建所述插件容器窗口。在浏览器页面需要显示所述插件容器窗口区域***浏览器页面画布canva元素，用于定位所述插件容器窗口位置，后续将其简称为定位元素。根据图1结构原理图，参照发明专利《一种浏览器加载插件的装置和方法》中所述浏览器创建插件虚拟桌面运行的方法，创建所述插件容器子***，所述插件容器子***在用户桌面内创建无边框的所述插件容器窗口，并隐藏所述插件容器窗口。

在linux环境下，可以将所述插件容器窗口创建成浏览器窗口的子窗口，子窗口可以随父窗口移动而移动一定；减少监听浏览器窗口位置变化过程。

在windows***中，浏览器使用Direct3D技术渲染窗口，将遮挡子窗口界面，因此，不宜将所述插件容器窗口创建成浏览器窗口的子窗口。所述插件容器子***需要监听浏览器窗口位置变化，来调整所述插件容器窗口位置。

步骤202：采集定位相关信息。使用JavaScript脚本采集浏览器信息（包括但不限于浏览器宽高信息）、浏览器页面信息（包括但不限于页面宽高、页面缩放比、垂直或水平滚动条是否存在、页面滚动条宽度信息）、浏览器定位元素信息（包括但不限于定位元素宽坐标及宽高信息）。将上述信息统称为S1，将所述S1信息、位置更新命令CMD01封装成命令数据包P1。

举一个具体例子说明，步骤202采集所述定位元素定位相关信息，根据html5规范，浏览器宽高信息为window.outerWidth、window.outerHeight；所述浏览器页面信息中页面宽度为window.innerWidth、window.innerHeight；页面缩放比为window.devicePixelRatio；水平滚动条宽度信息可通过计算获取（例如滚动条宽度可以通过window.innerHeight - body.clientHeight获取）；所述浏览器定位元素坐标及宽高信息可以通过所述定位元素的getBoundingClientRect方法获取。

步骤203：传送定位相关信息。根据图1结构原理图，参照发明专利《一种浏览器加载插件的装置和方法》中所述浏览器JavaScript脚本调用插件方法和属性的方法，将所述命令数据包P1从所述插件交互子***，经过所述浏览器插件服务子***，发送给所述浏览器插件容器子***。

步骤204：计算所述浏览器定位元素在屏幕上的位置及宽高：根据图1结构原理图，所述插件容器子***接收所述命令数据包P1，解析命令信息，调用所述插件容器子***位置更新命令方法。获取上述步骤202中所述S1信息，结合浏览器窗口在用户屏幕中的位置和宽高信息，根据图3所示浏览器窗口、浏览器页面、浏览器定位元素之间位置关系，精准计算出所述浏览器定位元素在屏幕中的位置及宽高；

举一个具体例子说明，方便理解本实施示例，约定页面缩放比为1；根据浏览器HTML5规范，获取下列信息：

浏览器工具条高度toolHeight = window.outerHeight - window.innerHeight;

浏览器页面宽度b_width = window.innerWidth;

浏览器页面高度b_height = window.innerHeight;

所述定位元素左坐标e_left =getBoundingClientRect().left;

所述定位元素上坐标e_top =getBoundingClientRect().top;

所述定位元素宽度为e_width = getBoundingClientRect().width

所述定位元素高度为e_height = getBoundingClientRect().height

在windows***中，可以通过***接口GetWindowRect，获取浏览器窗口的屏幕坐标（c_left,c_top）及宽高（c_width,c_height）；

进一步，使用上述信息，按照图3所示浏览器、浏览器页面、定位元素位置关系，精准计算所述插件容器窗口在屏幕中的位置（d_left,d_top）及宽高（d_width,d_height）。即：

d_left = c_left + e_left

d_top = c_top + toolHeight + e_top

d_width = e_width

d_height = e_height

进一步：

当e_left小于零时，表示所述插件容器窗口越过浏览器页面左边界，此时：

d_left = c_left 且d_width = e_width + e_left

当e_top小于零时，表示所述插件容器窗口越过浏览器页面上边界，此时：

d_top = c_top + toolHeight且 d_height = e_height + e_top

当 e_left + e_width 大于 b_width时，表示所述插件容器窗口超过浏览器右边界，此时：d_width = b_width - e_left

当 e_top + e_height 大于 b_height时，表示所述插件容器窗口超过浏览器下边界，此时：d_height = b_height - e_top

进一步，若页面存在滚动条时，当所述插件容器窗口在右边界或下边界时，d_width 或 d_height 还需减去滚动条宽度；

进一步，当d_width 等于或小于零 或 d_height 等于或小于零时，表示所述插件容器窗口不在页面可视区域内，需隐藏所述插件容器窗口。当d_width 大于零 且 d_height 大于零时，需显示所述插件容器窗口。

步骤205、控制所述插件容器窗口位置和宽高及显示状态，根据步骤四计算的所述浏览器定位元素在屏幕的位置和宽高信息，控制所述插件容器窗口位置和宽高，同时调整插件在所述插件容器窗口的位置和宽高。若所述定位元素在屏幕宽及高大于零时，需要显示所述插件容器窗口；若所述定位元素在屏幕宽或高小于或等于零时，说明所述定位元素不在浏览器页面视图可见区域，需要隐藏所述插件容器窗口；

优选地，包括但不限于：所述插件容器窗口显示时、浏览器窗口大小发生变化时、页面视图缩放时、页面布局变化时、页面水平方向或垂直方向滚动时，执行上述步骤202、步骤203、步骤204、步骤205过程，实现所述插件容器窗口实时依附在所述浏览器定位元素上。

图4为所述插件容器窗口与所述浏览器定位元素交互方法的流程图，本方法将避免图5所示插件容器窗口遮挡页面元素的问题，其具体步骤如下：

步骤401、隐藏所述插件容器窗口。根据图1结构原理图，所述浏览器插件容器子***采集所述插件容器窗口界面图像，隐藏所述插件容器窗口。根据《一种浏览器加载插件的装置和方法》中所述浏览器展示插件界面图像的方法，将所述插件容器窗口界面图像数据，发送给所述浏览器插件交互子***，所述浏览器插件交互子***解析获取所述插件容器界面图像，并在所述插件界面展示模块显示所述插件容器窗口界面图像。

步骤402：显示所述其他页面元素。可在浏览器页面可视区域内，任何位置展示和操作所述其他页面元素。

步骤403：关闭或隐藏所述其他页面元素，显示所述插件容器窗口。首先关闭或隐藏所述其他页面元素，然后按照所述基于浏览器页面元素定位插件容器窗口位置和大小方法中步骤202、步骤203、步骤204、步骤205，控制所述插件容器窗口位置和大小以及显示状态；

进一步，当所述定位元素响应鼠标键盘事件时，应立即显示所述插件容器窗口，响应用户操作，同时隐藏所述其他页面元素，有效避免出现页面元素遮挡的情况。

以上仅为本发明的较佳实施例而已，并不用以限制本发明，凡在本发明的精神和原则之内，所做的任何修改、等同替换、改进等，均应包含在本发明保护的范围之内。

Claims (8)

1.一种控制浏览器插件容器窗口的方法，其特征在于：包含如下方法：

M1：基于浏览器页面元素定位插件容器窗口位置和大小的方法；

M2：插件容器窗口与浏览器页面元素交互的方法。

2.如权利要求1所述的方法,其特征在于，所述方法M1基于浏览器页面元素定位插件容器窗口位置和大小的方法，包括以下步骤：

S11：***浏览器页面元素，创建所述插件容器窗口；

S12：采集定位相关信息；

S13：传送定位相关信息；

S14：计算浏览器定位元素在屏幕上的位置及宽高；

S15：控制插件容器窗口位置和宽高及显示状态。

3.根据权利要求2所述方法M1基于浏览器页面元素定位插件容器窗口位置和大小的方法，其特征在于：所述步骤S11***浏览器页面元素，创建所述插件容器窗口：在浏览器页面需要显示所述插件容器窗口区域***浏览器页面元素，用于定位所述插件容器窗口位置，后续将其简称为定位元素，创建所述插件容器子***，所述插件容器子***在用户桌面内创建所述插件容器窗口，并隐藏所述插件容器窗口。

4.根据权利要求2所述方法M1基于浏览器页面元素定位插件容器窗口位置和大小的方法，其特征在于：所述步骤S12采集定位相关信息：使用JavaScript脚本采集浏览器信息（包括但不限于浏览器宽高信息）、浏览器页面信息（包括但不限于页面宽高、页面缩放比、垂直或水平滚动条是否存在、页面滚动条宽度信息）、浏览器页面元素信息（包括但不限于页面元素宽坐标及宽高信息）。

5.根据权利要求2所述方法M1基于浏览器页面元素定位插件容器窗口位置和大小的方法，其特征在于：所述步骤S13传送定位相关信息：将所述步骤S12中所述定位相关信息从所述插件交互子***，经过所述浏览器插件服务子***，发送给所述浏览器插件容器子***。

6.根据权利要求2所述方法M1基于浏览器页面元素定位插件容器窗口位置和大小的方法，其特征在于：所述步骤S14计算浏览器定位元素在屏幕上的位置及宽高：根据所述步骤S12中所述定位相关信息，结合浏览器窗口在设备屏幕中的位置和宽高信息；根据浏览器窗口、浏览器页面、浏览器定位元素之间位置关系，精准计算出所述浏览器定位元素在屏幕中的位置及宽高。

7.根据权利要求2所述方法M1基于浏览器页面元素定位插件容器窗口位置和大小的方法，其特征在于：所述步骤S15控制插件容器窗口位置和宽高及显示状态：根据所述步骤S14计算所述浏览器定位元素在屏幕上的位置及宽高，控制所述插件容器窗口位置和宽高，同时调整插件在所述插件容器窗口的位置和宽高。若所述定位元素在屏幕宽及高大于零时，需要显示所述插件容器窗口；若所述定位元素在屏幕宽或高小于或等于零时，说明所述定位元素不在浏览器页面视图可见区域，需要隐藏所述插件容器窗口。

8.如权利要求1所述的方法,其特征在于，所述方法M2插件容器窗口与浏览器页面元素交互的方法，包括以下步骤：

S21、隐藏所述插件容器窗口，其特征在于：先采集所述插件容器窗口界面图像，然后隐藏所述插件容器窗口；将所述插件容器窗口界面图像数据，发送给所述浏览器插件交互子***；最后将插件容器窗口界面图像在浏览器页面元素上显示；

S22、显示所述其他页面元素，其特征在于：可在浏览器页面可视区域内，任何位置展示和操作所述其他页面元素；

S23、关闭或隐藏所述其他页面元素，显示所述插件容器窗口；其特征在于：首先关闭或隐藏所述其他页面元素，然后按照权利要求2中所述步骤S12、步骤S13、步骤S14、步骤S15，控制所述插件容器窗口位置和大小以及显示状态。