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 PDFInfo
- 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
Links
- 238000000034 method Methods 0.000 title claims abstract description 47
- 230000000875 corresponding effect Effects 0.000 claims abstract description 6
- 238000011161 development Methods 0.000 claims abstract description 6
- 238000012544 monitoring process Methods 0.000 claims description 20
- 230000001360 synchronised effect Effects 0.000 claims description 5
- 230000000694 effects Effects 0.000 claims description 4
- 230000009191 jumping Effects 0.000 claims description 4
- 238000006243 chemical reaction Methods 0.000 claims description 3
- 230000003993 interaction Effects 0.000 claims description 3
- 230000002159 abnormal effect Effects 0.000 description 1
- 230000009286 beneficial effect Effects 0.000 description 1
- 238000010586 diagram Methods 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 238000012546 transfer Methods 0.000 description 1
- 230000001960 triggered effect Effects 0.000 description 1
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
技术领域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)
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)
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)
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 |
-
2017
- 2017-08-14 CN CN201710692502.9A patent/CN107562454A/en active Pending
Patent Citations (4)
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)
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 |