JP2012173946A - Web page display device and focus control method - Google Patents

Abstract

PROBLEM TO BE SOLVED: To improve the operation method of a Web browser in a portable terminal or the like.SOLUTION: A Web page display device 100 is configured to perform the rendering of a Web page on the basis of a document file configuring a Web page. A hyper link extraction part 104 is configured to extract an object including a hyper link from the document file. An event handler extraction part 106 is configured to extract an object including a predetermined event handler from a document file. An object storage part 116 is configured to store object information including at least information relating to the arrangement of the extracted object on the Web page. A focus control part 114 is configured to select the object to be focus displayed on the Web page in accordance with a direction operation input by a user. A script execution part 108 is configured to, when the object selected by the focus control part is an object including the event handler, execute the script associated with the event handler.

Description

  The present invention relates to a technique for improving the operability of a web page.

  Browsers for browsing web pages are installed not only in personal computers (PCs) but also in various electronic devices such as mobile phones, game machines, and digital televisions. It is assumed that many web pages are viewed using a PC connected to an input device such as a mouse that can move the pointer to an arbitrary position. For this reason, when browsing a web page with an electronic device other than a PC, such as a mobile phone or a digital television, the operation on the web page may not be successful only with buttons provided on the electronic device or its remote controller. For this reason, the conventional browser has a function of sequentially moving the focus to the object to which the hyperlink is set according to a specific key operation such as a cursor key or a Tab key.

  Patent Document 1 discloses an operation method of a Web browser that detects an anchor tag from an HTML file, assigns numbers for operation from 1 to 10, for example, in the order of detection of the anchor tag, and displays the numbers in the vicinity of the anchor. Is disclosed. According to this, the user can operate the anchor by pressing the number key of the remote controller corresponding to the number in the vicinity of the anchor desired to be operated.

JP 2009-169883 A

  Many recent web pages use dynamic HTML (DHTML) that dynamically changes the display content of the web page on the client side using CSS (Cascading Style Sheet) and JavaScript (registered trademark). As an example, an event handler that generates an event (“onMouseoevr”) when a mouse pointer is placed on a certain object can be set, and JavaScript associated with the event handler can be executed on the client side. As a result, for example, by hovering a mouse pointer over a certain object, it is possible to display an initially hidden object on the browser, or to change the font color or the object size.

  However, if the hyperlink is not set to the object for which the event handler is set, the above-described method of sequentially focusing the hyperlinked object cannot move the focus to such an object. There was a problem that events could not be generated.

  The present invention has been made in view of such a situation, and the object of the present invention is to sequentially move the focus of an object for which an event handler is set among objects for which a hyperlink is not set in a browser having a sequential focus function. It is to provide a technique that enables the user to be able to make it happen.

  One aspect of the present invention is a web page display device that renders a web page and outputs it to a display. The apparatus includes a hyperlink extraction unit that extracts an object including a hyperlink from a document file that constitutes the web page, an event handler extraction unit that extracts an object including a predetermined event handler from the document file, and the hyperlink. An object storage unit that stores object information including at least information related to an arrangement of the object extracted by the extraction unit and the event handler extraction unit on the web page; and on the web page according to a direction operation input by a user When a focus control unit that selects an object to be displayed in focus and the object selected by the focus control unit includes an event handler, a script associated with the event handler is displayed. And a script execution unit for the line.

According to this aspect, not only the object for which the hyperlink is set but also the object for which the event handler is set can be extracted, and both these objects can be targeted for focus movement. In addition, since the script related to the event handler set for the object is executed at the time of focus, the same operation as that of the mouse pointer can be performed.
The “document file” includes an HTML file or an XML file described in a markup language.

  Another aspect of the present invention is a focus control method in a web page display device that renders a web page and outputs it to a display. In this method, the web page display device extracts an object including a hyperlink from a document file constituting the web page, and the web page display device extracts an object including a predetermined event handler from the document file. The web page display device stores, in a memory, object information including at least information regarding an arrangement of the object extracted in the extraction step on the web page, and the web page display device responds to a direction operation input by a user. Selecting an object to be displayed in focus on the web page, and when the selected object is an object including an event handler, the web page display device executes a script associated with the event handler. No.

  It should be noted that any combination of the above-described constituent elements and a conversion of the expression of the present invention between a method, an apparatus, a system, a recording medium, a computer program, etc. are also effective as an aspect of the present invention.

  According to the present invention, in a browser having a sequential focus function, it is possible to move the focus for an object for which an event handler is set among objects for which no hyperlink is set.

It is a figure which shows a mode that a web page is displayed using the web page display apparatus which concerns on one Embodiment of this invention. It is a figure which shows an example of the HTML file of the web page interpreted by the web page display apparatus and rendered on a display. (A), (b) is a figure which shows the example of the web page rendered by the conventional browser based on the HTML file of FIG. It is a figure which shows the structure of a web page display apparatus. It is a table | surface which shows an example of the event handler used as the extraction object by an event handler extraction part. It is a flowchart explaining extraction of the object by a hyperlink extraction part. It is a flowchart explaining extraction of the object by an event handler extraction part. It is a table | surface which shows the object information stored in the object storage part. (A)-(f) is a figure explaining a mode that a focus movement is carried out by a web page display apparatus. It is a table | surface which shows the object information stored in the object storage part after an event handler is performed.

  FIG. 1 is a diagram illustrating a state in which a web page is displayed using a web page display device 100 according to an embodiment of the present invention. FIG. 1 shows an example in which a display 120 such as a digital television is connected to a web page display device 100 such as a game machine. The user operates a web page displayed on the display using a direction instruction button or the like on the television remote controller 22.

  The web page display device 100 accesses a server 20 specified by a URL (Uniform Resource Locator) via a network 24 such as the Internet in response to a user operation, and acquires a document file constituting the web page.

  The web page display device 100 can be placed at an arbitrary position on a display such as a mouse, a trackball, or a touch panel, such as a portable mobile terminal such as a digital television, a mobile phone, or a PDA (Personal Digital Assistant), or a car navigation system. It may be an electronic device that does not have an input device for moving the pointer. For example, when the web page display device is a digital television or a mobile phone, the display 120 and the web page display device 100 may be integrated in a single casing. Further, when the web page display device is a mobile phone or a car navigation system, a direction instruction button may be integrated with the web page display device instead of the remote controller 22.

  FIG. 2 is a diagram showing an example of an HTML file 50 that is interpreted by the web page display device 100 and rendered on the display. FIGS. 3A and 3B are diagrams showing examples of web pages rendered by a conventional browser based on the HTML file 50 of FIG.

  In the case where a device such as a mouse that moves the pointer to an arbitrary position on the screen is not connected to the web page display device, a conventional browser has a hyperlink in response to an operation such as a cursor key or a Tab key. It has a function of moving the focus sequentially between the set objects (hereinafter referred to as “sequential focus function”).

  In FIG. 3A, hyperlinks are set for the “text” object 302 and the “image” object 306, respectively. Accordingly, when the user operates the Tab key or the down key while the focus F is displayed on the “text” object 302, as shown in FIG. 3B, no hyperlink is set. There is a problem that the “menu” object 304 is skipped and the focus moves to the “image” object 306.

  Further, as can be seen from the 26th line of the HTML file 50 in FIG. 2, an “onMouseoevr” event handler is set in the “menu” object 304. If the mouse or the like can be used, the submenu represented by the 31st to 34th lines is displayed when the pointer is moved onto the “menu” object 304. However, when the focus is moved using a cursor key or the like, since the focus does not move to the “menu” object 304, such a submenu cannot be displayed on the screen.

  Therefore, in the present embodiment, a technique is provided in which an object for which a hyperlink is not set but an event handler is set is also a focus target when the focus is moved by a cursor key.

  FIG. 4 is a diagram showing a configuration of the web page display device 100 according to an embodiment of the present invention. This configuration can be realized in terms of hardware by a CPU, memory, or other LSI of any computer, and in terms of software, it can be realized by a program loaded in the memory, but here it is realized by their cooperation. Draw functional blocks. Accordingly, those skilled in the art will understand that these functional blocks can be realized in various forms by hardware only, software only, or a combination thereof.

  The web page display device of this embodiment is preferably implemented as part of a well-known browser program. Accordingly, even functions that are not explicitly shown in FIG. 4 are assumed to have functions that a general browser program has.

  The communication control unit 118 accesses the designated web server 20 via the network 24 such as the Internet in response to a user operation such as inputting a URL, selecting a search result on a search site, or selecting a hyperlink. Get the document file to be used. The document file is described in a markup language such as SGML (Standard Generalized Markup Language), HTML (HyperText Markup Language), or XML (eXtensible Markup Language). The document file may include a script language such as a Java script. Further, a related CSS may be acquired together with the document file. The acquired document file is sent to the file analysis unit 102. In the following description, it is assumed that the document file is mainly an HTML file.

  The file analysis unit 102 analyzes the acquired document file and sends information necessary for drawing a web page to the rendering unit 110. The file analysis unit 102 includes a hyperlink extraction unit 104, an event handler extraction unit 106, and a script execution unit 108.

  The hyperlink extraction unit 104 extracts an object for which a hyperlink is set from a document file. Specifically, the hyperlink extraction unit 104 extracts an object for which a hyperlink is set by searching for an anchor tag <a href.

  The event handler extraction unit 106 extracts an object for which an event handler is set from the document file. Specifically, the event handler extraction unit 106 searches for an event handler designated in advance to extract an object for which an event handler is set.

  FIG. 5 is a table showing an example 220 of event handlers to be extracted by the event handler extraction unit 106. In the figure, line 222 represents an event handler name, and line 224 describes the occurrence timing of the target event. In this embodiment, a mouse operation event for an object is targeted.

  Returning to FIG. 4, the hyperlink extraction unit 104 and the event handler extraction unit 106 store information about the extracted objects in the object storage unit 116. The object information includes at least the ID, start point position, and size of the extracted object. Such object information may be included in the document file or may be included in the CSS.

  When the focus moves to an object for which an event handler is set, the script execution unit 108 generates an event assuming that the object has a pointer. Further, when an event corresponding to the event handler shown in FIG. 5 occurs, JavaScript associated with the event handler is executed.

  More specifically, when the focus moves to the object, the script execution unit generates an onmouseover event. When the focus moves from the object to another object, the script execution unit generates an onmouseout event. When the mouse button is pressed while the focus is on the object, the script execution unit fires the onmousedown event, and when the mouse button is continuously released, the script execution unit Raises the onmouseup event. The script execution unit generates an onclick event when a key operation corresponding to a mouse click is performed while the focus is moving on the object. The script execution unit generates an ondblclick event when a key operation corresponding to a mouse double click is performed while the object is focused.

  The operation input receiving unit 112 receives an operation input of a direction instruction button operated on the remote controller or the web page display device. The operation input receiving unit 112 sends the received direction button information to the focus control unit 114.

  The focus control unit 114 moves the focus between objects in the web page in response to the operation of the direction button. In other words, the focus control unit 114 acquires the extracted object information stored in the object storage unit 116, and then selects the object that is closest in the direction corresponding to the direction button from the currently focused object. Select as the object whose focus should be moved. The focus control unit 114 sends the object information of the selected object to the file analysis unit 102 and the rendering unit 110. However, as will be described later, an object whose object size is (0, 0) in the object storage unit 116, that is, an object that is not displayed as an image at that time, is not a focus target.

  As described above, in this embodiment, the object extracted by the event handler extraction unit 106 is also set as a focus arrangement target by the focus control unit 114. Therefore, unlike a conventional browser, the focus is moved to an object for which an event handler is set in addition to an object for which a hyperlink is set.

  The rendering unit 110 renders the web page according to the analysis result of the document file by the file analysis unit 102 and outputs the web page to the display 120. Further, the rendering unit 110 performs rendering after performing highlighting indicating that the object is focused based on the object information received from the focus control unit 114. In the present embodiment, this highlighting is represented as a black square surrounding the object. However, the focus may be expressed in other display modes. For example, the focus may be expressed by highlighting characters constituting the object or changing the background color of the characters.

  When the focus control unit 114 selects an object including an event handler as a focus target, the focus control unit 114 also notifies the script execution unit 108 in the file analysis unit 102 of the object information of this object. In response to this notification, the script execution unit 108 generates an event of the object selected as the focus target. If there is a related JavaScript, it is executed. The change of the web page corresponding to this execution is analyzed again by the file analysis unit 102, and the analysis result is sent to the rendering unit 110. In response to this, the rendering unit 110 updates the web page.

  When the object to be displayed is changed by executing JavaScript, the hyperlink extraction unit 104 and the event handler extraction unit 106 search the document file again and extract the respective objects. Then, object information related to the extracted object is stored in the object storage unit 116. In this way, objects displayed in response to the occurrence of an event on the web page can be extracted as needed.

  Hereinafter, the operation of the web page display device 100 will be described.

  When the communication control unit 118 reads the HTML file 50 of FIG. 2, the hyperlink extraction unit 104 and the event handler extraction unit 106 of the file analysis unit 102 respectively extract objects to be focused from the HTML file 50.

  FIG. 6 is a flowchart for explaining object extraction by the hyperlink extraction unit 104. First, the hyperlink extraction unit 104 searches for an anchor tag from the top in the HTML file (S10). When the anchor tag is detected, the hyperlink extraction unit 104 determines whether or not a hyperlink is included in the tag syntax (S12). If a hyperlink is included (Y in S12), information on the object related to the anchor tag is extracted and stored in the object storage unit 116 (S14). If no hyperlink is included (N in S12), S14 is skipped. If the last line of the HTML file has not been reached (N in S16), the next anchor tag is retrieved from the HTML file.

  FIG. 7 is a flowchart showing object extraction by the event handler extraction unit 106. First, the event handler extraction unit 106 searches for a tag from the top in the HTML file (S20). When a tag is detected, the event handler extraction unit 106 determines whether or not a predetermined event handler is included in the tag syntax (S22). If a predetermined event handler is included (Y in S22), information on the object related to the tag is extracted and stored in the object storage unit 116 (S24). If the predetermined event handler is not included (N in S22), S24 is skipped. If the final line of the HTML file has not been reached (N in S26), the next tag syntax is retrieved from the HTML file.

  An example in which an object is extracted will be described with reference to the flowcharts described in FIGS. In the HTML file 50 of FIG. 2, the hyperlink extraction unit 104 searches for an anchor tag <a href. As a result, the “text” object on the 23rd line, the “sub1” object indicated by id = “sub1” on the 32nd line, the “sub2” object indicated by id = “sub2” on the 33rd line, 34th line The “sub 3” object indicated by the id = “sub3” of the eye and the image object on the 40th line are extracted. A URL is associated with each object.

  The event handler extraction unit 106 detects the predetermined event handler shown in FIG. 5 in the HTML file 50. As a result, the “onmouseover” event handler on the 26th line and the “onmouseout” event handler on the 27th line are detected. Corresponding to these event handlers is an object of a block element specified by id = “topmenu” on the 25th line.

  FIG. 8 shows the objects stored in the object storage unit 116 after the HTML file 50 of FIG. 2 is first read and the objects are extracted as described above by the hyperlink extraction unit 104 and the event handler extraction unit 106. Indicates information. In the figure, a row 202 represents an object id, a row 204 represents a start position of the object, and a row 206 represents an object size.

  By the way, in the 31st line of the HTML file 50, <div id = "submenu" class = "submenu-off"> is described, but this is indicated by "submenu-" in id = "submenu" which is a block element object. This means that the style "off" is specified. The style of “submenu-off” is defined in the 15th line and below, and none is specified for the property display. This means non-display designation. Therefore, objects included in id = "submenu", that is, objects id = "sub1", id = "sub2", id = "sub3" described in the 32nd to 34th lines are displayed in the initial state. It does not appear on the screen. These objects are displayed for the first time when the onMouseoevr event occurs in the block element object specified by id = "topmenu".

  Correspondingly, in FIG. 8, the sizes of these three objects are all (0, 0).

  Next, a change in the display mode of the web page when the focus is moved will be described.

  FIGS. 9A to 9F are diagrams showing examples of screen transitions of web pages displayed by the web page display device 100 according to an embodiment of the present invention.

  FIG. 9A shows a display immediately after the HTML file 50 is read, as in FIG. The focus F is displayed on the first “text” object 302 among the objects stored in the object storage unit 116. When a focus movement instruction is given from the user, the focus control unit 114 selects id = “topnemu”, which is the next object, from the object storage unit 116, and, as shown in FIG. 110 displays the focus F on the “menu” object 304.

  The focus control unit 114 also passes information on the focused object to the file analysis unit 102. The script execution unit 108 executes an associated event handler assuming that an event has occurred in which the pointer has moved to the menu object 304 to which the focus has moved.

  Referring to the 26th line of the HTML file in FIG. 2, an onmouseover event handler is described in the object specified by id = "topnemu". This event handler describes a process for changing the Classname of the object specified by id = "subnemu" to "submenu-on". The “submenu-on” style is defined to display at the block level by specifying block in the property display on the 12th line of the HTML file 50. As a result, the block element object specified by <div> to </ div> with id = "subnemu" is changed to display, and the included object, that is, each object specified in the 32nd to 34th lines is changed. The display state is changed. As a result, as shown in FIG. 10C, objects “sub 1”, “sub 2”, and “sub 3” are displayed below the menu object 304. At this time, since the focus is on the “menu” object specified by id = “topnemu”, the entire menu is displayed in a focused state.

  When the event handler is executed by the script execution unit 108, the hyperlink extraction unit 104 and the event handler extraction unit 106 extract the object again and store the object information in the object storage unit 116.

  FIG. 10 is a table 200 ′ showing the object information stored in the object storage unit 116 after the event handler is executed by the script execution unit 108. As described above, since the objects “sub1”, “sub2”, and “sub3” are updated to the display state, the start point position and the object size of these objects are changed compared to the table 200 shown in FIG. I understand that. Also, for the object specified by id = "topnemu", it can be seen that the object size is enlarged from (150, 25) to (150, 100) because the contained object is in the display state.

  In the state of FIG. 9C, when the user further instructs to move, the focus control unit 114 selects the next focus target object id = “sub1” from the object storage unit 116. As a result, as shown in FIG. 9D, the focus F is displayed on “Sub 1”. Similarly, when a further movement instruction is given from the user, the focus F moves in the order of “sub 2” and “sub 3” corresponding to id = “sub2” and id = “sub3” (FIG. 9 ( e), (f)). As described above, the user can select the drop-down menu 310 displayed by the onMouseoevr event even in a terminal having only a direction instruction button.

  As described above, according to the web page display device according to the present embodiment, the operability of the web browser in the mobile terminal or the like can be improved. Specifically, the web page display device according to the present embodiment extracts not only the object for which the hyperlink is set, but also the object for which the event handler is set, and moves both of these objects to focus movement. Can be targeted. In addition, since the script related to the event handler set for the object is executed at the time of focus, it is possible to display on the browser corresponding to the onMouseoevr event, as in the case of the mouse pointer operation. .

  The present invention has been described above based on some embodiments. This embodiment is an exemplification, and it will be understood by those skilled in the art that various modifications can be made to the combination of each component and each processing process, and such modifications are also within the scope of the present invention. .

  50 HTML file, 100 Web page display device, 102 File analysis unit, 104 Hyperlink extraction unit, 106 Event handler extraction unit, 108 Script execution unit, 110 Rendering unit, 112 Operation input reception unit, 114 Focus control unit, 116 Object storage Part, 118 communication control part, 120 display.

Claims (4)

In a web page display device that renders a web page and outputs it to a display,
A hyperlink extraction unit that extracts an object including a hyperlink from a document file constituting the web page;
An event handler extraction unit for extracting an object including a predetermined event handler from the document file;
An object storage unit for storing object information including at least information on the arrangement of the objects extracted by the hyperlink extraction unit and the event handler extraction unit on the web page;
A focus control unit that selects an object to be focused on the web page in response to a direction operation input by a user;
A script execution unit that executes a script associated with the event handler, when the object selected by the focus control unit is an object including an event handler;
A web page display device comprising:   The focus control unit refers to object information stored in the object storage unit, and selects an object that is closest to the currently focused object as an object to be focused next. The web page display device according to claim 1.   The web page display device according to claim 1, further comprising an operation unit having a direction input key. A focus control method in a web page display device that renders a web page and outputs it to a display,
The web page display device extracts an object including a hyperlink from a document file constituting the web page;
The web page display device extracts an object including a predetermined event handler from the document file,
The web page display device stores in a memory object information including at least information relating to an arrangement of the object extracted in the extraction step on the web page;
The web page display device selects an object to be focused on the web page in response to a direction operation input by a user,
A focus control method comprising: executing a script associated with the event handler when the selected object is an object including an event handler.

Images