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

Abstract

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:

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 entry module, when the URL is switched, all browser pages are switched uniformly;

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.

Described multi-browser kernel compatibility module comprises Trident kernel compatibility module, Gecko kernel compatibility module, Webkit kernel compatibility module and Presto kernel compatibility module;

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;

The Gecko kernel compatible module is compatible with the Firefox kernel;

The described Webkit kernel compatibility module: as a Google kernel to achieve compatibility;

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) 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) 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.

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" creates new registry data associated with the execution file of this application.

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.

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.

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.

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: 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: 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: vertical scrolling event; first get the scrolltop parameter of the controlled webpage:

string top＝document.GetElementsByTagName("HTML")[0].ScrollTop.ToString(); then transfer/broadcast the action to other browsers through the document2.Window.ScrollTo function;

D: Horizontal scroll event; similar to vertical scroll event, change top to left:

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

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: 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: 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: 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: 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: 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: 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. 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. 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. 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. 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. 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:

Fig. 1 is a flowchart of the present invention;

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: Multi-browser kernel compatible module

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" creates new registry data associated with the execution file of this application;

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 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 kernel compatible module: the principle is the same as above;

2: URL entry module

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: Event monitoring/capture module

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: 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: vertical scrolling event; first get the scrolltop parameter of the controlled web page:

string top＝document.GetElementsByTagName("HTML")[0].ScrollTop.ToString(); then you can pass/broadcast actions to other browsers through the document2.Window.ScrollTo function;

D: Horizontal scrolling event; similar to vertical scrolling event, except that top is changed to left:

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

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: Event real-time broadcast module

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: 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: 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: Smart custom setting module

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: 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: 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: 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: 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: 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: 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.

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. 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 entry module, when the URL is switched, all browser pages are switched uniformly; 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. 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; 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; The Gecko kernel compatible module is compatible with the Firefox kernel; The described Webkit kernel compatibility module: as a Google kernel to achieve compatibility; The said Presto kernel compatible module: it is compatible with Opera kernel. 3. A method for realizing the device according to claim 1 or 2, characterized in that: the method comprises the steps of: (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) 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. 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. 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" creates new registry data associated with the execution file of this application. 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. 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. 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. 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: 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: 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: 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: horizontal scroll event; similar to vertical scroll event, change top to left: string left=document.GetElementsByTagName("HTML")[0].ScrollLeft.ToString(); 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. 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: 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: 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: 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. 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: 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: 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: 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.