CN107562454A - Cross-browser real-time web page synchronization device and implementation method - Google Patents

Cross-browser real-time web page synchronization device and implementation method Download PDF

Info

Publication number
CN107562454A
CN107562454A CN201710692502.9A CN201710692502A CN107562454A CN 107562454 A CN107562454 A CN 107562454A CN 201710692502 A CN201710692502 A CN 201710692502A CN 107562454 A CN107562454 A CN 107562454A
Authority
CN
China
Prior art keywords
browser
module
event
kernel
browsers
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Pending
Application number
CN201710692502.9A
Other languages
Chinese (zh)
Inventor
黄博
关班记
张远世
齐兆勇
庞毅
何龙泉
季统凯
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
G Cloud Technology Co Ltd
Original Assignee
G Cloud Technology Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by G Cloud Technology Co Ltd filed Critical G Cloud Technology Co Ltd
Priority to CN201710692502.9A priority Critical patent/CN107562454A/en
Publication of CN107562454A publication Critical patent/CN107562454A/en
Pending legal-status Critical Current

Links

Landscapes

  • User Interface Of Digital Computer (AREA)
  • Information Transfer Between Computers (AREA)

Abstract

本发明涉及网页开发技术领域,特别是一种跨浏览器实时网页同步装置及实现方法。本发明通过C#编程,将多个常用的浏览器集成在一个窗口上,分屏显示;并设置各动作按钮,通过按钮实现相应动作的操作;通过事件捕获窗口内某一个浏览器状态,当状态发生某种改变时,将这种改变广播至其他浏览器。本发明解决了网页开发中,实时直观对比,高效、快捷地调试网页问题。可以用于跨浏览器的实时网页同步。

The present invention relates to the technical field of web page development, and in particular to a cross-browser real-time web page synchronization device and implementation method. The present invention integrates multiple commonly used browsers in one window through C# programming, and displays them in split screens; and sets various action buttons to implement the operation of corresponding actions through the buttons; and captures the state of a certain browser in the window through events, and when a certain change occurs in the state, broadcasts the change to other browsers. The present invention solves the problem of real-time intuitive comparison and efficient and fast debugging of web pages in web page development. It can be used for real-time web page synchronization across browsers.

Description

跨浏览器实时网页同步装置及实现方法Cross-browser real-time web page synchronization device and implementation method

技术领域technical field

本发明涉及网页开发技术领域,特别是一种跨浏览器实时网页同步装置及实现方法。The invention relates to the technical field of web page development, in particular to a cross-browser real-time web page synchronization device and a method for realizing it.

背景技术Background technique

更高效、快捷地调试网页,是网页开发人员,特别是前端人员急需的。目前尚未有能一键跨浏览器实现实时网页同步的软件/应用程序。Debugging webpages more efficiently and quickly is what webpage developers, especially front-end personnel, urgently need. At present, there is no software/application that can realize real-time webpage synchronization across browsers with one click.

有一些调试软件往往需要复杂的操作,或者需要开启服务器等。Some debugging software often requires complex operations, or needs to start the server, etc.

更多的网页开发人员的调试方法是:打开多个浏览器,每次只能看一个浏览器,无法实时直观地对比网页;操作繁琐,低效。The debugging method of more web developers is: open multiple browsers, only one browser can be viewed at a time, and it is impossible to compare web pages intuitively in real time; the operation is cumbersome and inefficient.

发明内容Contents of the invention

本发明解决的技术问题之一在于提供一种跨浏览器实时网页同步装置,实现不同浏览器网页的实时同步。One of the technical problems solved by the present invention is to provide a cross-browser real-time web page synchronization device to realize real-time synchronization of different browser web pages.

本发明解决的技术问题之二在于提供一种跨浏览器实时网页同步的实现方法,兼容多个主流浏览器;实现浏览器之间网页的实时同步。The second technical problem to be solved by the present invention is to provide a cross-browser real-time synchronization method for webpages, which is compatible with multiple mainstream browsers and realizes real-time synchronization of webpages between browsers.

本发明解决上述技术问题之一的技术方案是:The technical scheme that the present invention solves one of above-mentioned technical problem is:

所述的装置包括多浏览器内核兼容模块、URL入口模块、事件监测/捕获模块、事件实时广播模块、智能自定义设置模块、智能模式开启/关闭模块;The device includes a multi-browser kernel compatible module, a URL entry module, an event monitoring/capture module, an event real-time broadcast module, an intelligent custom setting module, and an intelligent mode opening/closing module;

多浏览器内核兼容模块,实现不同浏览器的兼容;Multi-browser kernel compatibility module to achieve compatibility with different browsers;

URL入口模块,切换URL时,所有浏览器网页统一切换;URL entry module, when the URL is switched, all browser pages are switched uniformly;

事件监测/捕获模块,实现事件的跳转、切换、横竖向滚动,以及URL变化的监测和广播至其他浏览器;The event monitoring/capturing module realizes event jumping, switching, horizontal and vertical scrolling, and URL change monitoring and broadcasting to other browsers;

事件实时广播模块,实现事件实时广播至每个浏览器,保证变化结果实时一致;The event real-time broadcast module realizes the real-time broadcast of events to each browser to ensure the real-time consistency of the change results;

智能自定义设置模块,实现浏览器数量、位置、大小设置;Intelligent custom setting module to realize the number, location and size setting of browsers;

智能模式开启/关闭模块,实现同步与否的开启、关闭。The intelligent mode opens/closes the module to realize the opening and closing of synchronous or not.

所述的多浏览器内核兼容模块包括Trident内核兼容模块、Gecko内核兼容模块、Webkit内核兼容模块和Presto内核兼容模块;Described multi-browser kernel compatibility module comprises Trident kernel compatibility module, Gecko kernel compatibility module, Webkit kernel compatibility module and Presto kernel compatibility module;

所述的Trident内核兼容模块为IE内核,是WebBowser控件自带的;当需要修改注册表时,通过在设置弹框内点击“切换IE版本”按钮执行修改注册表动作;The Trident kernel compatible module is the IE kernel, which comes with the WebBowser control; when it is necessary to modify the registry, click the "Switch IE version" button in the setting pop-up box to perform the action of modifying the registry;

所述的Gecko内核兼容模块,作为火狐内核实现兼容;The Gecko kernel compatible module is compatible with the Firefox kernel;

所述的Webkit内核兼容模块:作为谷歌内核实现兼容;The described Webkit kernel compatibility module: as a Google kernel to achieve compatibility;

所述的Presto内核兼容模块:作为Opera内核实现兼容。The said Presto kernel compatible module: it is compatible with Opera kernel.

本发明解决上述技术问题之二的技术方案是:The technical scheme that the present invention solves above-mentioned technical problem two is:

所述的方法包括如下步骤:Described method comprises the steps:

(1)、通过C#编程,将多个常用的浏览器集成在一个窗口上,分屏显示;并设置各动作按钮,通过按钮实现相应动作的操作;(1) Through C# programming, integrate multiple commonly used browsers into one window and display them in split screens; and set each action button to realize the operation of the corresponding action through the button;

(2)、通过事件捕获窗口内某一个浏览器状态,当状态发生某种改变时,将这种改变广播至其他浏览器。(2) Capture the state of a certain browser in the window through an event, and broadcast the change to other browsers when the state changes.

所述的方法设置浏览器地址输入框和“进入”按钮,第一次可输入统一地址;点击“进入”按钮后可以广播该地址至所有已选浏览器。The method sets the browser address input box and the "Enter" button, and a unified address can be input for the first time; after clicking the "Enter" button, the address can be broadcast to all selected browsers.

所述的方法通过在设置弹框内点击“切换IE版本”按钮执行修改注册表动作,使执行文件内的IE版本默认为某个版本;具体实现方法是:The described method executes the action of modifying the registry by clicking the "switch IE version" button in the setting bullet box, so that the IE version in the execution file defaults to a certain version; the specific implementation method is:

在注册表位置位于in the registry at

“HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\InternetExplorer\MAIN\FeatureControl\FEATURE_BROWSER_EMULATION”的地方新建本应用执行文件相关联的注册表数据。"HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\InternetExplorer\MAIN\FeatureControl\FEATURE_BROWSER_EMULATION" creates new registry data associated with the execution file of this application.

所述的方法实现Gecko内核兼容的方法是:(1)下载XULrunner文件包,解压缩至开发目录下;(2)下载C#skybound.gecko插件,引用并编译通过;(3)代码里初始化浏览器参数:Skybound.Gecko.Xpcom.Initialize(xulrunnerPath);(4)剩余代码撰写。The method to achieve Gecko kernel compatibility is as follows: (1) download the XULrunner file package, decompress it to the development directory; (2) download the C# skybound.gecko plug-in, quote and compile it; (3) initialize browsing in the code Device parameters: Skybound.Gecko.Xpcom.Initialize(xulrunnerPath); (4) Write the rest of the code.

所述的方法实现Webkit内核兼容的方法类似Gecko内核,只是下载文件包名称和引用文件为webkit.net和WebKitBrowser.dll。The described method realizes that the Webkit kernel is compatible with the method similar to the Gecko kernel, except that the downloaded file package name and the reference file are webkit.net and WebKitBrowser.dll.

所述的方法中,设置输入框和对应按钮;切换URL时,实现所有浏览器网页统一切换;事件监测/捕获模块工作范围缩减至浏览器内部的操作,包括点击某个链接/按钮、滑动鼠标滚轮上下翻页、页面滚动条拖拽等,减少直接操作URL地址的冲突。In the described method, the input box and the corresponding button are set; when the URL is switched, all browser webpages are switched uniformly; the working scope of the event monitoring/capturing module is reduced to the operation inside the browser, including clicking a certain link/button, sliding the mouse The scroll wheel turns pages up and down, and the page scroll bar drags and drops, etc., to reduce the conflict of directly operating the URL address.

所述的方法通过事件监测/捕获模块,实现事件的跳转、切换、横竖向滚动,以及URL变化的监测和广播至其他浏览器;其方法是:The described method realizes the jumping, switching, horizontal and vertical scrolling of events, and the monitoring and broadcasting of URL changes to other browsers through the event monitoring/capturing module; the method is:

A:点击跳转事件;首先定位被操作浏览器的document,若浏览器名称为webBrowserl则为webBrowserl.Document,通过document内置属性API对其进行事件操作,如webBrowserl.Document.All[‘a’]则可以获取到所有的A标签,或,webBrowserl.Document.MouseDown获取鼠标点击事件动作;A: Click the jump event; first locate the document of the operated browser, if the browser name is webBrowserl, it will be webBrowserl.Document, and perform event operations on it through the document’s built-in property API, such as webBrowserl.Document.All['a'] Then you can get all the A tags, or, webBrowserl.Document.MouseDown get the mouse click event action;

B:点击切换事件;点击切换事件指的是URL不变的诸如选项卡之类的切换事件,效果同A;B: Click switch event; click switch event refers to a switch event such as a tab with the same URL, and the effect is the same as A;

C:竖向滚动事件;首先得到被控制网页的scrolltop参数:C: vertical scrolling event; first get the scrolltop parameter of the controlled webpage:

string top=document.GetElementsByTagName(″HTML″)[0].ScrollTop.ToString();然后通过document2.Window.ScrollTo函数传递/广播动作至其他浏览器;string top=document.GetElementsByTagName("HTML")[0].ScrollTop.ToString(); then transfer/broadcast the action to other browsers through the document2.Window.ScrollTo function;

D:横向滚动事件;与竖向滚动事件类似,将top改为left:D: Horizontal scroll event; similar to vertical scroll event, change top to left:

string left=document.GetElementsByTagName(″HTML″)[0].ScrollLeft.ToString();string left = document.GetElementsByTagName("HTML")[0].ScrollLeft.ToString();

E:URL变化监测(;非直接输入的URL变化监测,需要判断当前URL是否变化,通过各类动作触发,然后广播变化的URL指其他浏览器。E: URL change monitoring (; for non-direct input URL change monitoring, it is necessary to determine whether the current URL has changed, trigger it through various actions, and then broadcast the changed URL to other browsers.

所述的方法通过事件实时广播模块实现事件实时广播至每个浏览器、保证变化结果实时一致的方法是:The described method realizes the real-time broadcasting of the event to each browser through the event real-time broadcasting module, and the method of ensuring the real-time consistency of the change result is:

A:设置URL;利用Navigate函数跳转至广播内容里指定URL;Navigate参数为string类型,需要设置URI的tostring转换;A: Set the URL; use the Navigate function to jump to the specified URL in the broadcast content; the Navigate parameter is a string type, and the tostring conversion of the URI needs to be set;

B:设置页面元素;当页面元素变化时,通过document的all函数获得所有变化元素并用each函数遍历,从而对比对象定位到单个元素,通过比较差异,并利用all设置变化元素的属性;B: Set the page elements; when the page elements change, use the all function of the document to obtain all the changed elements and use the each function to traverse, so that the comparison object can locate a single element, and use all to set the attributes of the changed elements by comparing the differences;

C:与页面JS互动;InvokeMember函数和InvokeScript函数定位JS函数,实现对页面JS函数的执行;保证每个浏览器都执行此次互动,实现变化结果实时一致。C: Interact with the page JS; the InvokeMember function and the InvokeScript function locate the JS function to realize the execution of the page JS function; ensure that each browser executes this interaction to realize the real-time consistency of the change results.

所述的方法通过智能自定义设置模块实现浏览器数量、位置、大小设置的方法是:The method that described method realizes browser quantity, position, size setting by intelligent self-defining setting module is:

A:浏览器数量设置;点击“设置”按钮后,弹出设置对话框,提供浏览器内核数量及种类选择;四大内核以大图标和多选框的形式供用户勾选/取消;已选浏览器组成数组对象,依次填入动态位置框中;用户可随时进行实时设置;浏览器变化将立刻实现;A: The number of browsers is set; after clicking the "Settings" button, a setting dialog box will pop up, providing the number and type of browser cores to choose; browsers to form an array object, and fill in the dynamic position box in turn; users can set real-time settings at any time; browser changes will be realized immediately;

B:浏览器位置设置;点击“设置”按钮后,弹出设置对话框,其中的动态位置框的X、Y轴位置可任意调整;X轴设置参数包括:“左”、“中偏左”、“中”、“中偏右”、“右”,单选框选择参数即该方向设置完毕;Y轴同理;B: Browser position setting; after clicking the "Settings" button, a setting dialog box will pop up, in which the X and Y axis positions of the dynamic position box can be adjusted arbitrarily; the X axis setting parameters include: "left", "middle left", "Center", "Center-right", "Right", select the parameters of the radio button, that is, the direction is set; the Y axis is the same;

C:浏览器大小设置;点击“设置”按钮后,弹出设置对话框,在动态位置框处直接拖拽容器边缘可自定义调整浏览器容器大小;关闭弹出框,浏览器变化将立刻实现。C: Browser size setting; after clicking the "Settings" button, a setting dialog box will pop up, directly drag the edge of the container in the dynamic position box to customize and adjust the size of the browser container; close the pop-up box, and the browser change will be realized immediately.

本发明的有益效果如下:The beneficial effects of the present invention are as follows:

1、本发明提供浏览器同步服务开启/关闭按钮;当开启同步服务时,本发明的事件同步驱动模块正常运行;当关闭同步服务时,事件同步驱动失效,转为异步模式(普通模式)。1. The present invention provides a browser synchronization service on/off button; when the synchronization service is turned on, the event synchronization driver module of the present invention operates normally; when the synchronization service is turned off, the event synchronization driver fails and turns into an asynchronous mode (common mode).

2、本发明提供浏览器内核数量自定义设置;点击“设置”按钮后,弹出设置对话框,提供浏览器内核数量及种类选择;四大内核以大图标和多选框的形式供用户勾选/取消;已选浏览器组成数组对象,依次填入动态位置框中。2. The present invention provides custom settings for the number of browser cores; after clicking the "Settings" button, a setting dialog box pops up, providing the number and type of browser cores for selection; the four cores are provided for the user to check in the form of large icons and multiple selection boxes /Cancel; the selected browsers form an array object, and fill in the dynamic position box in turn.

3、本发明提供浏览器动态位置自定义设置;点击“设置”按钮后,弹出设置对话框,其中的动态位置框的X、Y轴位置可任意调整。3. The present invention provides custom settings for the dynamic position of the browser; after clicking the "Settings" button, a setting dialog box pops up, in which the X and Y axis positions of the dynamic position box can be adjusted arbitrarily.

4、本发明提供浏览器容器大小自定义设置;点击“设置”按钮后,弹出设置对话框,在动态位置框处直接拖拽容器边缘可自定义调整浏览器容器大小。4. The present invention provides custom settings for the size of the browser container; after clicking the "Settings" button, a setting dialog box pops up, and the size of the browser container can be customized and adjusted by directly dragging the edge of the container at the dynamic position box.

5、通过事件同步驱动模块,可以实现预置浏览器动作实时同步、一致;此功能可用于开发人员,特别是前端人员调试网页;调试网页的目的包括检查代码和网页元素的匹配度、网页的显示是否异常,是否符合预期,网页是否能兼容多个主流浏览器,网页是否能兼容同一种浏览器多个版本(如IE);5. Through the event synchronization driver module, real-time synchronization and consistency of preset browser actions can be realized; this function can be used for developers, especially front-end personnel to debug web pages; the purpose of debugging web pages includes checking the matching degree of code and web page elements, and the Whether the display is abnormal, whether it meets expectations, whether the webpage is compatible with multiple mainstream browsers, and whether the webpage is compatible with multiple versions of the same browser (such as IE);

附图说明Description of drawings

下面结合附图对本发明进一步说明:Below in conjunction with accompanying drawing, the present invention is further described:

图1为本发明的流程图;Fig. 1 is a flowchart of the present invention;

图2为本发明实施效果图。Fig. 2 is the implementation effect diagram of the present invention.

具体实施方式detailed description

下面将结合附图,对本发明实施例中的技术方案进行清楚、完整的描述,显然,所描述的实施例仅仅是本发明一部分实施例,而不是全部的实施例。基于本发明中的实施例,本领域普通技术人员在没有做出实质性创造获得的方案,都属于本发明保护的范围。The technical solutions in the embodiments of the present invention will be clearly and completely described below in conjunction with the accompanying drawings. Apparently, the described embodiments are only some, not all, embodiments of the present invention. Based on the embodiments of the present invention, the solutions obtained by those skilled in the art without making substantive inventions all belong to the protection scope of the present invention.

本发明实现跨浏览器实时网页同步装置及实现方法如下:The present invention realizes cross-browser real-time web page synchronization device and its implementation method as follows:

1:多浏览器内核兼容模块1: Multi-browser kernel compatible module

A:Trident内核兼容模块:此内核模块为IE内核,是WebBowser控件自带的。本发明着重关心IE版本问题。控件自带的IE版本的修改需要修改注册表,本发明通过在设置弹框内点击“切换IE版本”按钮执行修改注册表动作,让本发明执行文件(.exe)内的IE版本默认为某个版本(7-11)。具体实现方法是:在注册表位置位于A: Trident kernel compatible module: This kernel module is the IE kernel, which comes with the WebBowser control. The present invention focuses on the IE version issue. The modification of the IE version that comes with the control needs to modify the registry. The present invention performs the action of modifying the registry by clicking the "switch IE version" button in the setting bullet box, so that the IE version in the execution file (.exe) of the present invention defaults to a certain Versions (7-11). The specific implementation method is: in the registry location is located

“HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\InternetExplorer\MAIN\FeatureControl\FEATURE_BROWSER_EMULATION”的地方新建本应用执行文件相关联的注册表数据;"HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\InternetExplorer\MAIN\FeatureControl\FEATURE_BROWSER_EMULATION" creates new registry data associated with the execution file of this application;

B:Gecko内核兼容模块:此内核模块为火狐内核。具体兼容方法为(1)下载XULrunner文件包,解压缩至开发目录下;(2)下载C#skybound.gecko插件,引用并编译通过;(3)代码里初始化浏览器参数:Skybound.Gecko.Xpcom.Initialize(xulrunnerPath);(4)剩余代码撰写;B: Gecko kernel compatibility module: This kernel module is the Firefox kernel. The specific compatibility method is (1) download the XULrunner file package, decompress it to the development directory; (2) download the C# skybound.gecko plug-in, quote and compile it; (3) initialize the browser parameters in the code: Skybound.Gecko.Xpcom .Initialize(xulrunnerPath); (4) Write the rest of the code;

C:Webkit内核兼容模块:此内核为谷歌内核。具体兼容方法类似gecko内核,只是下载文件包名称和引用文件为webkit.net和WebKitBrowser.dll;C: Webkit kernel compatible module: This kernel is Google kernel. The specific compatibility method is similar to the gecko kernel, except that the downloaded file package name and reference file are webkit.net and WebKitBrowser.dll;

D:Presto内核兼容模块:原理同上;D: Presto kernel compatible module: the principle is the same as above;

2:URL入口模块2: URL entry module

本系统提供一个输入框和对应按钮,作用为切换URL时,实现所有浏览器网页统一切换;这样,对于事件监测/捕获模块而言,其工作范围被缩减至浏览器内部的操作,如点击某个链接/按钮、滑动鼠标滚轮上下翻页、页面滚动条拖拽等,减少了和直接操作URL地址的冲突;This system provides an input box and a corresponding button, which is used to realize unified switching of all browser webpages when switching URLs; in this way, for the event monitoring/capturing module, its working scope is reduced to the operation inside the browser, such as clicking a certain Links/buttons, sliding the mouse wheel to turn pages up and down, dragging the page scroll bar, etc., reduce the conflict with the direct operation of the URL address;

3:事件监测/捕获模块3: Event monitoring/capture module

A:点击跳转事件;首先定位被操作浏览器的document,若浏览器名称为webBrowserl则为webBrowserl.Document,通过document内置属性API可以对其进行事件操作,如webBrowserl.Document.All[‘a’]则可以获取到所有的A标签,或,webBrowserl.Document.MouseDown获取鼠标点击事件动作;A: Click on the jump event; first locate the document of the operated browser, if the browser name is webBrowserl, it will be webBrowserl.Document, and event operations can be performed on it through the built-in property API of the document, such as webBrowserl.Document.All['a' ], you can get all the A tags, or, webBrowserl.Document.MouseDown get the mouse click event action;

B:点击切换事件;点击切换事件指的是URL不变的诸如选项卡之类的切换事件,效果同A;B: Click switch event; click switch event refers to a switch event such as a tab with the same URL, and the effect is the same as A;

C:竖向滚动事件;首先得到被控制网页的scrolltop参数:C: vertical scrolling event; first get the scrolltop parameter of the controlled web page:

string top=document.GetElementsByTagName(″HTML″)[0].ScrollTop.ToString();然后就可以通过document2.Window.ScrollTo函数传递/广播动作至其他浏览器;string top=document.GetElementsByTagName("HTML")[0].ScrollTop.ToString(); then you can pass/broadcast actions to other browsers through the document2.Window.ScrollTo function;

D:横向滚动事件;与竖向滚动事件类似,只不过top改为left:D: Horizontal scrolling event; similar to vertical scrolling event, except that top is changed to left:

string left=document.GetElementsByTagName(″HTML″)[0].ScrollLeft.ToString();string left = document.GetElementsByTagName("HTML")[0].ScrollLeft.ToString();

E:URL变化监测(非直接输入);非直接输入的URL变化监测,需要判断当前URL是否变化,可通过各类动作触发,然后广播变化的URL指其他浏览器;E: URL change monitoring (non-direct input); for non-direct input URL change monitoring, it is necessary to determine whether the current URL has changed, which can be triggered by various actions, and then broadcast the changed URL to other browsers;

4:事件实时广播模块4: Event real-time broadcast module

A:设置URL;利用Navigate函数跳转至广播内容里指定URL;Navigate参数为string类型,需要设置URI的tostring转换。A: Set the URL; use the Navigate function to jump to the specified URL in the broadcast content; the Navigate parameter is of string type, and the tostring conversion of the URI needs to be set.

B:设置页面元素;当页面元素变化时,通过document的all函数获得所有变化元素并用each函数遍历,从而对比对象定位到单个元素,通过比较差异,并利用all设置变化元素的属性;B: Set the page elements; when the page elements change, use the all function of the document to obtain all the changed elements and use the each function to traverse, so that the comparison object can locate a single element, and use all to set the attributes of the changed elements by comparing the differences;

C:与页面JS互动;InvokeMember函数和InvokeScript函数定位JS函数,从而可以实现对页面JS函数的执行,只需要保证每个浏览器都执行此次互动,变化结果就可以保证实时一致。C: Interact with the page JS; the InvokeMember function and the InvokeScript function locate the JS function, so that the execution of the page JS function can be realized. It is only necessary to ensure that each browser executes this interaction, and the result of the change can be guaranteed to be consistent in real time.

5:智能自定义设置模块5: Smart custom setting module

A:浏览器数量设置;点击“设置”按钮后,弹出设置对话框,提供浏览器内核数量及种类选择;四大内核以大图标和多选框的形式供用户勾选/取消;已选浏览器组成数组对象,依次填入动态位置框中;用户可随时进行实时设置;浏览器变化将立刻实现;A: The number of browsers is set; after clicking the "Settings" button, a setting dialog box will pop up, providing the number and type of browser cores to choose; browsers to form an array object, and fill in the dynamic position box in turn; users can set real-time settings at any time; browser changes will be realized immediately;

B:浏览器位置设置;点击“设置”按钮后,弹出设置对话框,其中的动态位置框的X、Y轴位置可任意调整;以X轴为例,其设置参数包括:“左”、“中偏左”、“中”、“中偏右”、“右”,单选框选择参数即该方向设置完毕;Y轴同理;B: Browser position setting; after clicking the "Settings" button, a setting dialog box will pop up, in which the X and Y axis positions of the dynamic position box can be adjusted arbitrarily; taking the X axis as an example, its setting parameters include: "Left", " Center Left", "Center", "Center Right", "Right", select the parameter in the radio button, and the direction is set; the Y axis is the same;

C:浏览器大小设置;点击“设置”按钮后,弹出设置对话框,在动态位置框处直接拖拽容器边缘可自定义调整浏览器容器大小;关闭弹出框,浏览器变化将立刻实现;C: Browser size setting; after clicking the "Settings" button, a setting dialog box will pop up, directly drag the edge of the container at the dynamic position box to customize and adjust the size of the browser container; close the pop-up box, and the browser change will be realized immediately;

6:智能模式开启/关闭模块6: Smart mode on/off module

当开启同步服务时,本发明的事件同步驱动模块正常运行;当关闭同步服务时,事件同步驱动失效,转为异步模式(普通模式);所谓异步模式(普通模式)是指:各个浏览器互无关联,各自变化,互不影响;When the synchronous service is opened, the event synchronous drive module of the present invention operates normally; Unrelated, each change, independent of each other;

本发明实现方法具体如下:The implementation method of the present invention is specifically as follows:

1:通过C#编程,将多个(一般两到三个)常用的浏览器集成在一个窗口上,分屏显示;常用浏览器包括IE、火狐、谷歌、欧鹏、遨游、Safari等;按其内核分类可分为:Trident、Gecko、WebKit、Presto四大内核;本发明基于以上四大内核浏览器。1: Through C# programming, integrate multiple (generally two to three) commonly used browsers into one window and display them in split screens; commonly used browsers include IE, Firefox, Google, Oupeng, Aoyou, Safari, etc.; Kernel classification can be divided into: Trident, Gecko, WebKit, Presto four kernels; the present invention is based on the above four kernel browsers.

2:通过事件(如按下回车键、点击按钮、页面跳转、页面滚动等)捕获窗口内某一个浏览器状态,当状态发生某种改变时,将这种改变广播至其他浏览器;使得窗口内所有浏览器动作实时一致;而事件只需要对其中一个浏览器进行操作;2: Capture the state of a certain browser in the window through events (such as pressing the Enter key, clicking a button, page jump, page scrolling, etc.), and when the state changes, broadcast this change to other browsers; Make the actions of all browsers in the window consistent in real time; and the event only needs to operate on one of the browsers;

3:本发明提供浏览器地址输入框和“进入”按钮,方便第一次输入统一地址;并且点击“进入”按钮后可以广播该地址至所有已选浏览器。3: The present invention provides a browser address input box and an "Enter" button, which is convenient for entering a unified address for the first time; and the address can be broadcast to all selected browsers after clicking the "Enter" button.

本发明为一个window应用程序,内置URL入口、智能设置按钮,同步开启/结束按钮,多个浏览器分屏显示界面等。The invention is a window application program with built-in URL entry, intelligent setting button, synchronous start/end button, multiple browser split-screen display interfaces and the like.

本发明能集多个浏览器内核与一身,实现实时动态统一调试,每个浏览器动作一致,方便查看对比网页的浏览器兼容性。The invention can integrate a plurality of browser kernels into one body to realize real-time dynamic unified debugging, each browser acts in the same way, and it is convenient to check and compare the browser compatibility of web pages.

Claims (11)

1.一种跨浏览器实时网页同步装置,其特征在于:所述的装置包括多浏览器内核兼容模块、URL入口模块、事件监测/捕获模块、事件实时广播模块、智能自定义设置模块、智能模式开启/关闭模块;1. A cross-browser real-time web page synchronization device, characterized in that: said device includes a multi-browser kernel compatible module, URL entry module, event monitoring/capture module, event real-time broadcast module, intelligent custom setting module, intelligent mode on/off module; 多浏览器内核兼容模块,实现不同浏览器的兼容;Multi-browser kernel compatibility module to achieve compatibility with different browsers; URL入口模块,切换URL时,所有浏览器网页统一切换;URL entry module, when the URL is switched, all browser pages are switched uniformly; 事件监测/捕获模块,实现事件的跳转、切换、横竖向滚动,以及URL变化的监测和广播至其他浏览器;The event monitoring/capturing module realizes event jumping, switching, horizontal and vertical scrolling, and URL change monitoring and broadcasting to other browsers; 事件实时广播模块,实现事件实时广播至每个浏览器,保证变化结果实时一致;The event real-time broadcast module realizes the real-time broadcast of events to each browser to ensure the real-time consistency of the change results; 智能自定义设置模块,实现浏览器数量、位置、大小设置;Intelligent custom setting module to realize the number, location and size setting of browsers; 智能模式开启/关闭模块,实现同步与否的开启、关闭。The intelligent mode opens/closes the module to realize the opening and closing of synchronous or not. 2.根据权利要求1所述的装置,其特征在于:所述的多浏览器内核兼容模块包括Trident内核兼容模块、Gecko内核兼容模块、Webkit内核兼容模块和Presto内核兼容模块;2. The device according to claim 1, characterized in that: the multi-browser kernel compatibility module comprises a Trident kernel compatibility module, a Gecko kernel compatibility module, a Webkit kernel compatibility module and a Presto kernel compatibility module; 所述的Trident内核兼容模块为IE内核,是WebBowser控件自带的;当需要修改注册表时,通过在设置弹框内点击“切换IE版本”按钮执行修改注册表动作;The Trident kernel compatible module is the IE kernel, which comes with the WebBowser control; when it is necessary to modify the registry, click the "Switch IE version" button in the setting pop-up box to perform the action of modifying the registry; 所述的Gecko内核兼容模块,作为火狐内核实现兼容;The Gecko kernel compatible module is compatible with the Firefox kernel; 所述的Webkit内核兼容模块:作为谷歌内核实现兼容;The described Webkit kernel compatibility module: as a Google kernel to achieve compatibility; 所述的Presto内核兼容模块:作为Opera内核实现兼容。The said Presto kernel compatible module: it is compatible with Opera kernel. 3.一种权利要求1或2所述的装置的实现方法,其特征在于:所述的方法包括如下步骤:3. A method for realizing the device according to claim 1 or 2, characterized in that: the method comprises the steps of: (1)、通过C#编程,将多个常用的浏览器集成在一个窗口上,分屏显示;并设置各动作按钮,通过按钮实现相应动作的操作;(1) Through C# programming, integrate multiple commonly used browsers into one window and display them in split screens; and set each action button to realize the operation of the corresponding action through the button; (2)、通过事件捕获窗口内某一个浏览器状态,当状态发生某种改变时,将这种改变广播至其他浏览器。(2) Capture the state of a certain browser in the window through an event, and broadcast the change to other browsers when the state changes. 4.根据权利要求3所述的方法,其特征在于:所述的方法设置浏览器地址输入框和“进入”按钮,第一次可输入统一地址;点击“进入”按钮后可以广播该地址至所有已选浏览器。4. The method according to claim 3, characterized in that: the method sets the browser address input box and the "enter" button, and can input a unified address for the first time; after clicking the "enter" button, the address can be broadcast to All selected browsers. 5.根据权利要求3所述的方法,其特征在于:所述的方法通过在设置弹框内点击“切换IE版本”按钮执行修改注册表动作,使执行文件内的IE版本默认为某个版本;具体实现方法是:5. The method according to claim 3, characterized in that: the method clicks the "switch IE version" button in the setting bullet box to perform the action of modifying the registry, so that the IE version in the execution file is a certain version by default ; The specific implementation method is: 在注册表位置位于in the registry at “HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\InternetExplorer\MAIN\FeatureControl\FEATURE_BROWSER_EMULATION”的地方新建本应用执行文件相关联的注册表数据。"HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\InternetExplorer\MAIN\FeatureControl\FEATURE_BROWSER_EMULATION" creates new registry data associated with the execution file of this application. 6.根据权利要求3所述的方法,其特征在于:所述的方法实现Gecko内核兼容的方法是:(1)下载XULrunner文件包,解压缩至开发目录下;(2)下载C#skybound.gecko插件,引用并编译通过;(3)代码里初始化浏览器参数:Skybound.Gecko.Xpcom.Initialize(xulrunnerPath);(4)剩余代码撰写。6. the method according to claim 3, it is characterized in that: described method realizes that the method that Gecko kernel is compatible is: (1) download XULrunner file package, decompress under development directory; (2) download C#skybound. gecko plug-in, quoted and compiled; (3) Initialize browser parameters in the code: Skybound.Gecko.Xpcom.Initialize(xulrunnerPath); (4) Write the rest of the code. 7.根据权利要求3所述的方法,其特征在于:所述的方法实现Webkit内核兼容的方法类似Gecko内核,只是下载文件包名称和引用文件为webkit.net和WebKitBrowser.dll。7. The method according to claim 3, characterized in that: the method for realizing Webkit kernel compatibility is similar to the Gecko kernel, except that the downloaded file package name and reference file are webkit.net and WebKitBrowser.dll. 8.根据权利要求3所述的方法,其特征在于:所述的方法中,设置输入框和对应按钮;切换URL时,实现所有浏览器网页统一切换;事件监测/捕获模块工作范围缩减至浏览器内部的操作,包括点击某个链接/按钮、滑动鼠标滚轮上下翻页、页面滚动条拖拽等,减少直接操作URL地址的冲突。8. The method according to claim 3, characterized in that: in the method, an input box and a corresponding button are set; when switching URLs, all browser webpages are switched uniformly; the scope of work of the event monitoring/capture module is reduced to browsing Operations inside the browser, including clicking a certain link/button, sliding the mouse wheel to turn pages up and down, and dragging the page scroll bar, etc., to reduce the conflict of directly operating the URL address. 9.根据权利要求3所述的方法,其特征在于:所述的方法通过事件监测/捕获模块,实现事件的跳转、切换、横竖向滚动,以及URL变化的监测和广播至其他浏览器;其方法是:9. The method according to claim 3, characterized in that: the method realizes jumping, switching, horizontal and vertical scrolling of events, monitoring of URL changes and broadcasting to other browsers through the event monitoring/capturing module; The method is: A:点击跳转事件;首先定位被操作浏览器的document,若浏览器名称为webBrowser1则为webBrowser1.Document,通过document内置属性API对其进行事件操作,如webBrowser1.Document.All[‘a’]则可以获取到所有的A标签,或,webBrowser1.Document.MouseDown获取鼠标点击事件动作;A: Click on the jump event; first locate the document of the operated browser, if the browser name is webBrowser1, it will be webBrowser1.Document, and perform event operations on it through the document’s built-in property API, such as webBrowser1.Document.All['a'] Then you can get all the A tags, or, webBrowser1.Document.MouseDown get the mouse click event action; B:点击切换事件;点击切换事件指的是URL不变的诸如选项卡之类的切换事件,效果同A;B: Click switch event; click switch event refers to a switch event such as a tab with the same URL, and the effect is the same as A; C:竖向滚动事件;首先得到被控制网页的scrolltop参数:string top=document.GetElementsByTagName(″HTML″)[0].ScrollTop.ToString();然后通过document2.Window.ScrollTo函数传递/广播动作至其他浏览器;C: vertical scrolling event; first obtain the scrolltop parameter of the controlled web page: string top=document.GetElementsByTagName("HTML")[0].ScrollTop.ToString(); then pass/broadcast the action to the document2.Window.ScrollTo function other browsers; D:横向滚动事件;与竖向滚动事件类似,将top改为left:string left=document.GetElementsByTagName(″HTML″)[0].ScrollLeft.ToString();D: horizontal scroll event; similar to vertical scroll event, change top to left: string left=document.GetElementsByTagName("HTML")[0].ScrollLeft.ToString(); E:URL变化监测;非直接输入的URL变化监测,需要判断当前URL是否变化,通过各类动作触发,然后广播变化的URL指其他浏览器。E: URL change monitoring; for non-direct input URL change monitoring, it is necessary to determine whether the current URL has changed, trigger it through various actions, and then broadcast the changed URL to other browsers. 10.根据权利要求3所述的方法,其特征在于:所述的方法通过事件实时广播模块实现事件实时广播至每个浏览器、保证变化结果实时一致的方法是:10. The method according to claim 3, characterized in that: the method realizes the real-time broadcast of the event to each browser through the event real-time broadcast module, and the method of ensuring the real-time consistency of the change result is: A:设置URL;利用Navigate函数跳转至广播内容里指定URL;Navigate参数为string类型,需要设置URI的tostring转换;A: Set the URL; use the Navigate function to jump to the specified URL in the broadcast content; the Navigate parameter is a string type, and the tostring conversion of the URI needs to be set; B:设置页面元素;当页面元素变化时,通过document的all函数获得所有变化元素并用each函数遍历,从而对比对象定位到单个元素,通过比较差异,并利用all设置变化元素的属性;B: Set the page elements; when the page elements change, use the all function of the document to obtain all the changed elements and use the each function to traverse, so that the comparison object can locate a single element, and use all to set the attributes of the changed elements by comparing the differences; C:与页面JS互动;InvokeMember函数和InvokeScript函数定位JS函数,实现对页面JS函数的执行;保证每个浏览器都执行此次互动,实现变化结果实时一致。C: Interact with the page JS; the InvokeMember function and the InvokeScript function locate the JS function to realize the execution of the page JS function; ensure that each browser executes this interaction to realize the real-time consistency of the change results. 11.根据权利要求3所述的方法,其特征在于:所述的方法通过智能自定义设置模块实现浏览器数量、位置、大小设置的方法是:11. The method according to claim 3, characterized in that: said method realizes the browser quantity, position, and size settings by means of an intelligent custom setting module: A:浏览器数量设置;点击“设置”按钮后,弹出设置对话框,提供浏览器内核数量及种类选择;四大内核以大图标和多选框的形式供用户勾选/取消;已选浏览器组成数组对象,依次填入动态位置框中;用户可随时进行实时设置;浏览器变化将立刻实现;A: The number of browsers is set; after clicking the "Settings" button, a setting dialog box will pop up, providing the number and type of browser cores for selection; the four cores are in the form of large icons and multiple check boxes for users to check/cancel; browsers to form an array object, and fill in the dynamic position box in turn; users can set real-time settings at any time; browser changes will be realized immediately; B:浏览器位置设置;点击“设置”按钮后,弹出设置对话框,其中的动态位置框的X、Y轴位置可任意调整;X轴设置参数包括:“左”、“中偏左”、“中”、“中偏右”、“右”,单选框选择参数即该方向设置完毕;Y轴同理;B: Browser position setting; after clicking the "Settings" button, a setting dialog box will pop up, in which the X and Y axis positions of the dynamic position box can be adjusted arbitrarily; the X axis setting parameters include: "left", "middle left", "Center", "Center-right", "Right", select the parameters of the radio button, that is, the direction is set; the Y axis is the same; C:浏览器大小设置;点击“设置”按钮后,弹出设置对话框,在动态位置框处直接拖拽容器边缘可自定义调整浏览器容器大小;关闭弹出框,浏览器变化将立刻实现。C: Browser size setting; after clicking the "Settings" button, a setting dialog box will pop up, directly drag the edge of the container in the dynamic position box to customize and adjust the size of the browser container; close the pop-up box, and the browser change will be realized immediately.
CN201710692502.9A 2017-08-14 2017-08-14 Cross-browser real-time web page synchronization device and implementation method Pending CN107562454A (en)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201710692502.9A CN107562454A (en) 2017-08-14 2017-08-14 Cross-browser real-time web page synchronization device and implementation method

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201710692502.9A CN107562454A (en) 2017-08-14 2017-08-14 Cross-browser real-time web page synchronization device and implementation method

Publications (1)

Publication Number Publication Date
CN107562454A true CN107562454A (en) 2018-01-09

Family

ID=60975492

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201710692502.9A Pending CN107562454A (en) 2017-08-14 2017-08-14 Cross-browser real-time web page synchronization device and implementation method

Country Status (1)

Country Link
CN (1) CN107562454A (en)

Cited By (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN109101429A (en) * 2018-08-21 2018-12-28 青岛海信宽带多媒体技术有限公司 A kind of method and device of the browser page debugging of set-top box
CN111061572A (en) * 2019-11-15 2020-04-24 北京浪潮数据技术有限公司 Page communication method, system, equipment and readable storage medium
CN111274156A (en) * 2020-02-25 2020-06-12 中信银行股份有限公司 Automatic identification method and device compatible with multi-frame page

Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20110078663A1 (en) * 2009-09-29 2011-03-31 International Business Machines Corporation Method and Apparatus for Cross-Browser Testing of a Web Application
CN103294474A (en) * 2013-05-31 2013-09-11 北京奇虎科技有限公司 Browser operation synchronizing method and device for performing browser operation synchronization
CN103927253A (en) * 2013-01-11 2014-07-16 阿里巴巴集团控股有限公司 Multiple browser compatibility testing method and system
CN104636251A (en) * 2014-12-30 2015-05-20 安科智慧城市技术(中国)有限公司 Testing method and system for compatibility of multiple browsers

Patent Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20110078663A1 (en) * 2009-09-29 2011-03-31 International Business Machines Corporation Method and Apparatus for Cross-Browser Testing of a Web Application
CN103927253A (en) * 2013-01-11 2014-07-16 阿里巴巴集团控股有限公司 Multiple browser compatibility testing method and system
CN103294474A (en) * 2013-05-31 2013-09-11 北京奇虎科技有限公司 Browser operation synchronizing method and device for performing browser operation synchronization
CN104636251A (en) * 2014-12-30 2015-05-20 安科智慧城市技术(中国)有限公司 Testing method and system for compatibility of multiple browsers

Cited By (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN109101429A (en) * 2018-08-21 2018-12-28 青岛海信宽带多媒体技术有限公司 A kind of method and device of the browser page debugging of set-top box
CN109101429B (en) * 2018-08-21 2021-12-07 青岛海信宽带多媒体技术有限公司 Method and device for debugging browser page of set top box
CN111061572A (en) * 2019-11-15 2020-04-24 北京浪潮数据技术有限公司 Page communication method, system, equipment and readable storage medium
CN111274156A (en) * 2020-02-25 2020-06-12 中信银行股份有限公司 Automatic identification method and device compatible with multi-frame page

Similar Documents

Publication Publication Date Title
CN110096189B (en) Application function access control method and device, storage medium and terminal equipment
WO2011101845A1 (en) Modified operating systems allowing mobile devices to accommodate io devices more convenient than their own inherent io devices and methods for generating such systems
Smyth Android Studio 2.2 Development Essentials-Android 7 Edition
CN107562454A (en) Cross-browser real-time web page synchronization device and implementation method
CN109491731B (en) A control method, device and storage medium for a floating button
CN106250109A (en) A kind of multipad display packing, device and mobile terminal
CN109885303A (en) A kind of method, apparatus of the software Custom Icons page
CN104598268A (en) Application processing method and device
CN110764762B (en) Page forming method and device, computer readable storage medium and terminal
CN113672210A (en) Triangular icon code generation method and device and readable storage medium
CN106855885B (en) Page processing method of browser and terminal
JP6175682B2 (en) Realization of efficient cascade operation
US7568161B2 (en) Overcoming double-click constraints in a mark-up language environment
Smyth Android Studio 3.6 Development Essentials-Java Edition: Developing Android 10 (Q) Apps Using Android Studio 3.6, java and Android Jetpack
bin Uzayr et al. Introduction to Visual Studio Code
CN105323615B (en) The operating method of application and processing unit for set-top box or television set
WO2008041297A1 (en) Information processing device
Smyth Android Studio 4.0 Development Essentials-Kotlin Edition
CN114063846B (en) Window control method, device, equipment and storage medium
CN108664456B (en) Method for dynamically constructing function of display element in document
CN112068833A (en) Browser system
Smyth Android Studio 3.5 Development Essentials-Kotlin Edition: Developing Android 10 (Q) Apps Using Android Studio 3.5, Kotlin and Android Jetpack
Smyth Android Studio 3.4 Development Essentials-Kotlin Edition
TWI599941B (en) Webpage human computer interaction control apparatus and its operation method
CN110377859A (en) A kind of control method and control device controlling web page operation

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
WD01 Invention patent application deemed withdrawn after publication

Application publication date: 20180109

WD01 Invention patent application deemed withdrawn after publication