Webpage page display method and device, computer device, and storage medium

CN115700536BActive Publication Date: 2026-08-18TENCENT TECHNOLOGY (SHENZHEN) CO LTD
View PDF 3 Cites 0 Cited by

Patent Information

Application Number
CN202110802237.1
Authority / Receiving Office
CN · China
Patent Type
Patents(China)
Current Assignee / Owner
Filing Date
2021-07-15
Publication Date
2026-08-18
Estimated Expiration
2041-07-15

AI Technical Summary

Technical Problem

[0003]然而,目前对于网页页面的显示,需要依赖于网络,当网络断开时网页页面无法正常显示或只能显示部分内容,如简单的文字内容,导致用户无法在网络离线状态正常访问网页

Benefits of technology

[0038]上述网页页面显示方法、装置、计算机设备和存储介质,当处于网络在线状态时,下载网页页面对应的静态资源,该静态资源包括超文本文件以及根据超文本文件中的图片索引地址下载的图片;在下载后,在本地建立下载的超文本文件与网页页面的索引地址之间的关联,以及下载的图片与图片索引地址之间的关联。那么,当处于网络离线状态,需要显示目标网页页面时,就能够根据这种关联关系,根据请求访问的目标网页页面的索引地址,从本地获取相应的目标超文本文件,并在按照目标超文本文件显示目标网页页面时,能够根据目标超文本文件中的图片索引地址,从本地获取相应的目标图片,实现在离线时也能够实现将网页页面中的图片进行显示,完整展示网页页面,从而实现对网页页面的离线访问。

✦ Generated by Eureka AI based on patent content.

Smart Images

  • Figure CN115700536B_ABST
    Figure CN115700536B_ABST
Patent Text Reader

Abstract

The application relates to a webpage display method and device, computer equipment and a storage medium. The method comprises the following steps: downloading static resources corresponding to a webpage when being in a network online state, the static resources comprising a hypertext file and pictures downloaded according to picture index addresses in the hypertext file; storing the downloaded hypertext file to the local after associating the hypertext file with an index address of the webpage; storing the downloaded pictures to the local after associating the pictures with the picture index addresses in the hypertext file; when being in a network offline state, obtaining a target hypertext file associated with an index address of a target webpage from the local in response to a browsing operation on the target webpage; extracting a picture index address in the target hypertext file when displaying the target webpage according to the target hypertext file; obtaining a target picture associated with the extracted picture index address from the local, and displaying the target webpage according to the target picture. The method can support offline access to a webpage.
Need to check novelty before this filing date? Find Prior Art

Description

Technical Field

[0001] This application relates to the field of computer technology, and in particular to a web page display method, apparatus, computer device, and storage medium. Background Technology

[0002] With the rapid development of computer and internet technologies, users have more and more ways to obtain information. Web pages, as one of the most common ways of information dissemination, bring great convenience to users. For example, users can access news websites through a browser and browse news pages to obtain the latest information. Furthermore, some social applications, online payment applications, and live streaming applications support pushing information (such as text articles or video content) to users. This information is mostly presented in the form of web pages, allowing users to conveniently read the pushed information while using these applications.

[0003] However, currently, the display of web pages depends on the network. When the network is disconnected, the web page cannot be displayed normally or can only display part of the content, such as simple text content, which prevents users from accessing the web page normally when the network is offline. Summary of the Invention

[0004] Therefore, it is necessary to provide a webpage display method, apparatus, computer device, and storage medium that can support offline access to webpages, addressing the aforementioned technical problems.

[0005] A method for displaying a webpage, the method comprising:

[0006] When the network is online, download the static resources corresponding to the web page. The static resources include hypertext files and images downloaded according to the image index addresses in the hypertext files.

[0007] The downloaded hypertext file is associated with the index address of the webpage and stored locally; the downloaded image is associated with the image index address in the hypertext file and stored locally.

[0008] When the network is offline, in response to browsing the target webpage, the target hypertext file associated with the index address of the target webpage is retrieved from the local machine;

[0009] When displaying the target webpage according to the target hypertext file, the image index address in the target hypertext file is extracted, the target image associated with the extracted image index address is obtained from the local machine, and the target webpage is displayed according to the target image.

[0010] A webpage display device, the device comprising:

[0011] The download module is used to download static resources corresponding to a webpage when the network is online. The static resources include hypertext files and images downloaded according to the image index addresses in the hypertext files.

[0012] The association module is used to associate the downloaded hypertext file with the index address of the webpage and store it locally, and to associate the downloaded image with the image index address in the hypertext file and store it locally.

[0013] The acquisition module is used to acquire a target hypertext file associated with the index address of the target webpage from the local machine in response to a browsing operation of the target webpage when the network is offline.

[0014] The display module is used to extract the image index address from the target hypertext file when displaying the target webpage according to the target hypertext file, obtain the target image associated with the extracted image index address from the local machine, and then display the target webpage according to the target image.

[0015] In one embodiment, the static resource further includes at least one of page style description information and page behavior description information corresponding to the webpage; the download module is further configured to: obtain at least one of the page style description information and page behavior description information based on the downloaded hypertext file.

[0016] In one embodiment, the download module is further configured to: search for link tags of page style description information in the hypertext file, and download the page style description information according to the link tags of the page style description information; and / or search for link addresses of page behavior description information in the hypertext file, and download the page behavior description information according to the link addresses of the page behavior description information.

[0017] In one embodiment, the download module is further configured to: search for an identifier field of page style description information in the hypertext file, and use the content marked by the identifier field of the page style description information as the page style description information; and / or search for an identifier field of page behavior description information in the hypertext file, and use the content marked by the identifier field of the page behavior description information as the page behavior description information.

[0018] In one embodiment, the association module is further configured to: extract the main text content from the hypertext file; generate a custom hypertext file based on the main text content, the page style description information, and the page behavior description information; and store the custom hypertext file locally after associating it with the index address of the webpage.

[0019] In one embodiment, the association module is further configured to: obtain a constructed hypertext file template; fill the body content, the page style description information, and the page behavior description information into the corresponding positions in the hypertext file template to generate the custom hypertext file.

[0020] In one embodiment, the association module is further configured to: calculate the summary information corresponding to the index address of the webpage; name the downloaded hypertext file according to the summary information, and store the named hypertext file locally; the acquisition module is further configured to: when in a network offline state, in response to a browsing operation on the target webpage, calculate the target summary information corresponding to the index address of the target webpage; and acquire the target hypertext file named with the target summary information from the local machine.

[0021] In one embodiment, the association module is further configured to: calculate the summary information corresponding to the image index address in the hypertext file; after naming the downloaded image according to the summary information, store the named image locally; the display module is further configured to: when displaying the target webpage according to the target hypertext file, extract the image index address in the target hypertext file, calculate the target summary information corresponding to the image index address in the target hypertext file; obtain the target image named according to the target summary information from the local machine; and display the target webpage according to the target image.

[0022] In one embodiment, the webpage display device further includes an entry module, which is configured to: enter the target webpage when the network is offline; the display module is further configured to: in response to a drag operation on the target webpage, display the page content corresponding to the position to which the drag operation is slid, according to the static resources marked by the target hypertext file; when the position points to an image area in the target webpage, extract the image index address corresponding to the image area from the target hypertext file, obtain the target image associated with the extracted image index address from the local machine, and then display the target image in the image area.

[0023] In one embodiment, the webpage display device further includes an entry module, which is configured to: enter the target webpage when the network is online; the display module is further configured to: in response to a drag operation on the target webpage, display the page content corresponding to the position to which the drag operation is slid, according to the static resources marked in the original hypertext file corresponding to the target webpage; when the position points to an image area in the target webpage, load the target image corresponding to the image area and display it using a lazy loading method, based on the image index address marked in the original hypertext file.

[0024] In one embodiment, the download module is further configured to: when the original hypertext file corresponding to the target webpage contains a jump link to an associated webpage, download the static resources corresponding to the associated webpage according to the jump link of the associated webpage, and store the downloaded static resources locally after associating them with the corresponding index address.

[0025] In one embodiment, the static resources further include audio and video downloaded according to the audio and video index address in the hypertext file; the association module is further configured to: when in an online network state, associate the downloaded audio and video with the audio and video index address in the hypertext file and store it locally; the display module is further configured to: when in an offline network state and displaying the target webpage according to the target hypertext file, extract the audio and video index address in the target hypertext file, obtain the target audio and video associated with the extracted audio and video index address from the local machine, and then display the target webpage according to the target audio and video.

[0026] In one embodiment, the acquisition module is further configured to: display a list of titles of text and image web pages when the network is offline; in response to a selection operation of a target title in the title list, enter the target text and image web page corresponding to the target title; and acquire a target hypertext file associated with the index address of the target text and image web page from the local machine.

[0027] A computer device includes a memory and a processor, the memory storing a computer program, and the processor executing the computer program to perform the following steps:

[0028] When the network is online, download the static resources corresponding to the web page. The static resources include hypertext files and images downloaded according to the image index addresses in the hypertext files.

[0029] The downloaded hypertext file is associated with the index address of the webpage and stored locally; the downloaded image is associated with the image index address in the hypertext file and stored locally.

[0030] When the network is offline, in response to browsing the target webpage, the target hypertext file associated with the index address of the target webpage is retrieved from the local machine;

[0031] When displaying the target webpage according to the target hypertext file, the image index address in the target hypertext file is extracted, the target image associated with the extracted image index address is obtained from the local machine, and the target webpage is displayed according to the target image.

[0032] A computer-readable storage medium having a computer program stored thereon, wherein the computer program, when executed by a processor, performs the following steps:

[0033] When the network is online, download the static resources corresponding to the web page. The static resources include hypertext files and images downloaded according to the image index addresses in the hypertext files.

[0034] The downloaded hypertext file is associated with the index address of the webpage and stored locally; the downloaded image is associated with the image index address in the hypertext file and stored locally.

[0035] When the network is offline, in response to browsing the target webpage, the target hypertext file associated with the index address of the target webpage is retrieved from the local machine;

[0036] When displaying the target webpage according to the target hypertext file, the image index address in the target hypertext file is extracted, the target image associated with the extracted image index address is obtained from the local machine, and the target webpage is displayed according to the target image.

[0037] A computer program includes computer instructions stored in a computer-readable storage medium. A processor of a computer device reads the computer instructions from the computer-readable storage medium and executes the computer instructions, causing the computer device to perform the steps of the above-described webpage display method.

[0038] The aforementioned webpage display method, apparatus, computer equipment, and storage medium, when online, download the static resources corresponding to the webpage. These static resources include hypertext files and images downloaded based on the image index addresses in the hypertext files. After downloading, an association is established locally between the downloaded hypertext files and the index addresses of the webpage, as well as between the downloaded images and their index addresses. Therefore, when offline and needing to display the target webpage, this association allows the system to retrieve the corresponding target hypertext file from the local storage based on the index address of the requested target webpage. Furthermore, when displaying the target webpage according to the target hypertext file, the system can retrieve the corresponding target images from the local storage based on the image index addresses in the target hypertext file. This enables offline display of the webpage's images, providing a complete view of the webpage and allowing for offline access to the webpage. Attached Figure Description

[0039] Figure 1 This is an application environment diagram of a webpage display method in one embodiment;

[0040] Figure 2 This is a flowchart illustrating a webpage display method in one embodiment;

[0041] Figure 3 This is a schematic diagram of the interface of a web page identifier list in one embodiment;

[0042] Figure 4 This is a schematic diagram of the title list interface of a text and image webpage in one embodiment;

[0043] Figure 5 This is a flowchart illustrating a webpage display method in another embodiment;

[0044] Figure 6 This is a flowchart of the download and recovery process for hypertext files in one embodiment;

[0045] Figure 7 This is a flowchart illustrating the image download and recovery process in one embodiment.

[0046] Figure 8 This is a flowchart illustrating a webpage display method in yet another embodiment;

[0047] Figure 9 This is a flowchart illustrating a webpage display method in another embodiment;

[0048] Figure 10 This is a schematic diagram illustrating the online display of a webpage in one embodiment;

[0049] Figure 11 This is a schematic diagram illustrating the offline display of a webpage in one embodiment;

[0050] Figure 12 This is a schematic diagram illustrating the local storage of hypertext files and images in one embodiment;

[0051] Figure 13 This is a structural block diagram of a webpage display device in one embodiment;

[0052] Figure 14 This is an internal structural diagram of a computer device in one embodiment. Detailed Implementation

[0053] To make the objectives, technical solutions, and advantages of this application clearer, the following detailed description is provided in conjunction with the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are merely illustrative and not intended to limit the scope of this application.

[0054] The webpage display method provided in this application can be applied to, for example... Figure 1 The application environment shown. (Refer to...) Figure 1 The application environment for this webpage display method may include terminal 102 and server 104. Terminal 102 and server 104 are connected via a network. Terminal 102 may be, but is not limited to, various personal computers, laptops, smartphones, tablets, portable wearable devices, etc. Server 104 may be an independent physical server, a server cluster or distributed system composed of multiple physical servers, or a cloud server providing basic cloud computing services such as cloud services, cloud databases, cloud computing, cloud functions, cloud storage, network services, cloud communication, middleware services, domain name services, security services, CDN (Content Delivery Network), and big data and artificial intelligence platforms. Terminal 102 and server 104 may be directly or indirectly connected via wired or wireless communication, which is not limited herein.

[0055] In one embodiment, when online, terminal 102 downloads static resources corresponding to a webpage from server 104. These static resources include a hypertext file and images downloaded based on image index addresses in the hypertext file. The downloaded images are associated with their image index addresses in the hypertext file and stored locally. When offline, in response to browsing a target webpage, terminal 102 retrieves a target hypertext file associated with the target webpage's index address from its local storage. When displaying the target webpage according to the target hypertext file, it extracts the image index addresses from the target hypertext file, retrieves the target images associated with the extracted image index addresses from its local storage, and displays the target webpage based on the target images. Optionally, when online, terminal 102 sends a static resource retrieval request carrying a webpage identifier to server 104. In response, server 104 returns the static resources corresponding to the webpage identifier to terminal 102, allowing terminal 102 to obtain the static resources of the webpage corresponding to the webpage identifier. The webpage identifier is used to uniquely identify a webpage, such as its index address.

[0056] The webpage display method provided in this application can be executed by a webpage display device provided in this application, or a computer device integrating the webpage display device. The webpage display device can be implemented in hardware or software. The computer device can be... Figure 1 Terminal 102 shown.

[0057] The webpage display method provided in this application can be applied to scenarios involving offline webpage access. The webpage can be a general-purpose webpage, such as pages on various websites like news websites and reading websites; it can also be an H5 (Hyper Text Markup Language 5) webpage, such as application pages, subscription account pages, or subprogram pages in various applications. A subscription account is a platform in a social application that provides information services to users; users can receive news articles pushed by subscription accounts they are interested in. A subprogram is an application that can run in the environment provided by the parent program, which is a native application that can run directly on the operating system.

[0058] For example, this application embodiment can be applied to offline access to web pages that use lazy loading to load images online. Lazy loading only initiates a network request to retrieve image resources when the webpage scrolls to an image area. While this method saves computer resources, images are not cached online, resulting in images not being displayed offline and the webpage failing to display correctly. Currently, lazy loading is widely used in Web pages and H5 pages. The method provided in this application embodiment, when online, downloads the corresponding hypertext file and images from the webpage, establishing associations between the downloaded hypertext file and the webpage's index address, as well as between the downloaded images and their index addresses. When offline, the target hypertext file can be retrieved locally based on the target webpage's index address. When displaying the target webpage according to the target hypertext file, the target images can be retrieved locally based on the image index addresses in the target hypertext file, thus displaying images on the webpage offline.

[0059] For example, the embodiments of this application can be applied to offline access to text and image web pages. A text and image web page is a page composed of text and images. Using the method provided in the embodiments of this application, when the network is online, the hypertext file corresponding to the web page and the images in the web page are downloaded, and an association is established between the downloaded hypertext file and the index address of the web page, as well as between the downloaded images and the image index address. When the network is offline, the target hypertext file can be obtained from the local machine according to the index address of the target web page. When displaying the target web page according to the target hypertext file, the target image can be obtained from the local machine according to the image index address in the target hypertext file, thereby realizing offline access to text and image web pages.

[0060] For example, the embodiments of this application can be applied to offline access to article web pages. An article web page is a page that displays articles, such as the subscription account article page in a social application, the article page in a reading subprogram, or the news page of a news website. The method provided by the embodiments of this application can support users to read subscription account articles, articles in reading subprograms, and news from news websites offline.

[0061] For example, the embodiments of this application can be applied to offline access to multimedia web pages. A multimedia web page is a page that includes at least one multimedia content, such as images, audio, or video, in addition to text. Using the method provided by the embodiments of this application, when the network is online, the hypertext file corresponding to the web page and the multimedia content in the web page are downloaded, and an association is established between the downloaded hypertext file and the index address of the web page, as well as between the downloaded multimedia content and the index address of the multimedia content. When the network is offline, the target hypertext file can be obtained from the local machine according to the index address of the target web page. When displaying the target web page according to the target hypertext file, the target multimedia content can be obtained from the local machine according to the index address of the multimedia content in the target hypertext file, thereby realizing offline access to multimedia web pages.

[0062] For example, embodiments of this application can be applied to offline access to multiple web pages. When the terminal is online, it downloads static resources corresponding to at least one web page. When online, the user can browse multiple web pages. For instance, a user can read subscription articles in a social media application while offline, making the offline reading experience similar to the online reading experience.

[0063] In one embodiment, such as Figure 2 As shown, a webpage display method is provided. This embodiment mainly applies this method to... Figure 1 Taking terminal 102 as an example, the steps include:

[0064] Step S202: When the network is online, download the static resources corresponding to the webpage. The static resources include hypertext files and images downloaded according to the image index addresses in the hypertext files.

[0065] Among these, web pages can be general-purpose web pages, such as those on news websites, reading websites, and other types of websites; they can also be H5 (Hyper Text Markup Language 5) web pages, such as application pages, subscription account pages, and subprogram pages in various applications. Subscription accounts are platforms in social applications that provide information services to users; users can receive news articles pushed by subscription accounts they are interested in. Subprograms are applications that can run in the environment provided by the parent program, which is a native application that can run directly on the operating system.

[0066] Hypertext files can be plain text files written in Hyper Text Markup Language (HTML), a standard, general-purpose markup language used for creating web pages. Web page creators write the content they want to express in HTML into hypertext files, and web browsers convert these hypertext files into web pages, thus displaying the content to users.

[0067] Static resources are the building blocks of a webpage. Static resources retain their source code unchanged after being accessed, while dynamic resources may have their source code modified after being accessed. In other words, static resources do not require a backend response, while dynamic resources do. Optionally, static resources include hypertext files and images on a webpage.

[0068] In one embodiment, a webpage can be a text and image webpage, which is a page composed of text and images. In other embodiments, a webpage can be a multimedia webpage, which is a page that includes at least one multimedia content, such as images, audio, or video, in addition to text.

[0069] In one embodiment, when the terminal is online, it downloads the hypertext file corresponding to the webpage, extracts the image index addresses from the hypertext file, and downloads the images based on the image index addresses, thereby obtaining the static resources corresponding to the webpage. Optionally, when the terminal is online, it sends a static resource retrieval request carrying a webpage identifier to the server. The server responds to the static resource retrieval request by returning the static resources corresponding to the webpage identifier to the terminal, and the terminal obtains the static resources of the webpage corresponding to the webpage identifier. The webpage identifier is used to uniquely identify the webpage, such as the webpage's index address or title.

[0070] In one embodiment, when the terminal is online, it downloads static resources corresponding to at least one webpage. Optionally, the terminal downloads the static resources corresponding to at least one webpage sequentially using a created thread; or, the terminal downloads the static resources corresponding to each of at least one webpage separately using at least one created thread.

[0071] In one embodiment, when the terminal is online and enters a webpage or a page related to a webpage, the download of the static resources corresponding to that webpage is triggered. For example, taking a subscription account article page in a social application as an example, when the terminal enters the application page of the social application, the download of the static resources corresponding to the subscription account article page can be triggered, or when the terminal enters the subscription account page, the download of the static resources corresponding to the subscription account article page can be triggered, or when the terminal enters the subscription account article page, the download of the static resources corresponding to that subscription account article page can be triggered, and so on. Here, the application page of the social application can be any page of the social application, such as a chat message list page, a contact list page, etc. The subscription account page can be any page of a subscription account, such as a subscription account article list page, a subscription account article page, etc. It can be understood that when the terminal downloads the static resources of more than one article page, the download order of the more than one article page can be determined by factors such as the article publication time, article popularity, article interaction, and / or whether the subscription account is marked. For example, the terminal can prioritize downloading the static resources of the page corresponding to the most recently published article.

[0072] In one embodiment, when the terminal is online, it downloads the static resources of the webpage corresponding to the selected webpage identifier in the webpage identifier list. For example, a webpage selection entry is displayed on the application page of a social application. In response to a triggering operation on the webpage selection entry, the terminal enters the webpage selection page, where the list of webpage identifiers is displayed. (See also...) Figure 3 , Figure 3 A schematic diagram of a webpage identifier list in one embodiment is shown. As can be seen, through the webpage identifier list 302, users can independently select the webpages from which they wish to download static resources.

[0073] Step S204: Associate the downloaded hypertext file with the index address of the webpage and store it locally; associate the downloaded image with the image index address in the hypertext file and store it locally.

[0074] The webpage's index address is its URL (Uniform Resource Locator), and the image index address is the URL of the image within the webpage. A hypertext file is a text file created using the HTML language. A webpage's hypertext file is created by adding tags to the text, allowing the webpage content to be organized and displayed in different ways based on these tags.

[0075] In one embodiment, the terminal downloads the hypertext file corresponding to the webpage and establishes an association between the downloaded hypertext file and the index address of the webpage; the terminal extracts the image index address from the hypertext file, downloads the image according to the image index address, and establishes an association between the downloaded image and the image index address.

[0076] In one embodiment, the terminal names the downloaded hypertext file with the index address of the webpage to establish an association between the downloaded hypertext file and the index address of the webpage. In another embodiment, the terminal establishes an association between the index address of the webpage and intermediate information, as well as an association between the intermediate information and the downloaded hypertext file, to establish an association between the downloaded hypertext file and the index address of the webpage. For example, the terminal generates intermediate information based on the index address of the webpage and names the downloaded hypertext file with the intermediate information.

[0077] In one embodiment, the terminal names the downloaded image with its image index address to establish an association between the downloaded image and the image index address. In another embodiment, the terminal establishes an association between the image index address and intermediate information, as well as an association between the intermediate information and the downloaded image, to establish an association between the downloaded image and the image index address. For example, the terminal generates intermediate information based on the image index address and names the downloaded image with the intermediate information.

[0078] In one embodiment, the terminal establishes an association between the index address of a webpage and a custom file. The custom file records the local index address of the downloaded hypertext file and the local index address of the downloaded image. The local index address of the downloaded image is associated with the image index address in the hypertext file.

[0079] In one embodiment, the terminal downloads the original hypertext file corresponding to the webpage, associates the downloaded original hypertext file with the index address of the webpage, and stores it locally. In other embodiments, the terminal downloads the original hypertext file corresponding to the webpage, extracts key content from the original hypertext file, associates the key content with the index address of the webpage, and stores it locally. The key content may be the content of the hypertext file after removing irrelevant content such as page advertisements.

[0080] Step S206: When the network is offline, in response to the browsing operation of the target webpage, obtain the target hypertext file associated with the index address of the target webpage from the local machine.

[0081] Browsing operations can include triggering operations, selection operations, etc. For example, when a terminal displays a list of articles on a social application's application page, responding to a selection operation on an article in the list determines the target article, and the page corresponding to the target article is the target webpage. As another example, when a terminal displays conversation messages on a social application's conversation page, if the conversation message carries the index address of a webpage, responding to a triggering operation on the conversation message retrieves the target webpage.

[0082] In one embodiment, when the terminal is offline, in response to browsing the target webpage, it obtains the index address of the target webpage and retrieves the target hypertext file from the local machine based on the index address of the target webpage.

[0083] In one embodiment, the terminal retrieves the target hypertext file associated with the index address of the target webpage from its local machine based on the association between the downloaded hypertext file and the index address of the webpage. For example, when the terminal names the downloaded hypertext file with the index address of the webpage, it retrieves the target hypertext file named with the index address of the target webpage from its local machine; when the terminal names the downloaded hypertext file with intermediate information generated based on the index address of the webpage, it generates intermediate information based on the index address of the target webpage and retrieves the target hypertext file named with the intermediate information from its local machine. Furthermore, when the terminal establishes an association between the index address of a webpage and a custom file, it retrieves the custom file from its local machine based on the index address of the target webpage, retrieves the local index address of the target hypertext file based on the custom file, and retrieves the target hypertext file from its local machine based on the local index address.

[0084] Step S208: When displaying the target webpage according to the target hypertext file, extract the image index address from the target hypertext file, obtain the target image associated with the extracted image index address from the local machine, and then display the target webpage according to the target image.

[0085] In one embodiment, the terminal can construct a target webpage based on a target hypertext file using a WebView. For image areas within the target webpage, the image index address corresponding to the image area is extracted from the target hypertext file. After retrieving the target image from the local machine based on the image index address, the target image is displayed in the image area.

[0086] In one embodiment, the terminal retrieves the target image associated with the image index address in the target hypertext file from its local machine based on the association between the downloaded image and the image index address in the hypertext file. For example, when the terminal names a downloaded image with the image index address in the hypertext file, it retrieves the target image named with the image index address in the target hypertext file from its local machine; when the terminal names a downloaded image with intermediate information generated from the image index address in the hypertext file, it generates intermediate information based on the image index address in the target hypertext file and retrieves the target image named with the intermediate information from its local machine. Furthermore, when the terminal establishes an association between the index address of a webpage and a custom file, it retrieves the custom file from its local machine based on the index address of the target webpage, retrieves the local index address corresponding to the image index address in the target hypertext file based on the custom file, and retrieves the target image from its local machine based on the local index address.

[0087] This application's embodiments can be applied to scenarios involving offline webpage access, and are particularly suitable for webpages that use lazy loading to load images online. Lazy loading only initiates a network request to retrieve image resources when the webpage scrolls to an image area. While this method saves computer resources, images are not cached online, meaning they cannot be displayed offline. The method in this application's embodiments can retrieve a target hypertext file from the local machine based on the target webpage's index address. When displaying the target webpage according to the target hypertext file, it can also retrieve target images from the local machine based on the image index addresses within the target hypertext file, thus displaying images on the webpage offline.

[0088] In the above-described webpage display method, when the network is online, the static resources corresponding to the webpage are downloaded. These static resources include hypertext files and images downloaded based on the image index addresses in the hypertext files. After downloading, a connection is established locally between the downloaded hypertext files and the index addresses of the webpage, as well as between the downloaded images and their index addresses. Therefore, when the network is offline and the target webpage needs to be displayed, the corresponding target hypertext file can be retrieved locally based on this connection and the index address of the requested target webpage. When displaying the target webpage according to the target hypertext file, the corresponding target images can be retrieved locally based on the image index addresses in the target hypertext file. This allows for the display of images on the webpage even offline, fully showcasing the webpage and enabling offline access to the webpage.

[0089] In one embodiment, the static resource further includes at least one of page style description information and page behavior description information corresponding to the web page; the method further includes: obtaining at least one of page style description information and page behavior description information based on the downloaded hypertext file.

[0090] The page style description information consists of code that defines the page style of the webpage, such as defining the text size, font, and paragraph styles. Optionally, the page style description information can be Cascading Style Sheets (CSS). The page behavior description information consists of code that defines the interactive behavior of the webpage, such as defining the dynamic effects of interactive behavior. Optionally, the page behavior description information can be JavaScript.

[0091] Specifically, page style descriptions and page behavior descriptions can be externally linked to or embedded within a hypertext file. For page style descriptions, external links refer to links within the hypertext file that record the page style descriptions; these links are used to retrieve the corresponding page style descriptions from external stylesheets. Embedded links refer to hypertext files containing page style descriptions. Similarly, for page behavior descriptions, external links refer to hypertext files containing links to the page behavior descriptions; these links are used to retrieve the page behavior descriptions from external sources. Embedded links refer to hypertext files containing page behavior descriptions.

[0092] In this application, considering that when page style description information and / or page behavior description information are externally linked to the original hypertext file, page style description information and / or page behavior description information cannot be obtained offline, that is, web pages cannot be built offline, the terminal downloads page style description information and page behavior description information to avoid the problem of not being able to build web pages offline.

[0093] In one embodiment, obtaining at least one of page style description information and page behavior description information based on a downloaded hypertext file includes: searching for link tags of page style description information in the hypertext file and downloading the page style description information according to the link tags of the page style description information; and / or searching for link addresses of page behavior description information in the hypertext file and downloading the page behavior description information according to the link addresses of the page behavior description information.

[0094] The link tag for the page style description information can be a general link tag.

[0095] Specifically, when page style description information is linked to an external hypertext file, the terminal can obtain the page style description information from the external stylesheet through the link tag of the page style description information. When page behavior description information is linked to an external hypertext file, the terminal can obtain the page behavior description information from the external source through the link address of the page behavior description information.

[0096] In one embodiment, the terminal embeds page style description information external to the hypertext file into the hypertext file according to the location of the link tags in the page style description information. The terminal also embeds page behavior description information external to the hypertext file into the hypertext file according to the location of the link addresses in the page behavior description information.

[0097] In one embodiment, the terminal downloads page style description information and / or page behavior description information corresponding to a webpage, and establishes associations between page style description information and its link tags, and / or between page behavior description information and its link addresses. For example, when the terminal establishes an association between the index address of a webpage and a custom file, it retrieves the custom file locally based on the index address of the target webpage. The custom file may also record page style description information and page behavior description information. There is an association between the page style description information and its link tags, and an association between the page behavior description information and its link addresses. The terminal can retrieve the corresponding page style description information from the custom file based on the link tags of the page style description information, and can retrieve the corresponding page behavior description information from the custom file based on the link addresses of the page behavior description information. It is understandable that the association between page style description information and its link tags can be established by naming the page style description information with either the link tags or intermediate information generated based on those links; similarly, the association between page behavior description information and its link addresses can be established by naming the page behavior description information with either the link address or intermediate information generated based on those link addresses.

[0098] In one embodiment, when the terminal is online, it downloads the hypertext file corresponding to the webpage, obtains page style description information and page behavior description information based on the downloaded hypertext file, embeds the page style description information and page behavior description information into the downloaded hypertext file, and stores the edited hypertext file locally after associating it with the index address of the webpage. When the terminal is offline, in response to browsing the target webpage, it retrieves the target hypertext file associated with the index address of the target webpage from the local machine, and displays the target webpage according to the target hypertext file, where the target hypertext file is the hypertext file edited when online.

[0099] It is understandable that when both page style description information and page behavior description information are embedded in the original hypertext file, the terminal can download the original hypertext file and build the web page based on the original hypertext file in an offline state.

[0100] In one embodiment, the terminal obtains page style description information corresponding to the downloaded webpage, embeds the page style description information into the downloaded hypertext file, stores the page style description information, and establishes an association between the page style description information and the webpage, such as establishing an association with the index address of the webpage. The stored page style description information can be freely edited to construct webpages with different page styles based on the stored page style description information when building webpages offline.

[0101] In this embodiment, when the network is online, the page style description information and / or page behavior description information linked to the hypertext file are downloaded. This avoids the problem of not being able to build the web page due to the inability to obtain the external page style description information and / or page behavior description information when the network is offline, thus enabling the successful construction of the web page when offline.

[0102] In this application, considering that the original hypertext file corresponding to the webpage is redundant and storing the original hypertext file locally would occupy a lot of space, the terminal can convert the hypertext file into a custom text file and then store it locally. The custom text file can contain the hypertext file content necessary for creating the webpage, which reduces the amount of data stored compared to storing the original hypertext file locally.

[0103] In one embodiment, storing a downloaded hypertext file locally after associating it with the index address of a webpage includes: extracting the main text content from the hypertext file; generating a custom hypertext file based on the main text content, page style description information, and page behavior description information; and storing the custom hypertext file locally after associating it with the index address of the webpage.

[0104] The main content can be the body of a hypertext file, such as the content of a hypertext file related to the webpage content. For example, if the webpage is an article page, then the webpage content can be the article content and related information.

[0105] In one embodiment, when the page style description information and the page style description information are linked to a hypertext file, the terminal can download the hypertext file corresponding to the webpage, as well as the page style description information and the page style description information linked to the hypertext file, extract the main text content from the hypertext file, and generate a custom hypertext file based on the main text content, the page style description information, and the page behavior description information.

[0106] In one embodiment, when page style description information and page behavior description information are embedded in a hypertext file, the terminal can extract the main text content from the hypertext file and directly generate a custom hypertext file based on the main text content. It can be understood that the main text content may include the embedded page style description information and page behavior description information.

[0107] In other embodiments, when the page style description information and the page style description information are embedded in a hypertext file, the terminal can download the hypertext file corresponding to the web page, extract the main text content and the page style description information and the page style description information embedded in the hypertext file from the hypertext file, and generate a custom hypertext file based on the main text content, the page style description information and the page behavior description information.

[0108] In one embodiment, obtaining at least one of page style description information and page behavior description information based on a downloaded hypertext file includes: searching for an identifier field of the page style description information from the hypertext file and using the content marked by the identifier field of the page style description information as the page style description information; and / or searching for an identifier field of the page behavior description information from the hypertext file and using the content marked by the identifier field of the page behavior description information as the page behavior description information.

[0109] The identifier field for page style description information is used to annotate page style description information. The identifier field for page behavior description information is used to annotate page behavior description information.

[0110] Specifically, when page style description information and / or page behavior description information are embedded in a hypertext file, the terminal downloads the hypertext file corresponding to the webpage, obtains the page style description information from the hypertext file through the identifier field of the page style description information, and obtains the page behavior description information from the hypertext file through the identifier field of the page behavior description information.

[0111] In one embodiment, generating a custom hypertext file based on the main text content, page style description information, and page behavior description information includes: when the page style description information is externally linked to the hypertext file, the terminal obtains the page style description information from an external stylesheet through the link tag of the page style description information, and embeds the page style description information into the main text content according to the position of the link tag of the page style description information in the main text content. When the page behavior description information is externally linked to the hypertext file, the terminal obtains the page behavior description information from an external source through the link address of the page behavior description information, and embeds the page behavior description information into the main text content according to the position of the link address of the page behavior description information in the main text content.

[0112] In one embodiment, the terminal downloads and stores the image based on the image index address in the hypertext file, determines the local index address of the image, and embeds the local index address of the image into a custom hypertext file. For example, the image index address in the main text content is replaced with the local index address of the image, and a custom hypertext file is generated based on the replaced main text content, page style description information, and page behavior description information.

[0113] In one embodiment, generating a custom hypertext file based on the main text content, page style description information, and page behavior description information includes: obtaining a constructed hypertext file template; and filling the main text content, page style description information, and page behavior description information into the corresponding positions in the hypertext file template to generate a custom hypertext file.

[0114] Among them, the hypertext file template is a pre-built hypertext file template.

[0115] In one embodiment, the hypertext file template includes embedding locations for the main text content, page style descriptions, and page behavior descriptions. The terminal fills the corresponding locations in the hypertext file template with the main text content, page style descriptions, and page behavior descriptions to generate a custom hypertext file. In another embodiment, a corresponding hypertext file template can be set according to the page type of the webpage. Webpages can be categorized according to their content, such as article pages, audio pages, and video pages. The terminal downloads the hypertext file corresponding to the webpage, extracts a hypertext file template matching the page type from its local storage, and generates a custom hypertext file based on the main text content, page style descriptions, page behavior descriptions, and the hypertext file template.

[0116] Specifically, when the terminal is online, it extracts the main text content from the hypertext file, generates a custom hypertext file based on the main text content, page style description information, and page behavior description information, and stores the custom hypertext file locally after associating it with the index address of the webpage. When the terminal is offline, in response to browsing the target webpage, it retrieves the target hypertext file associated with the index address of the target webpage from the local machine and displays the target webpage according to the target hypertext file. The target hypertext file is the custom hypertext file stored when the terminal is online.

[0117] In this embodiment, the terminal downloads the hypertext file corresponding to the webpage and generates a custom hypertext file based on the body content, page style description information, and page behavior description information of the hypertext file. Firstly, this reduces the amount of data in the locally stored custom hypertext file. The webpage can be displayed offline based on the custom hypertext file, and irrelevant content such as advertisements on the webpage can be omitted. Secondly, the page style description information and / or page behavior description information linked to the hypertext file are embedded in the custom hypertext file, preventing the inability to obtain the linked page style description information and page behavior description information to construct the webpage offline, thus ensuring successful offline webpage construction.

[0118] In one embodiment, storing a downloaded hypertext file associated with the index address of a webpage locally includes: calculating digest information corresponding to the index address of the webpage; naming the downloaded hypertext file according to the digest information and storing the named hypertext file locally; when in a network offline state, in response to a browsing operation of the target webpage, retrieving the target hypertext file associated with the index address of the target webpage locally includes: when in a network offline state, in response to a browsing operation of the target webpage, calculating target digest information corresponding to the index address of the target webpage; and retrieving the target hypertext file named with the target digest information locally.

[0119] In one embodiment, when the terminal is online, it calculates the digest information corresponding to the index address of the webpage, names the downloaded hypertext file according to the digest information, and stores the named hypertext file locally. When the terminal is offline, in response to browsing the target webpage, it calculates the target digest information corresponding to the index address of the target webpage and retrieves the target hypertext file named according to the target digest information from the local machine.

[0120] It is understood that general digest information calculation strategies can meet the digest information calculation requirements of this application embodiment. Therefore, general digest information can be used to calculate the digest information corresponding to the index address of the webpage and the target digest information corresponding to the index address of the target webpage, such as the MD5 (MD5 Message-Digest Algorithm) message digest algorithm and the SHA256 (Secure Hash Algorithm 256) algorithm. In this embodiment, when the network is online, the hypertext file corresponding to the webpage is downloaded, and the association between the hypertext file and the index address of the webpage is established. When the network is offline, the hypertext file can be extracted from the local machine using the index address of the webpage, and the webpage can be constructed based on the hypertext file to achieve offline access to the webpage.

[0121] In one embodiment, storing a downloaded image locally after associating it with the image index address in a hypertext file includes: calculating the summary information corresponding to the image index address in the hypertext file; naming the downloaded image according to the summary information and storing the named image locally; when displaying a target webpage according to a target hypertext file, extracting the image index address in the target hypertext file, obtaining the target image associated with the extracted image index address from the local machine, and displaying the target webpage according to the target image, includes: when displaying a target webpage according to a target hypertext file, extracting the image index address in the target hypertext file, calculating the target summary information corresponding to the image index address in the target hypertext file; obtaining the target image named with the target summary information from the local machine; and displaying the target webpage according to the target image.

[0122] In one embodiment, when the terminal is online, it calculates the summary information corresponding to the image index address in the hypertext file, names the downloaded image according to the summary information, and stores the named image locally. When the terminal is offline and displays the target webpage according to the target hypertext file, for one image area in the target webpage, the terminal calculates the target summary information corresponding to the image index address in the target hypertext file, retrieves the target image named according to the target summary information from the local machine, and displays the target image in the image area.

[0123] It is understood that general summary information calculation strategies can meet the summary information calculation requirements of this application embodiment. Therefore, general summary information can be used to calculate the summary information corresponding to the image index address and the target summary information corresponding to the image index address in the target hypertext file, such as MD5 (MD5 Message-Digest Algorithm) message digest algorithm, SHA256 (Secure Hash Algorithm 256) algorithm, etc.

[0124] In one embodiment, the terminal calculates the summary information corresponding to the image index address in the hypertext file, names the downloaded images according to the summary information, and manages the downloaded images through an image loading component, such as the Glide component.

[0125] In this embodiment, when the network is online, images on the webpage are downloaded, and a relationship is established between the downloaded images and the image index addresses in the hypertext file. When the network is offline, images can be extracted from the local machine using the image index addresses in the target hypertext file, and then displayed in the corresponding image area of ​​the webpage.

[0126] In one embodiment, the method further includes: when the network is offline, entering a target webpage; in response to a drag operation on the target webpage, displaying the page content corresponding to the position to which the drag operation has been slid, according to the static resources marked in the target hypertext file; when the position points to an image area in the target webpage, extracting the image index address corresponding to the image area from the target hypertext file, obtaining the target image associated with the extracted image index address from the local machine, and then displaying the target image in the image area.

[0127] In one embodiment, when the terminal is offline and displays a target webpage according to a target hypertext file, it can use lazy loading to display the target image corresponding to the image area in the target webpage. For example, when the proportion of the image area on the screen meets a preset proportion, the terminal triggers the retrieval of the target image associated with the image index address extracted from the target hypertext file from the local storage.

[0128] Specifically, when the terminal is offline, it enters the target webpage and responds to the drag operation on the target webpage. It displays the page content corresponding to the position to which the drag operation is performed according to the target hypertext file. When the position points to an image area in the target webpage, it extracts the image index address corresponding to the image area from the target hypertext file, retrieves the target image associated with the extracted image index address from the local machine, and then displays the target image in the image area.

[0129] In this embodiment, when displaying a webpage in offline mode, lazy loading of images is used to display the images on the webpage, which can save computer resources.

[0130] In one embodiment, the method further includes: when the network is online, entering the target webpage; in response to a drag operation on the target webpage, displaying the page content corresponding to the position to which the drag operation has been performed, according to the static resources marked in the original hypertext file corresponding to the target webpage; when the position points to an image area in the target webpage, using lazy loading of images, loading the target image corresponding to the image area according to the image index address marked in the original hypertext file and then displaying it.

[0131] In one embodiment, when the network is online, even though the terminal is downloading the static resources corresponding to the target webpage in the background, the webpage can still be loaded in the same way as if it were online.

[0132] Specifically, when the terminal is online, it enters the target webpage. In response to a drag-and-drop operation on the target webpage, the page content corresponding to the position dragged to in the original hypertext file is displayed. When the position points to an image area on the target webpage, lazy loading of the image is used. The target image corresponding to the image area is loaded and displayed based on the image index address marked in the original hypertext file. For example, when the image area occupies a preset percentage on the screen, loading the target image corresponding to the image area based on the image index address marked in the original hypertext file is triggered.

[0133] In one embodiment, the method further includes: when a redirect link to an associated webpage is embedded in the original hypertext file corresponding to the target webpage, downloading the static resources corresponding to the associated webpage according to the redirect link, and storing the downloaded static resources locally after associating them with the corresponding index address.

[0134] In one embodiment, when the network is online and the static resources corresponding to the target webpage are being downloaded, if there is a redirect link to an associated webpage in the target webpage, the download of the static resources corresponding to the associated webpage is triggered, so as to enable access to the associated webpage in the offline state.

[0135] In this embodiment, when a user accesses a target webpage offline, they can be redirected to the associated webpage through the redirection link in the target webpage.

[0136] In one embodiment, the static resources further include audio and video downloaded according to the audio and video index address in the hypertext file; the method further includes: when the network is online, associating the downloaded audio and video with the audio and video index address in the hypertext file and storing it locally; when the network is offline and the target webpage is displayed according to the target hypertext file, extracting the audio and video index address in the target hypertext file, obtaining the target audio and video associated with the extracted audio and video index address from the local machine, and then displaying the target webpage according to the target audio and video.

[0137] Audio and video refer to audio and / or video.

[0138] In one embodiment, the terminal downloads the hypertext file corresponding to the webpage and establishes an association between the downloaded hypertext file and the index address of the webpage. The terminal extracts audio and video index addresses from the hypertext file, downloads audio and video based on the audio and video index addresses, and establishes an association between the downloaded audio and video and the audio and video index addresses.

[0139] In one embodiment, the terminal names the downloaded audio and video files with an audio / video index address to establish an association between the downloaded audio / video files and the audio / video index address. In another embodiment, the terminal establishes an association between the audio / video index address and intermediate information, as well as an association between the intermediate information and the downloaded audio / video files, to establish an association between the downloaded audio / video files and the audio / video index address. For example, the terminal generates intermediate information based on the audio / video index address and names the downloaded audio / video files with the intermediate information.

[0140] In one embodiment, the terminal retrieves the target audio / video file associated with the audio / video index address in the target hypertext file from its local storage, based on the association between the downloaded audio / video file and the audio / video index address in the hypertext file. For example, when the terminal names the downloaded audio / video file with the audio / video index address in the hypertext file, it retrieves the target audio / video file named with that address from its local storage; when the terminal names the downloaded audio / video file with intermediate information generated from the audio / video index address in the hypertext file, it generates intermediate information based on the audio / video index address in the target hypertext file and retrieves the target audio / video file named with that intermediate information from its local storage. Furthermore, when the terminal establishes an association between the index address of a webpage and a custom file, it retrieves the custom file from its local storage based on the index address of the target webpage, retrieves the local index address corresponding to the audio / video index address in the target hypertext file based on the custom file, and retrieves the target audio / video file from its local storage based on the local index address.

[0141] In this embodiment, when the network is online, the audio and video on the webpage are downloaded, and an association is established between the downloaded audio and video and the audio and video index address in the hypertext file. When the network is offline, the audio and video can be extracted from the local machine using the audio and video index address in the target hypertext file, and then the audio and video can be displayed in the corresponding audio and video area of ​​the webpage.

[0142] In one embodiment, when the network is offline, in response to a browsing operation of a target webpage, retrieving a target hypertext file associated with the index address of the target webpage from the local machine includes: when the network is offline, displaying a list of titles of the image and text webpage; in response to a selection operation of a target title in the title list, entering the target image and text webpage corresponding to the target title; and retrieving the target hypertext file associated with the index address of the target image and text webpage from the local machine.

[0143] Among them, a text-and-image webpage is a page composed of text and images, such as an article webpage. An article webpage is a page that displays articles, such as subscription account article pages in social applications, article pages in reading subprograms, and news pages on news websites. The method provided in this application embodiment can support users to read subscription account articles, articles in reading subprograms, and news from news websites offline.

[0144] For example, refer to Figure 4 , Figure 4 The diagram illustrates an interface diagram of a title list for a text and image webpage in one embodiment. As can be seen, users can select articles for offline reading through the title list 402 of the text and image webpage.

[0145] The method provided in this application allows for the following steps when the network is online: downloading the hypertext file corresponding to the webpage and the images from the webpage, and establishing an association between the downloaded hypertext file and the index address of the webpage, as well as an association between the downloaded images and their index addresses. When the network is offline, the terminal displays a list of titles for the text and image webpages. In response to selecting a target title from the list, the terminal enters the target text and image webpage corresponding to that title. The target hypertext file is retrieved from the local machine based on the index address of the target webpage. When displaying the target webpage according to the target hypertext file, the target images can be retrieved from the local machine based on the image index addresses within the target hypertext file, thus enabling offline access to the text and image webpages.

[0146] In one embodiment, such as Figure 5As shown, a webpage display method is provided. This embodiment can be applied to scenarios of offline webpage access, such as offline access to pages on various websites like news websites and reading websites, or offline access to application pages, subscription account pages, and subprogram pages in various applications. This embodiment can be applied to offline access to text and image webpages. This embodiment mainly applies the method to... Figure 1 Taking terminal 102 as an example, the steps include:

[0147] Step S502: When the network is online, download the static resources corresponding to the web page. The static resources include hypertext files, images downloaded according to the image index addresses in the hypertext files, page style description information and page behavior description information obtained from the hypertext files.

[0148] In one embodiment, when page style description information and / or page behavior description information are externally linked to an hypertext file, the terminal obtains page style description information from an external stylesheet through the link tag of the page style description information, and / or obtains page behavior description information from an external source through the link address of the page behavior description information.

[0149] In one embodiment, when page style description information and / or page style description information is embedded in a hypertext file, the terminal searches for the identifier field of the page style description information in the hypertext file and uses the content marked by the identifier field of the page style description information as the page style description information, and / or searches for the identifier field of the page behavior description information in the hypertext file and uses the content marked by the identifier field of the page behavior description information as the page behavior description information.

[0150] In other embodiments, when page style description information and page behavior description information are embedded in a hypertext file, the terminal can extract the main text content from the hypertext file and directly generate a custom hypertext file based on the main text content and the hypertext file template. It can be understood that the main text content may include the embedded page style description information and page behavior description information.

[0151] Reference Figure 6 , Figure 6A flowchart illustrating the download and recovery process of a hypertext file in one embodiment is shown. As can be seen, when the network is online, the terminal downloads the hypertext file corresponding to the webpage, extracts the main text content from the hypertext file, fills the corresponding positions in the hypertext file template with the main text content, obtaining a custom hypertext file, calculates the summary information corresponding to the index address of the webpage, names the custom hypertext file according to the summary information, and stores it locally. When the network is offline, in response to a browsing operation of the target webpage, the index address of the target webpage is obtained, the target summary information corresponding to the index address of the target webpage is calculated, the target hypertext file named with the target summary information is obtained locally, and the target webpage is constructed according to the target hypertext file based on the webpage view.

[0152] Step S504: Extract the main text content from the hypertext file, obtain the constructed hypertext file template, and fill the corresponding positions in the hypertext file template with the main text content, page style description information and page behavior description information to generate a custom hypertext file.

[0153] It's understandable that the main text content includes image index addresses, therefore the custom hypertext file should include image index addresses.

[0154] Step S506: Calculate the summary information corresponding to the index address of the webpage, name the downloaded custom hypertext file according to the summary information, and store the named custom hypertext file locally.

[0155] Step S508: Calculate the summary information corresponding to the image index address in the hypertext file, name the downloaded image according to the summary information, and store the named image locally.

[0156] Reference Figure 7 , Figure 7 A flowchart illustrating the image download and recovery process in one embodiment is shown. As can be seen, when the network is online, the terminal obtains the image index address from the hypertext file, calculates the digest information corresponding to the image index address, names the downloaded image according to the digest information, and stores it locally. When the network is offline, the terminal extracts the image index address from the target hypertext file, retrieves the target image named according to the target digest information from the local machine, and displays the target webpage based on the target image.

[0157] Step S510: When the network is offline, in response to the browsing operation of the target webpage, calculate the target digest information corresponding to the index address of the target webpage, and obtain the target hypertext file named with the target digest information from the local machine.

[0158] Step S512: When displaying the target webpage according to the target hypertext file, extract the image index address in the target hypertext file, calculate the target summary information corresponding to the image index address in the target hypertext file, obtain the target image named with the target summary information from the local machine, and display the target webpage according to the target image.

[0159] Reference Figure 8 , Figure 8 A flowchart illustrating a webpage display method in one embodiment is shown. As can be seen, when the network is online, the terminal downloads the corresponding hypertext file, page style description information, page behavior description information, and images for the webpage and stores them locally. When the network is offline, the terminal retrieves the corresponding hypertext file, page style description information, page behavior description information, and images from the local storage, thus achieving offline construction of the webpage.

[0160] Reference Figure 9 , Figure 9 A flowchart illustrating a webpage display method in another embodiment is shown. As can be seen, when the network is online, the terminal downloads the hypertext file corresponding to the webpage, downloads the corresponding images, page style descriptions, and page behavior descriptions based on the hypertext file, extracts the main text content from the hypertext file, generates a custom hypertext file based on the main text content, page style descriptions, and page behavior descriptions, and establishes an association between the custom hypertext file and the index address of the webpage, as well as an association between the downloaded images and the image index addresses in the hypertext file. When the network is offline, the terminal retrieves the target hypertext file from the local machine according to the index address of the target webpage. When displaying the target webpage according to the target hypertext file, the terminal retrieves the target image from the local machine according to the image index address in the target hypertext file, and displays the target webpage based on the target image.

[0161] Reference Figure 10 and Figure 11 , Figure 10 A schematic diagram illustrating the online display of a webpage in one embodiment is shown. Figure 11 A schematic diagram illustrating offline display of a webpage is shown in one embodiment. It can be seen that, using the method of this embodiment, the offline displayed webpage remains consistent with the online displayed webpage.

[0162] Reference Figure 12 , Figure 12 This diagram illustrates a local storage of hypertext files and images in one embodiment. As can be seen, because a relationship is established between the hypertext file and the index address of the webpage, and between the image and the image index address, the storage location of the hypertext file and the image is unrestricted.

[0163] The aforementioned webpage display method, when the network is online, downloads the static resources corresponding to the webpage. These static resources include hypertext files and images downloaded based on the image index addresses in the hypertext files. After downloading, an association is established locally between the downloaded hypertext files and the webpage's index address, as well as between the downloaded images and their index addresses. Therefore, when the network is offline and the target webpage needs to be displayed, this association allows the system to retrieve the corresponding target hypertext file from the local machine based on the requested target webpage's index address. When displaying the target webpage according to the target hypertext file, the system can also retrieve the corresponding target images from the local machine based on the image index addresses in the target hypertext file. This enables the display of images on the webpage even offline, providing a complete display of the webpage and thus achieving offline access to the webpage.

[0164] It should be understood that, although Figure 2 , Figure 5 The steps in the flowchart are shown sequentially as indicated by the arrows, but these steps are not necessarily executed in the order indicated by the arrows. Unless otherwise specified herein, there is no strict order in which these steps are executed, and they can be performed in other orders. Figure 2 , Figure 5 At least some of the steps in the process may include multiple steps or multiple stages. These steps or stages are not necessarily completed at the same time, but may be executed at different times. The execution order of these steps or stages is not necessarily sequential, but may be executed in turn or alternately with other steps or at least some of the steps or stages in other steps.

[0165] In one embodiment, such as Figure 13 As shown, a webpage display device is provided. This device can be a software module, a hardware module, or a combination of both, integrated into a computer device. Specifically, the device includes: a download module 1302, an association module 1304, an acquisition module 1306, and a display module 1308, wherein:

[0166] Download module 1302 is used to download static resources corresponding to web pages when the network is online. Static resources include hypertext files and images downloaded according to the image index addresses in the hypertext files.

[0167] The association module 1304 is used to associate the downloaded hypertext file with the index address of the webpage and store it locally, and to associate the downloaded image with the image index address in the hypertext file and store it locally.

[0168] The acquisition module 1306 is used to acquire a target hypertext file associated with the index address of the target webpage from the local machine in response to a browsing operation of the target webpage when the network is offline.

[0169] The display module 1308 is used to extract the image index address from the target hypertext file when displaying the target webpage according to the target hypertext file, obtain the target image associated with the extracted image index address from the local machine, and then display the target webpage according to the target image.

[0170] In one embodiment, the static resource further includes at least one of page style description information and page behavior description information corresponding to the web page; the download module 1302 is further configured to: obtain at least one of page style description information and page behavior description information based on the downloaded hypertext file.

[0171] In one embodiment, the download module 1302 is further configured to: search for link tags of page style description information from a hypertext file, and download the page style description information according to the link tags of the page style description information; and / or search for link addresses of page behavior description information from a hypertext file, and download the page behavior description information according to the link addresses of the page behavior description information.

[0172] In one embodiment, the download module 1302 is further configured to: search for the identifier field of page style description information from the hypertext file, and use the content marked by the identifier field of the page style description information as the page style description information; and / or search for the identifier field of page behavior description information from the hypertext file, and use the content marked by the identifier field of the page behavior description information as the page behavior description information.

[0173] In one embodiment, the association module 1304 is further configured to: extract the main text content from the hypertext file; generate a custom hypertext file based on the main text content, page style description information, and page behavior description information; and store the custom hypertext file locally after associating it with the index address of the webpage.

[0174] In one embodiment, the association module 1304 is further configured to: obtain the constructed hypertext file template; fill the body content, page style description information and page behavior description information into the corresponding positions in the hypertext file template to generate a custom hypertext file.

[0175] In one embodiment, the association module 1304 is further configured to: calculate the summary information corresponding to the index address of the webpage; name the downloaded hypertext file according to the summary information, and store the named hypertext file locally; the acquisition module 1306 is further configured to: when in a network offline state, in response to the browsing operation of the target webpage, calculate the target summary information corresponding to the index address of the target webpage; and acquire the target hypertext file named with the target summary information from the local machine.

[0176] In one embodiment, the association module 1304 is further configured to: calculate the summary information corresponding to the image index address in the hypertext file; name the downloaded image according to the summary information and store the named image locally; the display module 1308 is further configured to: extract the image index address in the target hypertext file and calculate the target summary information corresponding to the image index address in the target hypertext file when displaying the target webpage according to the target hypertext file; obtain the target image named with the target summary information from the local machine; and display the target webpage according to the target image.

[0177] In one embodiment, the webpage display device further includes an entry module, which is configured to: enter a target webpage when the network is offline; the display module 1308 is further configured to: in response to a drag operation on the target webpage, display the page content corresponding to the position to which the drag operation is slid, according to the static resources marked by the target hypertext file; when the position points to an image area in the target webpage, extract the image index address corresponding to the image area from the target hypertext file, obtain the target image associated with the extracted image index address from the local machine, and then display the target image in the image area.

[0178] In one embodiment, the webpage display device further includes an entry module, which is configured to: enter the target webpage when the network is online; the display module 1308 is further configured to: in response to a drag operation on the target webpage, display the page content corresponding to the position to which the drag operation is slid, according to the static resources marked in the original hypertext file corresponding to the target webpage; when the position points to an image area in the target webpage, use lazy loading of images, load the target image corresponding to the image area according to the image index address marked in the original hypertext file, and then display it.

[0179] In one embodiment, the download module 1302 is further configured to: when the original hypertext file corresponding to the target webpage contains a jump link to an associated webpage, download the static resources corresponding to the associated webpage according to the jump link of the associated webpage, and store the downloaded static resources locally after associating them with the corresponding index address.

[0180] In one embodiment, the static resources also include audio and video downloaded according to the audio and video index address in the hypertext file; the association module 1304 is further configured to: when in an online network state, associate the downloaded audio and video with the audio and video index address in the hypertext file and store it locally; the display module 1308 is further configured to: when in an offline network state and displaying the target webpage according to the target hypertext file, extract the audio and video index address in the target hypertext file, obtain the target audio and video associated with the extracted audio and video index address from the local machine, and then display the target webpage according to the target audio and video.

[0181] In one embodiment, the acquisition module 1306 is further configured to: display a list of titles of a text and image webpage when the network is offline; in response to the selection of a target title in the title list, enter the target text and image webpage page corresponding to the target title; and acquire the target hypertext file associated with the index address of the target text and image webpage page from the local machine.

[0182] For specific limitations regarding the webpage display device, please refer to the limitations on the webpage display method above, which will not be repeated here. Each module in the aforementioned webpage display device can be implemented entirely or partially through software, hardware, or a combination thereof. These modules can be embedded in or independent of the processor in the computer device in hardware form, or stored in the memory of the computer device in software form, so that the processor can call and execute the operations corresponding to each module.

[0183] In the aforementioned webpage display device, when the network is online, the static resources corresponding to the webpage are downloaded. These static resources include hypertext files and images downloaded based on the image index addresses in the hypertext files. After downloading, an association is established locally between the downloaded hypertext files and the index addresses of the webpage, as well as between the downloaded images and their index addresses. Therefore, when the network is offline and a target webpage needs to be displayed, the device can retrieve the corresponding target hypertext file from the local machine based on this association and the index address of the requested target webpage. When displaying the target webpage according to the target hypertext file, the device can also retrieve the corresponding target images from the local machine based on the image index addresses in the target hypertext file. This allows for the display of images on the webpage even offline, providing a complete display of the webpage and enabling offline access to the webpage.

[0184] In one embodiment, a computer device is provided, which may be a terminal, and its internal structure diagram may be as follows: Figure 14As shown, the computer device includes a processor, memory, communication interface, display screen, and input devices connected via a system bus. The processor provides computing and control capabilities. The memory includes non-volatile storage media and internal memory. The non-volatile storage media stores the operating system and computer programs. The internal memory provides an environment for the operation of the operating system and computer programs stored in the non-volatile storage media. The communication interface is used for wired or wireless communication with external terminals; wireless communication can be achieved through Wi-Fi, carrier networks, NFC (Near Field Communication), or other technologies. When the computer program is executed by the processor, it implements a webpage display method. The display screen can be an LCD screen or an e-ink screen. The input devices can be a touch layer covering the display screen, buttons, a trackball, or a touchpad on the computer device's casing, or an external keyboard, touchpad, or mouse.

[0185] Those skilled in the art will understand that Figure 14 The structure shown is merely a block diagram of a portion of the structure related to the present application and does not constitute a limitation on the computer device to which the present application is applied. Specific computer devices may include more or fewer components than those shown in the figure, or combine certain components, or have different component arrangements.

[0186] In one embodiment, a computer device is also provided, including a memory and a processor, wherein the memory stores a computer program, and the processor executes the computer program to implement the steps in the above method embodiments.

[0187] In one embodiment, a computer-readable storage medium is provided storing a computer program that, when executed by a processor, implements the steps in the above method embodiments.

[0188] In one embodiment, a computer program product or computer program is provided, the computer program product or computer program including computer instructions stored in a computer-readable storage medium. A processor of a computer device reads the computer instructions from the computer-readable storage medium, and executes the computer instructions, causing the computer device to perform the steps in the above method embodiments.

[0189] Those skilled in the art will understand that all or part of the processes in the methods of the above embodiments can be implemented by a computer program instructing related hardware. The computer program can be stored in a non-volatile computer-readable storage medium, and when executed, it can include the processes of the embodiments of the methods described above. Any references to memory, storage, databases, or other media used in the embodiments provided in this application can include at least one of non-volatile and volatile memory. Non-volatile memory can include read-only memory (ROM), magnetic tape, floppy disk, flash memory, or optical storage, etc. Volatile memory can include random access memory (RAM) or external cache memory. By way of illustration and not limitation, RAM can be in various forms, such as static random access memory (SRAM) or dynamic random access memory (DRAM), etc.

[0190] The technical features of the above embodiments can be combined in any way. For the sake of brevity, not all possible combinations of the technical features in the above embodiments are described. However, as long as there is no contradiction in the combination of these technical features, they should be considered to be within the scope of this specification.

[0191] The embodiments described above are merely illustrative of several implementation methods of this application, and while the descriptions are relatively specific and detailed, they should not be construed as limiting the scope of the invention patent. It should be noted that those skilled in the art can make various modifications and improvements without departing from the concept of this application, and these all fall within the protection scope of this application. Therefore, the protection scope of this patent application should be determined by the appended claims.

Claims

1. A method for displaying a webpage, characterized in that, The method is applied to web pages that use lazy loading of images while online, including subscription article pages of social applications. When the network is online and the user enters the webpage or a page related to the webpage, the static resources corresponding to the webpage are downloaded. The static resources include hypertext files and images downloaded according to the image index addresses in the hypertext files. When the webpage is the subscription account article page, the pages related to the webpage include application pages of social applications and subscription account pages. Based on the downloaded hypertext file, obtain the page style description information and page behavior description information corresponding to the webpage; wherein, if the page style description information is external to the hypertext file, find the link tag of the page style description information in the hypertext file, download the page style description information according to the link tag, and establish the association between the page style description information and the link tag; if the page behavior description information is external to the hypertext file, find the link address of the page behavior description information in the hypertext file, download the page behavior description information according to the link address, and establish the association between the page behavior description information and the link address. Extract the main text content from the hypertext file, where the main text content is the hypertext file content after removing page advertisements; Obtain the constructed hypertext file template, wherein the hypertext file template corresponds to the page type of the webpage; The main text content, the page style description information, and the page behavior description information are respectively filled into the corresponding positions in the hypertext file template to generate a custom hypertext file; The custom hypertext file is associated with the index address of the webpage and stored locally; the downloaded image is associated with the image index address in the hypertext file and stored locally; the storage locations of the custom hypertext file and the image are arbitrary storage locations on the local machine. When the network is offline, in response to browsing the target webpage, the target hypertext file associated with the index address of the target webpage is retrieved from the local machine; When displaying the target webpage according to the target hypertext file through a webpage view, when the position of the page content displayed on the target webpage points to the image area in the target webpage, the image index address corresponding to the image area in the target hypertext file is extracted using the image lazy loading method. After obtaining the target image associated with the extracted image index address from the local machine, the target webpage is displayed according to the target image.

2. The method according to claim 1, characterized in that, The step of obtaining at least one of the page style description information and the page behavior description information based on the downloaded hypertext file includes: Locate the identifier field of the page style description information in the hypertext file, and use the content marked in the identifier field of the page style description information as the page style description information; and / or The identifier field of the page behavior description information is found in the hypertext file, and the content marked by the identifier field of the page behavior description information is used as the page behavior description information.

3. The method according to claim 1, characterized in that, The downloaded hypertext file is associated with the index address of the webpage and stored locally, including: Calculate the summary information corresponding to the index address of the webpage; After naming the downloaded hypertext file according to the summary information, the named hypertext file is stored locally; When the network is offline, in response to a browsing operation on the target webpage, retrieving the target hypertext file associated with the index address of the target webpage from the local machine includes: When the network is offline, in response to the browsing operation of the target webpage, the target digest information corresponding to the index address of the target webpage is calculated; Obtain the target hypertext file named with the target summary information from the local machine.

4. The method according to claim 1, characterized in that, The step of associating the downloaded image with the image index address in the hypertext file and storing it locally includes: Calculate the summary information corresponding to the image index addresses in the hypertext file; After naming the downloaded image according to the summary information, the named image is stored locally; When displaying the target webpage according to the target hypertext file, the step of extracting the image index address from the target hypertext file, obtaining the target image associated with the extracted image index address from the local machine, and then displaying the target webpage according to the target image includes: When displaying the target webpage according to the target hypertext file, extract the image index address in the target hypertext file and calculate the target summary information corresponding to the image index address in the target hypertext file; Retrieve the target image named with the target summary information from the local machine; The target webpage is displayed based on the target image.

5. The method according to claim 1, characterized in that, The method further includes: When the network is offline, the target webpage will be accessed; In response to a drag operation on the target webpage, the page content corresponding to the position to which the drag operation is slid is displayed according to the static resources marked on the target hypertext file; When the location points to an image area in the target webpage, the image index address corresponding to the image area is extracted from the target hypertext file, the target image associated with the extracted image index address is obtained from the local machine, and then the target image is displayed in the image area.

6. The method according to claim 1, characterized in that, The method further includes: When the user is online, they will be directed to the target webpage. In response to a drag operation on the target webpage, the page content corresponding to the position to which the drag operation is slid is displayed according to the static resources marked in the original hypertext file corresponding to the target webpage. When the location points to an image area in the target webpage, lazy loading of the image is used. Based on the image index address marked in the original hypertext file, the target image corresponding to the image area is loaded and displayed.

7. The method according to claim 6, characterized in that, The method further includes: When the original hypertext file corresponding to the target webpage contains a link to a related webpage, the static resources corresponding to the related webpage are downloaded according to the link to the related webpage, and the downloaded static resources are associated with the corresponding index address and stored locally.

8. The method according to claim 1, characterized in that, The static resources also include audio and video downloaded according to the audio and video index address in the hypertext file; the method further includes: When the network is online, the downloaded audio and video are associated with the audio and video index address in the hypertext file and then stored locally; When the network is offline and the target webpage is displayed according to the target hypertext file, the audio and video index addresses in the target hypertext file are extracted. After obtaining the target audio and video associated with the extracted audio and video index addresses from the local machine, the target webpage is displayed according to the target audio and video.

9. The method according to claim 1, characterized in that, When the network is offline, in response to a browsing operation on the target webpage, retrieving the target hypertext file associated with the index address of the target webpage from the local machine includes: When the network is offline, display a list of titles for the text and image webpages; In response to the selection of a target title in the title list, the user is directed to the target image and text webpage corresponding to the target title. Obtain the target hypertext file associated with the index address of the target image and text webpage from the local machine.

10. A webpage display device, characterized in that, The device is applicable to web pages that use lazy loading of images while online, including subscription article pages of social applications, and includes: The download module is used to download static resources corresponding to the webpage when the user is online and enters the webpage or a page related to the webpage. The static resources include hypertext files and images downloaded according to the image index addresses in the hypertext files. When the webpage is the subscription account article page, the pages related to the webpage include application pages of social applications and subscription account pages. The download module is further configured to, based on the downloaded hypertext file, obtain page style description information and page behavior description information corresponding to the webpage; wherein, if the page style description information is external to the hypertext file, the module searches for the link tag of the page style description information in the hypertext file, downloads the page style description information according to the link tag, and establishes an association between the page style description information and the link tag; if the page behavior description information is external to the hypertext file, the module searches for the link address of the page behavior description information in the hypertext file, downloads the page behavior description information according to the link address, and establishes an association between the page behavior description information and the link address. The association module is used to associate the downloaded hypertext file with the index address of the webpage and store it locally, and to associate the downloaded image with the image index address in the hypertext file and store it locally. The association module, when storing the downloaded hypertext file locally after associating it with the index address of the webpage, specifically performs the following steps: extracting the main text content from the hypertext file, wherein the main text content is the hypertext file content after removing page advertisements; obtaining a constructed hypertext file template, wherein the hypertext file template corresponds to the page type of the webpage; filling the main text content, the page style description information, and the page behavior description information into the corresponding positions in the hypertext file template, respectively, to generate a custom hypertext file; associating the custom hypertext file with the index address of the webpage and storing it locally; the storage locations of the custom hypertext file and the image are arbitrary storage locations on the local machine; The acquisition module is used to acquire a target hypertext file associated with the index address of the target webpage from the local machine in response to a browsing operation of the target webpage when the network is offline. The display module is used to extract the image index address corresponding to the image area in the target hypertext file when the position of the page content displayed on the target webpage points to the image area in the target webpage using the image lazy loading method, obtain the target image associated with the extracted image index address from the local machine, and then display the target webpage according to the target image.

11. A computer device comprising a memory and a processor, wherein the memory stores a computer program, characterized in that, When the processor executes the computer program, it implements the steps of the method according to any one of claims 1 to 9.

12. A computer program product comprising computer instructions, characterized in that, The computer instructions are stored in a computer-readable storage medium and, when read and executed by the processor of a computer device, cause the computer device to perform the steps of the method according to any one of claims 1-9.

Citation Information

Patent Citations

  • Application installation data packet generation method, server and computer storage medium

    CN110515631A

  • Page display method, system and device, equipment and storage medium

    CN112612977A

  • Webpage saving method and device, equipment and storage medium

    CN113051502A