KR20150045564A - Method and system for connecting input-output between browsers - Google Patents

Method and system for connecting input-output between browsers Download PDF

Info

Publication number
KR20150045564A
KR20150045564A KR20130124856A KR20130124856A KR20150045564A KR 20150045564 A KR20150045564 A KR 20150045564A KR 20130124856 A KR20130124856 A KR 20130124856A KR 20130124856 A KR20130124856 A KR 20130124856A KR 20150045564 A KR20150045564 A KR 20150045564A
Authority
KR
South Korea
Prior art keywords
browser
canvas
web page
changed
dom node
Prior art date
Application number
KR20130124856A
Other languages
Korean (ko)
Inventor
김상태
이수빈
Original Assignee
한국과학기술원
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 한국과학기술원 filed Critical 한국과학기술원
Priority to KR20130124856A priority Critical patent/KR20150045564A/en
Priority to PCT/KR2014/001443 priority patent/WO2015056849A1/en
Publication of KR20150045564A publication Critical patent/KR20150045564A/en

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F17/00—Digital computing or data processing equipment or methods, specially adapted for specific functions

Landscapes

  • Engineering & Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • Theoretical Computer Science (AREA)
  • Data Mining & Analysis (AREA)
  • Databases & Information Systems (AREA)
  • Mathematical Physics (AREA)
  • Software Systems (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • Information Transfer Between Computers (AREA)

Abstract

A method and system for connecting input and output between browsers are provided. The method for connecting input and output between browsers comprises the steps of: providing a partial area of a webpage provided by a source browser through a relay server to a canvas browser, and detecting an input event which occurs in a partial area provided by the canvas browser; transmitting, to the relay server, information on a target document object model (DOM) node corresponding to the input event and information on the input event; receiving the information on the target DOM node and the information on the input event from the relay server on the source browser, and retrieving the target DOM node on the webpage; triggering the input event to the retrieved target DOM node to generate a mutation event; and sensing at least one of the changed target DOM node or the changed webpage based on the generated mutation event, and transmitting, to the relay server, information on the at least one of the changed target DOM node or the changed webpage. The method further includes receiving the information on the at least one of the changed target DOM node or the changed webpage from the relay server on the canvas browser, and applying the received information to the canvas browser.

Description

브라우저간의 입출력을 연계하는 방법 및 시스템{METHOD AND SYSTEM FOR CONNECTING INPUT-OUTPUT BETWEEN BROWSERS}METHOD AND SYSTEM FOR CONNECTING INPUT-OUTPUT BETWEEN BROWSERS < RTI ID = 0.0 >

본 발명의 실시예들은 브라우저간의 입출력을 연계하는 시스템 및 그 방법에 관한 기술로서, 소스 브라우저와 연결된 캔버스 브라우저에서 발생하는 입력 이벤트를 소스 브라우저에 연결하고, 소스 브라우저에서 발생하는 출력 이벤트를 캔버스 브라우저로 연결하는 기술에 관한 것이다.
Embodiments of the present invention relate to a system and method for linking input and output between browsers, which connect an input event generated in a canvas browser connected to a source browser to a source browser and output events generated in a source browser to a canvas browser ≪ / RTI >

브라우저에서 웹 페이지를 제공하는 기술은 웹 페이지에 해당하는 HTML(hyper text markup language) 문서를 통해 인터페이스가 이루어지는 것을 특징으로 한다. HTML 문서는 미리 정의된 정적인 태그(tag)를 이용한 표현과 스크립트(JavaScript)를 통해 표현된 컨텐츠의 동적인 변환이 가능하다. 이러한 스크립트는 HTML 태그를 통해 표현된 문서에 대한 DOM(Document Object Model) 노드를 지원함으로써 쉽고 자유로운 변환을 가능하게 한다.The technology for providing a web page in a browser is characterized in that an interface is made through an HTML (hyper text markup language) document corresponding to the web page. The HTML document is capable of expressing using a predefined static tag and dynamically converting the content expressed through a script (JavaScript). These scripts support a Document Object Model (DOM) node for the document represented by HTML tags, making it easy and free to transform.

그러나, HTML 문서는 하나의 브라우저에서 표현되는 것을 가정으로 W3C(world wide web consortium) 표준 규약이 정해져 있기 때문에 브라우저간의 입출력을 연계하여, 웹 페이지를 공유, 이동 및 결합을 수행하고자 하는 경우, 브라우저 자체적으로 이러한 기능을 지원하지 않는다면, 불가능하다는 한계를 갖는다.However, since the W3C (world wide web consortium) standard protocol is defined on the assumption that an HTML document is expressed in one browser, when a user wants to share, move and combine a web page by linking input and output between browsers, If you do not support these functions, you have a limitation.

이에, 본 명세서에서는 브라우저간의 입출력을 연계하여, 웹 페이지를 공유하는 기술을 제안한다.
Accordingly, in this specification, a technique of sharing a web page by linking input and output between browsers is proposed.

본 발명의 실시예에 따르면, 브라우저간의 입출력을 연계하여, 웹 페이지를 공유하는 방법, 장치 및 시스템을 제공한다.According to an embodiment of the present invention, a method, an apparatus, and a system for sharing a web page by linking input and output between browsers are provided.

또한, 본 발명의 실시예에 따르면, 캔버스 브라우저에서 발생하는 입력 이벤트에 대응하는 소스 브라우저의 대상 DOM 노드를 탐색하여, 캔버스 브라우저에서 발생한 입력 이벤트를 소스 브라우저에 적용하는 방법, 장치 및 시스템을 제공한다.According to an embodiment of the present invention, there is provided a method, apparatus, and system for searching a target DOM node of a source browser corresponding to an input event occurring in a canvas browser and applying an input event generated in a canvas browser to a source browser .

또한, 본 발명의 실시예에 따르면, 소스 브라우저에서 발생하는 변이 이벤트에 응답하여, 변화된 대상 DOM 노드 및 변화된 웹 페이지를 캔버스 브라우저에 적용하는 방법, 장치 및 시스템을 제공한다.
Also, in accordance with an embodiment of the present invention, a method, apparatus, and system are provided for applying a changed target DOM node and a changed web page to a canvas browser in response to a mutation event occurring in a source browser.

본 발명에 실시예에 따르면, 브라우저간의 입출력을 연계하는 방법은 중계 서버를 통하여 소스 브라우저(Source Browser)에 의해 제공되는 웹 페이지 중 일부 영역을 캔버스 브라우저(Canvas Browser)로 제공하고, 상기 캔버스 브라우저에 의해 제공되는 일부 영역에서 발생하는 입력 이벤트를 검출하는 단계; 상기 입력 이벤트에 대응하는 대상 DOM(Document Object Model) 노드에 대한 정보 및 상기 입력 이벤트에 대한 정보를 상기 중계 서버로 전송하는 단계; 상기 소스 브라우저 상에서 상기 중계 서버로부터 상기 대상 DOM 노드에 대한 정보 및 상기 입력 이벤트에 대한 정보를 수신하여, 상기 웹 페이지 상에서 상기 대상 DOM 노드를 탐색하는 단계; 상기 탐색된 대상 DOM 노드에 상기 입력 이벤트를 트리거(Trigger)하여 변이 이벤트(Mutation Event)를 발생시키는 단계; 및 상기 발생된 변이 이벤트를 기초로, 변화된 대상 DOM 노드 또는 변화된 웹 페이지 중 적어도 어느 하나를 감지하여, 상기 변화된 대상 DOM 노드 또는 상기 변화된 웹 페이지 중 적어도 어느 하나에 대한 정보를 상기 중계 서버로 전송하는 단계를 포함한다.According to an embodiment of the present invention, a method of linking input / output between browsers includes providing a canvas browser with a part of a web page provided by a source browser through a relay server, Detecting an input event occurring in some area provided by the input device; Transmitting information about a target DOM (Document Object Model) node corresponding to the input event and information about the input event to the relay server; Receiving information on the target DOM node and information on the input event from the relay server on the source browser and searching the target DOM node on the web page; Generating a mutation event by triggering the input event to the searched target DOM node; And detecting at least one of a changed target DOM node or a changed web page based on the generated variation event and transmitting information about at least one of the changed target DOM node or the changed web page to the relay server .

상기 브라우저간의 입출력을 연계하는 방법은 상기 캔버스 브라우저 상에서 상기 중계 서버로부터 상기 변화된 대상 DOM 노드 또는 상기 변화된 웹 페이지 중 적어도 어느 하나에 대한 정보를 수신하여, 상기 캔버스 브라우저에 적용하는 단계를 더 포함할 수 있다.The method of associating input / output between browsers may further include receiving information on at least one of the changed target DOM node or the changed web page from the relay server on the canvas browser and applying the information to the canvas browser have.

상기 웹 페이지 상에서 상기 대상 DOM 노드를 탐색하는 단계는 상기 소스 브라우저의 확장 기능(extension)을 이용하여 상기 소스 브라우저에 의해 제공되는 상기 웹 페이지에 해당하는 HTML(Hyper Text Markup Language) 문서에 포함되는 복수의 DOM 노드들 중 상기 대상 DOM 노드를 탐색하는 단계를 포함할 수 있다.
Wherein the step of searching for the target DOM node on the web page includes a step of searching for a plurality of words included in an HTML (Hyper Text Markup Language) document corresponding to the web page provided by the source browser using an extension of the source browser And searching for the target DOM node among the DOM nodes.

본 발명의 실시예에 따르면, 브라우저간의 입출력을 연계하여, 웹 페이지를 공유하는 방법, 장치 및 시스템을 제공할 수 있다.According to embodiments of the present invention, a method, an apparatus, and a system for sharing a web page by linking input and output between browsers can be provided.

또한, 본 발명의 실시예에 따르면, 캔버스 브라우저에서 발생하는 입력 이벤트에 대응하는 소스 브라우저의 대상 DOM 노드를 탐색하여, 캔버스 브라우저에서 발생한 입력 이벤트를 소스 브라우저에 적용하는 방법, 장치 및 시스템을 제공할 수 있다.Also, according to an embodiment of the present invention, there is provided a method, apparatus, and system for searching a target DOM node of a source browser corresponding to an input event occurring in a canvas browser and applying an input event generated in the canvas browser to a source browser .

또한, 본 발명의 실시예에 따르면, 소스 브라우저에서 발생하는 변이 이벤트에 응답하여, 변화된 대상 DOM 노드 및 변화된 웹 페이지를 캔버스 브라우저에 적용하는 방법, 장치 및 시스템을 제공할 수 있다.
Further, according to the embodiment of the present invention, it is possible to provide a method, apparatus, and system for applying a changed target DOM node and a changed web page to a canvas browser in response to a variation event occurring in a source browser.

도 1은 본 발명의 일실시예에 있어서, 브라우저간의 입출력을 연계하는 시스템을 나타낸 개념도이다.
도 2는 본 발명의 일실시예에 있어서, 브라우저간의 입출력을 연계하는 방법을 설명하기 위한 실시도이다.
도 3은 본 발명의 일실시예에 있어서, 브라우저간의 입출력을 연계하는 방법을 나타낸 플로우 차트이다.
도 4는 본 발명의 일실시예에 있어서, 브라우저간의 입출력을 연계하는 시스템을 나타낸 블록도이다.1 is a conceptual diagram showing a system for linking input and output between browsers according to an embodiment of the present invention.
2 is an exemplary diagram for explaining a method of linking input and output between browsers according to an embodiment of the present invention.
3 is a flowchart showing a method of linking input and output between browsers in one embodiment of the present invention.
4 is a block diagram illustrating a system for linking input and output between browsers in one embodiment of the present invention.

이하, 본 발명에 따른 실시예들을 첨부된 도면을 참조하여 상세하게 설명한다. 그러나 본 발명이 실시예들에 의해 제한되거나 한정되는 것은 아니다. 또한, 각 도면에 제시된 동일한 참조 부호는 동일한 부재를 나타낸다.
Hereinafter, embodiments according to the present invention will be described in detail with reference to the accompanying drawings. However, the present invention is not limited to or limited by the embodiments. In addition, the same reference numerals shown in the drawings denote the same members.

도 1은 본 발명의 일실시예에 있어서, 브라우저간의 입출력을 연계하는 시스템을 나타낸 개념도이다.1 is a conceptual diagram showing a system for linking input and output between browsers according to an embodiment of the present invention.

도 1을 참조하면, 중계 서버(110)는 소스 브라우저(120)와 캔버스 브라우저(130)를 연결하여, 웹 페이지의 부분적인 공유를 지원할 수 있다. 여기서, 소스 브라우저(120)에 의해 제공되는 웹 페이지의 일부 영역이 중계 서버(110)를 통하여 캔버스 브라우저(130)에 제공되어, 캔버스 브라우저(130)는 소스 브라우저(120)에 의해 제공되는 웹 페이지의 일부 영역을 렌더링(Rendering)할 수 있다.Referring to FIG. 1, the relay server 110 may support the partial sharing of web pages by connecting the source browser 120 and the canvas browser 130. Here, a part of the web page provided by the source browser 120 is provided to the canvas browser 130 via the relay server 110, so that the canvas browser 130 can access the web page provided by the source browser 120 And may render a part of the area.

이 때, 소스 브라우저(120) 및 캔버스 브라우저(130)는 동일 기종의 통신 단말에서 실행되거나, 서로 다른 기종의 통신 단말에서 실행될 수 있으며, 또한, 동일 사용자의 통신 단말에서 실행되거나, 서로 다른 사용자의 통신 단말에서 실행될 수 있다.At this time, the source browser 120 and the canvas browser 130 can be executed in the communication terminal of the same model, or can be executed in the communication terminal of the different user, or can be executed in the communication terminal of the same user, And can be executed in the communication terminal.

소스 브라우저(120) 및 캔버스 브라우저(130) 각각이 실행되는 경우, 소스 브라우저(120)는 소스 웹 어플리케이션(121)을 이용하여 웹 페이지를 렌더링할 수 있고, 캔버스 브라우저(130)는 캔버스 웹 어플리케이션(131)을 이용하여 웹 페이지를 렌더링할 수 있다.The source browser 120 may render the web page using the source web application 121 and the canvas browser 130 may render the web page using the canvas web application 131 may be used to render the web page.

소스 브라우저(120)는 캔버스 브라우저(130)와 중계 서버(110)를 통하여 연결되어, 캔버스 브라우저(130)에 의해 제공되는 웹 페이지의 일부 영역에서 발생한 입력 이벤트가 소스 브라우저(120)로 전송되고, 소스 브라우저(120)에 의해 제공되는 웹 페이지에서 입력 이벤트에 응답하여 발생된 변이 이벤트가 캔버스 브라우저(130)로 전송됨으로써, 소스 브라우저(120) 및 캔버스 브라우저(130)간의 입출력이 연계될 수 있다.The source browser 120 is connected to the canvas browser 130 via the relay server 110 so that an input event generated in a part of the web page provided by the canvas browser 130 is transmitted to the source browser 120, The input and output between the source browser 120 and the canvas browser 130 can be linked by transmitting the variation event generated in response to the input event in the web page provided by the source browser 120 to the canvas browser 130. [

구체적으로, 브라우저간의 입출력을 연계하는 시스템은 소스 브라우저(120)에 의해 제공되는 웹 페이지 중 일부 영역을 캔버스 브라우저(130)로 제공함으로써, 캔버스 브라우저(130)에 의해 제공되는 일부 영역을 설정할 수 있다.Specifically, the system for linking input and output between browsers can set some areas provided by the canvas browser 130 by providing some of the web pages provided by the source browser 120 to the canvas browser 130 .

그 후, 브라우저간의 입출력을 연계하는 시스템은 캔버스 브라우저(130)에 의해 제공되는 웹 페이지의 일부 영역에서 발생하는 입력 이벤트를 검출하여, 입력 이벤트에 대응하는 대상 DOM 노드에 대한 정보 및 입력 이벤트에 대한 정보를 중계 서버(110)를 통하여 소스 브라우저(120)로 전송한다.Thereafter, a system for linking input / output between browsers detects an input event occurring in a part of a web page provided by the canvas browser 130, and stores information about the target DOM node corresponding to the input event and information And transmits the information to the source browser 120 through the relay server 110.

소스 브라우저(120) 상에서 대상 DOM 노드에 대한 정보 및 입력 이벤트에 대한 정보가 수신되면, 브라우저간의 입출력을 연계하는 시스템은 소스 브라우저(120)에 의해 제공되는 웹 페이지 상에서 대상 DOM 노드를 탐색하고, 탐색된 대상 DOM 노드에 입력 이벤트를 트리거하여 변이 이벤트를 발생시킨다.When information about a target DOM node and information about an input event are received on the source browser 120, a system for linking input and output between browsers searches for a target DOM node on a web page provided by the source browser 120, Trigger an input event on a target DOM node to raise a mutation event.

이 때, 브라우저간의 입출력을 연계하는 시스템은 소스 브라우저(120)의 확장 기능(122)을 이용하여 소스 브라우저(120)에 의해 제공되는 웹 페이지에 해당하는 HTML 문서에 포함되는 복수의 DOM 노드들 중 대상 DOM 노드를 탐색할 수 있다. 여기서, 확장 기능(122)은 C 언어를 확장한 객체 지향 프로그래밍 언어인 C++(C plus plus)를 기반으로 할 수 있다.At this time, a system for linking input / output between browsers may use an extension function 122 of the source browser 120 to select one of a plurality of DOM nodes included in an HTML document corresponding to a web page provided by the source browser 120 You can navigate to the target DOM node. Here, the extension function 122 may be based on C ++ (C plus plus), which is an object-oriented programming language that extends C language.

이어서, 브라우저간의 입출력을 연계하는 시스템은 발생된 변이 이벤트를 기초로, 변화된 대상 DOM 노드 또는 변화된 웹 페이지 중 적어도 어느 하나를 감지하여, 변화된 대상 DOM 노드 또는 변화된 웹 페이지 중 적어도 하나에 대한 정보를 중계 서버(110)를 통하여 캔버스 브라우저(130)로 전송한다.The system for linking input and output between browsers detects at least one of the changed target DOM node or the changed web page based on the generated variation event and transmits information about at least one of the changed target DOM node or the changed web page And transmits it to the canvas browser 130 through the server 110.

그 후, 브라우저간의 입출력을 연계하는 시스템은 수신된, 변화된 대상 DOM 노드 또는 변화된 웹 페이지 중 적어도 어느 하나에 대한 정보에 기초하여, 변화된 대상 DOM 노드 또는 변화된 웹 페이지 중 적어도 어느 하나를 캔버스 브라우저(130)에 적용한다. 이 때, 브라우저간의 입출력을 연계하는 시스템은 캔버스 브라우저(130)에 변화된 대상 DOM 노드가 적용된 경우, 변화된 대상 DOM 노드에 대응하는 웹 페이지의 일부 영역을 제공할 수 있고, 캔버스 브라우저(130)에 변화된 웹 페이지가 적용된 경우, 변화된 웹 페이지를 그대로 제공할 수 있다. 이에 대한 상세한 설명은 도 2를 참조하여 기재하기로 한다.
Thereafter, the system for associating the input / output between browsers can transmit at least one of the changed target DOM node or the changed web page to the canvas browser 130 (130) based on the received information on at least one of the changed target DOM node or the changed web page ). In this case, when the changed target DOM node is applied to the canvas browser 130, the system for linking input / output between browsers can provide a part of the web page corresponding to the changed target DOM node, When a web page is applied, the changed web page can be provided as it is. A detailed description thereof will be described with reference to Fig.

도 2는 본 발명의 일실시예에 있어서, 브라우저간의 입출력을 연계하는 방법을 설명하기 위한 실시도이다.2 is an exemplary diagram for explaining a method of linking input and output between browsers according to an embodiment of the present invention.

도 2를 참조하면, 브라우저간의 입출력을 연계하는 시스템은 소스 브라우저에 의해 제공되는 웹 페이지(210) 중 일부 영역(211)을 캔버스 브라우저로 제공하고, 캔버스 브라우저를 통하여 일부 영역(220)을 렌더링할 수 있다.Referring to FIG. 2, a system for linking input / output between browsers provides a canvas browser with a partial area 211 of a web page 210 provided by a source browser, and a partial area 220 through a canvas browser .

이 때, 캔버스 브라우저를 통하여 제공되는 일부 영역(220)에서 입력 이벤트(221)가 발생되면, 브라우저간의 입출력을 연계하는 시스템은 입력 이벤트(211)를 검출하여, 입력 이벤트(211)에 대응하는 대상 DOM 노드에 대한 정보 및 입력 이벤트(211)에 대한 정보를 중계 서버를 통하여 소스 브라우저로 전송한다.At this time, when an input event 221 is generated in a certain area 220 provided through the canvas browser, a system that links input and output between browsers detects an input event 211, Information on the DOM node and information on the input event 211 to the source browser through the relay server.

브라우저간의 입출력을 연계하는 시스템은 소스 브라우저에 의해 제공되는 웹 페이지(210) 상에서 대상 DOM 노드를 탐색하고, 탐색된 대상 DOM 노드에 입력 이벤트(212)를 트리거하여 변이 이벤트를 발생시킨다.The system for associating input and output between browsers searches for a target DOM node on the web page 210 provided by the source browser and triggers an input event 212 on the searched target DOM node to generate a mutation event.

이어서, 브라우저간의 입출력을 연계하는 시스템은 소스 브라우저에 의해 제공되는 웹 페이지(230) 중 발생된 변이 이벤트를 기초로, 변화된 DOM 노드 또는 변화된 웹 페이지(231) 중 적어도 하나를 감지하여, 변화된 대상 DOM 노드 또는 변화된 웹 페이지(231) 중 적어도 어느 하나에 대한 정보를 중계 서버를 통하여 캔버스 브라우저로 전송한다.The system for associating input and output between browsers detects at least one of the changed DOM node or the changed web page 231 based on the generated variation event among the web pages 230 provided by the source browser, Node or the changed web page 231 to the canvas browser through the relay server.

그 후, 브라우저간의 입출력을 연계하는 시스템은 변화된 대상 DOM 노드 또는 변화된 웹 페이지(231) 중 적어도 어느 하나를 캔버스 브라우저를 통하여 제공되는 일부 영역(240)에 적용할 수 있다.
Thereafter, the system connecting input and output between browsers can apply at least one of the changed target DOM node or the changed web page 231 to the partial area 240 provided through the canvas browser.

도 3은 본 발명의 일실시예에 있어서, 브라우저간의 입출력을 연계하는 방법을 나타낸 플로우 차트이다.3 is a flowchart showing a method of linking input and output between browsers in one embodiment of the present invention.

도 3을 참조하면, 브라우저간의 입출력을 연계하는 시스템은 중계 서버를 통하여 소스 브라우저(Source Browser)에 의해 제공되는 웹 페이지 중 일부 영역을 캔버스 브라우저(Canvas Browser)에 제공함으로써, 캔버스 브라우저에 의해 제공되는 일부 영역을 설정하고, 캔버스 브라우저에 의해 제공되는 일부 영역에서 발생하는 입력 이벤트를 검출한다(310).Referring to FIG. 3, a system for linking input / output between browsers provides a canvas browser with a part of a web page provided by a source browser through a relay server, thereby providing a canvas browser Some areas are set, and input events occurring in some areas provided by the canvas browser are detected (310).

또한, 브라우저간의 입출력을 연계하는 시스템은 입력 이벤트에 대응하는 대상 DOM(Document Object Model) 노드에 대한 정보 및 입력 이벤트에 대한 정보를 중계 서버로 전송한다(320).In addition, the system for linking input / output between browsers transmits information about a target DOM (Document Object Model) node corresponding to an input event and information about an input event to a relay server (320).

또한, 브라우저간의 입출력을 연계하는 시스템은 소스 브라우저 상에서 중계 서버로부터 대상 DOM 노드에 대한 정보 및 입력 이벤트에 대한 정보를 수신하여, 웹 페이지 상에서 대상 DOM 노드를 탐색한다(330).In addition, the system that links input / output between browsers receives information about a target DOM node and input event from a relay server on a source browser, and searches for a target DOM node on a web page (330).

이 때, 브라우저간의 입출력을 연계하는 시스템은 소스 브라우저의 확장 기능(extension)을 이용하여 소스 브라우저에 의해 제공되는 웹 페이지에 해당하는 HTML(Hyper Text Markup Language) 문서에 포함되는 복수의 DOM 노드들 중 대상 DOM 노드를 탐색할 수 있다.At this time, the system for linking input / output between browsers can use an extension of a source browser to select one of a plurality of DOM nodes included in an HTML (Hyper Text Markup Language) document corresponding to a web page provided by a source browser You can navigate to the target DOM node.

또한, 브라우저간의 입출력을 연계하는 시스템은 탐색된 대상 DOM 노드에 입력 이벤트를 트리거(Trigger)하여 변이 이벤트(Mutation Event)를 발생시킨다(340).In addition, a system that links input / output between browsers triggers an input event to a detected target DOM node to generate a mutation event (340).

또한, 브라우저간의 입출력을 연계하는 시스템은 발생된 변이 이벤트를 기초로, 변화된 대상 DOM 대상 노드 또는 변화된 웹 페이지 중 적어도 어느 하나를 감지하여, 변화된 대상 DOM 노드 또는 변화된 웹 페이지 중 적어도 어느 하나에 대한 정보를 중계 서버로 전송한다(350).In addition, the system for linking input / output between browsers detects at least one of the changed target DOM target node or the changed web page based on the generated mutation event, and detects information about at least one of the changed target DOM node or the changed web page To the relay server (350).

또한, 브라우저간의 입출력을 연계하는 시스템은 캔버스 브라우저 상에서 중계 서버로부터 변화된 대상 DOM 노드 또는 변화된 웹 페이지 중 적어도 어느 하나에 대한 정보를 수신하여, 캔버스 브라우저에 적용한다(360).
In addition, the system for linking input / output between browsers receives information about at least one of the changed target DOM node or the changed web page from the relay server on the canvas browser, and applies the information to the canvas browser (360).

도 4는 본 발명의 일실시예에 있어서, 브라우저간의 입출력을 연계하는 시스템을 나타낸 블록도이다.4 is a block diagram illustrating a system for linking input and output between browsers in one embodiment of the present invention.

도 4를 참조하면, 브라우저간의 입출력을 연계하는 시스템은 캔버스 브라우저 검출부(410), 캔버스 브라우저 전송부(420), 소스 브라우저 탐색부(430), 소스 브라우저 발생부(440), 소스 브라우저 전송부(450) 및 캔버스 브라우저 적용부(460)를 포함한다.4, a system for linking input / output between browsers includes a canvas browser detecting unit 410, a canvas browser transmitting unit 420, a source browser searching unit 430, a source browser generating unit 440, a source browser transmitting unit 450 and a canvas browser application unit 460.

캔버스 브라우저 검출부(410)는 중계 서버를 통하여 소스 브라우저(Source Browser)에 의해 제공되는 웹 페이지 중 일부 영역을 캔버스 브라우저(Canvas Browser)로 제공하고, 캔버스 브라우저에 의해 제공되는 일부 영역에서 발생하는 입력 이벤트를 검출한다.The canvas browser detection unit 410 provides a canvas browser with a part of a web page provided by a source browser through a relay server and detects an input event occurring in a partial area provided by a canvas browser .

캔버스 브라우저 전송부(420)는 입력 이벤트에 대응하는 대상 DOM(Document Object Model) 노드에 대한 정보 및 입력 이벤트에 대한 정보를 중계 서버로 전송한다.The canvas browser transmitting unit 420 transmits information about a target DOM (Document Object Model) node corresponding to the input event and information about the input event to the relay server.

소스 브라우저 탐색부(430)는 소스 브라우저 상에서 중계 서버로부터 대상 DOM 노드에 대한 정보 및 입력 이벤트에 대한 정보를 수신하여, 웹 페이지 상에서 대상 DOM 노드를 탐색한다.The source browser search unit 430 receives the information about the target DOM node and the input event from the relay server on the source browser, and searches for the target DOM node on the web page.

또한, 소스 브라우저 탐색부(430)는 소스 브라우저의 확장 기능을 이용하여 소스 브라우저에 의해 제공되는 웹 페이지에 해당하는 HTML 문서에 포함되는 복수의 DOM 노드들 중 대상 DOM 노드를 탐색할 수 있다.In addition, the source browser search unit 430 can search the target DOM node among a plurality of DOM nodes included in the HTML document corresponding to the web page provided by the source browser using the extension function of the source browser.

소스 브라우저 발생부(440)는 탐색된 대상 DOM 노드에 입력 이벤트를 트리거(Trigger)하여 변이 이벤트(Mutation Event)를 발생시킨다.The source browser generating unit 440 triggers an input event to the searched target DOM node to generate a mutation event.

소스 브라우저 전송부(450)는 발생된 변이 이벤트를 기초로, 변화된 대상 DOM 노드 또는 변화된 웹 페이지 중 적어도 어느 하나를 감지하여, 변화된 대상 DOM 노드 또는 변화된 웹 페이지 중 적어도 어느 하나에 대한 정보를 중계 서버로 전송한다.The source browser transmitting unit 450 detects at least one of the changed target DOM node or the changed web page based on the generated mutation event and transmits information about at least one of the changed target DOM node or the changed web page to the relay server Lt; / RTI >

캔버스 브라우저 적용부(460)는 캔버스 브라우저 상에서 중계 서버로부터 변화된 대상 DOM 노드 또는 변화된 웹 페이지 중 적어도 어느 하나에 대한 정보를 수신하여, 캔버스 브라우저에 적용한다.The canvas browser application unit 460 receives information about at least one of the changed target DOM node or the changed web page from the relay server on the canvas browser, and applies the information to the canvas browser.

이와 같이, 본 발명의 실시예에 따르면, 브라우저간의 입출력을 연계하는 시스템은 캔버스 브라우저에서 발생하는 입력 이벤트에 대응하는 소스 브라우저의 대상 DOM 노드를 탐색하여 캔버스 브라우저에서 발생한 입력 이벤트를 소스 브라우저에 의해 제공되는 웹 페이지에 적용함으로써, 소스 브라우저에 의해 제공되는 웹 페이지에서 변이 이벤트를 발생시킬 수 있다.As described above, according to the embodiment of the present invention, a system for linking input and output between browsers searches for a target DOM node of a source browser corresponding to an input event occurring in a canvas browser, and provides an input event generated in the canvas browser To a web page provided by the source browser, thereby generating a mutation event in the web page provided by the source browser.

또한, 브라우저간의 입출력을 연계하는 시스템은 소스 브라우저에 의해 제공되는 웹 페이지에서 발생하는 변이 이벤트에 응답하여, 변화된 대상 DOM 노드 및 변화된 웹 페이지를 캔버스 브라우저에 적용함으로써, 캔버스 브라우저에 의해 제공되는 웹 페이지에, 입력 이벤트에 응답하여 변화된 웹 페이지를 제공할 수 있다.
In addition, a system for associating input and output between browsers may be configured to apply a changed target DOM node and a changed web page to a canvas browser in response to a variation event occurring in the web page provided by the source browser, In response to an input event.

이상에서 설명된 장치는 하드웨어 구성요소, 소프트웨어 구성요소, 및/또는 하드웨어 구성요소 및 소프트웨어 구성요소의 조합으로 구현될 수 있다. 예를 들어, 실시예들에서 설명된 장치 및 구성요소는, 예를 들어, 프로세서, 콘트롤러, ALU(arithmetic logic unit), 디지털 신호 프로세서(digital signal processor), 마이크로컴퓨터, FPA(field programmable array), PLU(programmable logic unit), 마이크로프로세서, 또는 명령(instruction)을 실행하고 응답할 수 있는 다른 어떠한 장치와 같이, 하나 이상의 범용 컴퓨터 또는 특수 목적 컴퓨터를 이용하여 구현될 수 있다. 처리 장치는 운영 체제(OS) 및 상기 운영 체제 상에서 수행되는 하나 이상의 소프트웨어 애플리케이션을 수행할 수 있다. 또한, 처리 장치는 소프트웨어의 실행에 응답하여, 데이터를 접근, 저장, 조작, 처리 및 생성할 수도 있다. 이해의 편의를 위하여, 처리 장치는 하나가 사용되는 것으로 설명된 경우도 있지만, 해당 기술분야에서 통상의 지식을 가진 자는, 처리 장치가 복수 개의 처리 요소(processing element) 및/또는 복수 유형의 처리 요소를 포함할 수 있음을 알 수 있다. 예를 들어, 처리 장치는 복수 개의 프로세서 또는 하나의 프로세서 및 하나의 콘트롤러를 포함할 수 있다. 또한, 병렬 프로세서(parallel processor)와 같은, 다른 처리 구성(processing configuration)도 가능하다.The apparatus described above may be implemented as a hardware component, a software component, and / or a combination of hardware components and software components. For example, the apparatus and components described in the embodiments may be implemented within a computer system, such as, for example, a processor, a controller, an arithmetic logic unit (ALU), a digital signal processor, a microcomputer, a field programmable array (FPA) A programmable logic unit (PLU), a microprocessor, or any other device capable of executing and responding to instructions. The processing device may execute an operating system (OS) and one or more software applications running on the operating system. The processing device may also access, store, manipulate, process, and generate data in response to execution of the software. For ease of understanding, the processing apparatus may be described as being used singly, but those skilled in the art will recognize that the processing apparatus may have a plurality of processing elements and / As shown in FIG. For example, the processing unit may comprise a plurality of processors or one processor and one controller. Other processing configurations are also possible, such as a parallel processor.

소프트웨어는 컴퓨터 프로그램(computer program), 코드(code), 명령(instruction), 또는 이들 중 하나 이상의 조합을 포함할 수 있으며, 원하는 대로 동작하도록 처리 장치를 구성하거나 독립적으로 또는 결합적으로(collectively) 처리 장치를 명령할 수 있다. 소프트웨어 및/또는 데이터는, 처리 장치에 의하여 해석되거나 처리 장치에 명령 또는 데이터를 제공하기 위하여, 어떤 유형의 기계, 구성요소(component), 물리적 장치, 가상 장치(virtual equipment), 컴퓨터 저장 매체 또는 장치, 또는 전송되는 신호 파(signal wave)에 영구적으로, 또는 일시적으로 구체화(embody)될 수 있다. 소프트웨어는 네트워크로 연결된 컴퓨터 시스템 상에 분산되어서, 분산된 방법으로 저장되거나 실행될 수도 있다. 소프트웨어 및 데이터는 하나 이상의 컴퓨터 판독 가능 기록 매체에 저장될 수 있다.The software may include a computer program, code, instructions, or a combination of one or more of the foregoing, and may be configured to configure the processing device to operate as desired or to process it collectively or collectively Device can be commanded. The software and / or data may be in the form of any type of machine, component, physical device, virtual equipment, computer storage media, or device , Or may be permanently or temporarily embodied in a transmitted signal wave. The software may be distributed over a networked computer system and stored or executed in a distributed manner. The software and data may be stored on one or more computer readable recording media.

실시예에 따른 방법은 다양한 컴퓨터 수단을 통하여 수행될 수 있는 프로그램 명령 형태로 구현되어 컴퓨터 판독 가능 매체에 기록될 수 있다. 상기 컴퓨터 판독 가능 매체는 프로그램 명령, 데이터 파일, 데이터 구조 등을 단독으로 또는 조합하여 포함할 수 있다. 상기 매체에 기록되는 프로그램 명령은 실시예를 위하여 특별히 설계되고 구성된 것들이거나 컴퓨터 소프트웨어 당업자에게 공지되어 사용 가능한 것일 수도 있다. 컴퓨터 판독 가능 기록 매체의 예에는 하드 디스크, 플로피 디스크 및 자기 테이프와 같은 자기 매체(magnetic media), CD-ROM, DVD와 같은 광기록 매체(optical media), 플롭티컬 디스크(floptical disk)와 같은 자기-광 매체(magneto-optical media), 및 롬(ROM), 램(RAM), 플래시 메모리 등과 같은 프로그램 명령을 저장하고 수행하도록 특별히 구성된 하드웨어 장치가 포함된다. 프로그램 명령의 예에는 컴파일러에 의해 만들어지는 것과 같은 기계어 코드뿐만 아니라 인터프리터 등을 사용해서 컴퓨터에 의해서 실행될 수 있는 고급 언어 코드를 포함한다. 상기된 하드웨어 장치는 실시예의 동작을 수행하기 위해 하나 이상의 소프트웨어 모듈로서 작동하도록 구성될 수 있으며, 그 역도 마찬가지이다.The method according to an embodiment may be implemented in the form of a program command that can be executed through various computer means and recorded in a computer-readable medium. The computer-readable medium may include program instructions, data files, data structures, and the like, alone or in combination. The program instructions to be recorded on the medium may be those specially designed and configured for the embodiments or may be available to those skilled in the art of computer software. Examples of computer-readable media include magnetic media such as hard disks, floppy disks and magnetic tape; optical media such as CD-ROMs and DVDs; magnetic media such as floppy disks; Magneto-optical media, and hardware devices specifically configured to store and execute program instructions such as ROM, RAM, flash memory, and the like. Examples of program instructions include machine language code such as those produced by a compiler, as well as high-level language code that can be executed by a computer using an interpreter or the like. The hardware devices described above may be configured to operate as one or more software modules to perform the operations of the embodiments, and vice versa.

이상과 같이 실시예들이 비록 한정된 실시예와 도면에 의해 설명되었으나, 해당 기술분야에서 통상의 지식을 가진 자라면 상기의 기재로부터 다양한 수정 및 변형이 가능하다. 예를 들어, 설명된 기술들이 설명된 방법과 다른 순서로 수행되거나, 및/또는 설명된 시스템, 구조, 장치, 회로 등의 구성요소들이 설명된 방법과 다른 형태로 결합 또는 조합되거나, 다른 구성요소 또는 균등물에 의하여 대치되거나 치환되더라도 적절한 결과가 달성될 수 있다.While the present invention has been particularly shown and described with reference to exemplary embodiments thereof, it is to be understood that the invention is not limited to the disclosed exemplary embodiments. For example, it is to be understood that the techniques described may be performed in a different order than the described methods, and / or that components of the described systems, structures, devices, circuits, Lt; / RTI > or equivalents, even if it is replaced or replaced.

그러므로, 다른 구현들, 다른 실시예들 및 특허청구범위와 균등한 것들도 후술하는 특허청구범위의 범위에 속한다.Therefore, other implementations, other embodiments, and equivalents to the claims are also within the scope of the following claims.

Claims (3)

중계 서버를 통하여 소스 브라우저(Source Browser)에 의해 제공되는 웹 페이지 중 일부 영역을 캔버스 브라우저(Canvas Browser)로 제공하고, 상기 캔버스 브라우저에 의해 제공되는 일부 영역에서 발생하는 입력 이벤트를 검출하는 단계;
상기 입력 이벤트에 대응하는 대상 DOM(Document Object Model) 노드에 대한 정보 및 상기 입력 이벤트에 대한 정보를 상기 중계 서버로 전송하는 단계;
상기 소스 브라우저 상에서 상기 중계 서버로부터 상기 대상 DOM 노드에 대한 정보 및 상기 입력 이벤트에 대한 정보를 수신하여, 상기 웹 페이지 상에서 상기 대상 DOM 노드를 탐색하는 단계;
상기 탐색된 대상 DOM 노드에 상기 입력 이벤트를 트리거(Trigger)하여 변이 이벤트(Mutation Event)를 발생시키는 단계; 및
상기 발생된 변이 이벤트를 기초로, 변화된 대상 DOM 노드 또는 변화된 웹 페이지 중 적어도 어느 하나를 감지하여, 상기 변화된 대상 DOM 노드 또는 상기 변화된 웹 페이지 중 적어도 어느 하나에 대한 정보를 상기 중계 서버로 전송하는 단계
를 포함하는 브라우저간의 입출력을 연계하는 방법.
Providing an area of a web page provided by a source browser through a relay server to a canvas browser and detecting an input event occurring in a partial area provided by the canvas browser;
Transmitting information about a target DOM (Document Object Model) node corresponding to the input event and information about the input event to the relay server;
Receiving information on the target DOM node and information on the input event from the relay server on the source browser and searching the target DOM node on the web page;
Generating a mutation event by triggering the input event to the searched target DOM node; And
Detecting at least one of a changed target DOM node or a changed web page based on the generated variation event and transmitting information about at least one of the changed target DOM node or the changed web page to the relay server
To the browser including the browser.
제1항에 있어서,
상기 캔버스 브라우저 상에서 상기 중계 서버로부터 상기 변화된 대상 DOM 노드 또는 상기 변화된 웹 페이지 중 적어도 어느 하나에 대한 정보를 수신하여, 상기 캔버스 브라우저에 적용하는 단계
를 더 포함하는 브라우저간의 입출력을 연계하는 방법.
The method according to claim 1,
Receiving information on at least one of the changed target DOM node or the changed web page from the relay server on the canvas browser and applying the information to the canvas browser
To the input / output interface.
제1항에 있어서,
상기 웹 페이지 상에서 상기 대상 DOM 노드를 탐색하는 단계는
상기 소스 브라우저의 확장 기능(extension)을 이용하여 상기 소스 브라우저에 의해 제공되는 상기 웹 페이지에 해당하는 HTML(Hyper Text Markup Language) 문서에 포함되는 복수의 DOM 노드들 중 상기 대상 DOM 노드를 탐색하는 단계
를 포함하는 브라우저간의 입출력을 연계하는 방법.The method according to claim 1,
The step of searching the target DOM node on the web page
Searching the target DOM node among a plurality of DOM nodes included in an HTML (Hyper Text Markup Language) document corresponding to the web page provided by the source browser using an extension of the source browser
To the browser including the browser.
KR20130124856A 2013-10-18 2013-10-18 Method and system for connecting input-output between browsers KR20150045564A (en)

Priority Applications (2)

Application Number Priority Date Filing Date Title
KR20130124856A KR20150045564A (en) 2013-10-18 2013-10-18 Method and system for connecting input-output between browsers
PCT/KR2014/001443 WO2015056849A1 (en) 2013-10-18 2014-02-21 Method and system for linking inputs and outputs between browsers

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
KR20130124856A KR20150045564A (en) 2013-10-18 2013-10-18 Method and system for connecting input-output between browsers

Publications (1)

Publication Number Publication Date
KR20150045564A true KR20150045564A (en) 2015-04-29

Family

ID=53037447

Family Applications (1)

Application Number Title Priority Date Filing Date
KR20130124856A KR20150045564A (en) 2013-10-18 2013-10-18 Method and system for connecting input-output between browsers

Country Status (1)

Country Link
KR (1) KR20150045564A (en)

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN110889056A (en) * 2019-12-06 2020-03-17 北京百度网讯科技有限公司 Page marking method and device

Cited By (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN110889056A (en) * 2019-12-06 2020-03-17 北京百度网讯科技有限公司 Page marking method and device
CN110889056B (en) * 2019-12-06 2023-08-22 北京百度网讯科技有限公司 Page marking method and device

Similar Documents

Publication Publication Date Title
US10114804B2 (en) Representation of an element in a page via an identifier
US9298850B2 (en) System and method for exclusion of irrelevant data from a DOM equivalence
US20150100879A1 (en) Framework for dependency management and automatic file load in a network environment
EP2817697A2 (en) Graphical overlay related to data mining and analytics
KR20140116874A (en) Managing script file dependencies and load times
KR20080053293A (en) Initial server-side content rendering for client-script web pages
US8250059B2 (en) Crawling browser-accessible applications
WO2015063260A1 (en) Establishment of state representation of a web page represented in a web browser
KR20180080535A (en) Apparatus and method for scrapping web data
US9122484B2 (en) Method and apparatus for mashing up web applications
JP5789323B2 (en) Synchronous script delay loading system, synchronous script delay loading method, and computer-readable recording medium on which a program for executing the script is recorded
KR101480214B1 (en) Method and system for web screen streaming based on dom mutation event
CN112384940B (en) Mechanism for WEB crawling of e-commerce resource pages
US10083156B2 (en) Mobile enablement of webpages
JP5604016B1 (en) Script caching method and information processing apparatus using the same
US11570280B2 (en) Systems and methods for rendering interactive web pages
JP5535184B2 (en) Browser execution script conversion system and browser execution script conversion program
CN109246069B (en) Webpage login method and device and readable storage medium
AU2018390863B2 (en) Computer system and method for extracting dynamic content from websites
KR20150045564A (en) Method and system for connecting input-output between browsers
US20130163873A1 (en) Detecting Separator Lines in a Web Page
CN115080154A (en) Page display method and device, storage medium and electronic equipment
US8606773B2 (en) Method for combining and processing web data using tables and programming-by-demonstration
KR102365434B1 (en) Content search method and content search system
KR20150045565A (en) Real time combining method and system of web application between browsers

Legal Events

Date Code Title Description
WITN Application deemed withdrawn, e.g. because no request for examination was filed or no examination fee was paid