CN116502001A

CN116502001A - Webpage display method and device, electronic equipment and storage medium

Info

Publication number: CN116502001A
Application number: CN202310531837.8A
Authority: CN
Inventors: 魏文豪
Original assignee: Beijing Lingshi Technology Co ltd
Current assignee: Beijing Lingshi Technology Co ltd
Priority date: 2023-05-11
Filing date: 2023-05-11
Publication date: 2023-07-28

Abstract

The embodiment of the application provides a webpage display method, a webpage display device, electronic equipment and a storage medium, and relates to the technical field of Internet. The method comprises the following steps: acquiring a target link in the webpage content of the current loaded webpage; determining a network resource identifier of the network resource corresponding to the target link according to the target link; acquiring resource data of resources to be displayed corresponding to network resources based on the network resource identification; generating an object code for displaying the resources to be displayed according to the resource data; updating a first source code of the webpage based on the target code to obtain a second source code; based on the second source code, the web page is displayed. According to the scheme provided by the embodiment of the application, the source code of the webpage is updated based on the target code generated by the resource data to be displayed, and then the webpage is displayed based on the updated source code, so that the resource to be displayed is displayed in the webpage content, and a user can intuitively see the related content of the network resource in the webpage.

Description

Webpage display method and device, electronic equipment and storage medium

Technical Field

The present disclosure relates to the field of internet technologies, and in particular, to a method and apparatus for displaying a web page, an electronic device, and a storage medium.

Background

With the advent of the digital age, network resources have become increasingly enriched. Because most network resources have a large information content, users often share network resources in a linked manner through electronic devices in order to facilitate network resource sharing.

The sender sends the network resource to be shared to the receiver in the form of a link, and the receiver receives the link and displays the link on a display interface. After clicking the link in the display interface of the receiver, the receiver displays the network resource corresponding to the link on the display interface. Because the network resources are displayed on the display interface of the receiver in the form of links before the user does not click on the links corresponding to the network resources, the user cannot intuitively determine the content of the network resources corresponding to each link. If the number of links is relatively large, if the user wants to view the content of the network resource corresponding to a certain link through the receiver, the user needs to open all the links in the display interface of the receiver a little, and find the content of the network resource to be viewed in a traversal mode. Therefore, the traditional webpage display mode cannot intuitively display the content of the network resource to the user, so that the user cannot quickly and intuitively view the content of the network resource.

Disclosure of Invention

The embodiment of the application aims to provide a webpage display method, device, electronic equipment and storage medium, so that relevant contents of network resources can be intuitively displayed to a user. The specific technical scheme is as follows:

in a first aspect of an embodiment of the present application, a web page display method is provided, applied to a browser client, where the method includes:

acquiring a target link in the webpage content of the current loaded webpage;

according to the target link, determining a network resource identifier of a network resource corresponding to the target link;

acquiring resource data of resources to be displayed corresponding to the network resources based on the network resource identification;

generating an object code for displaying the resources to be displayed according to the resource data;

updating the first source code of the webpage based on the target code to obtain a second source code;

and displaying the webpage based on the second source code.

Optionally, before the obtaining the target link in the web page content of the currently loaded web page, the method further includes:

acquiring the website of the current loading webpage;

optionally, if the website is the preset website, the step of obtaining the target link in the webpage content of the current loaded webpage is executed.

Optionally, the obtaining, based on the network resource identifier, resource data of a resource to be displayed corresponding to the network resource includes:

judging whether the network resource identifier is in a preset permission access resource list, and if the network resource identifier is in the preset permission access resource list, acquiring resource data of the resource to be displayed corresponding to the network resource based on the network resource identifier.

Optionally, the generating, according to the resource data, an object code for displaying the resource to be displayed includes:

and generating target codes for displaying the resources to be displayed and linking to the network resources through the resources to be displayed according to the resource data and the target links.

Optionally, the updating the first source code of the web page based on the target code to obtain the second source code includes:

and replacing the original code corresponding to the target link in the first source code with the target code to obtain the second source code, wherein the original code is a code for displaying the target link.

And adding the target code into the first source code to obtain the second source code.

Optionally, the network resource is a video file, and the resource to be displayed is at least one of a video title, a video cover and a preview video in the video file; the resource data is at least one of text data of the video title, picture address data of the video cover and video address data of the preview video.

In a second aspect of the embodiments of the present application, there is provided a web page display device applied to a browser client, the device including:

the first acquisition module is used for acquiring a target link in the webpage content of the current loaded webpage;

the determining module is used for determining the network resource identification of the network resource corresponding to the target link according to the target link;

the second acquisition module is used for acquiring resource data of the resources to be displayed corresponding to the network resources based on the network resource identification;

the generation module is used for generating target codes for displaying the resources to be displayed according to the resource data;

the updating module is used for updating the first source code of the webpage based on the target code to obtain a second source code;

And the display module is used for displaying the webpage based on the second source code.

Optionally, the apparatus further includes:

the third acquisition module is used for acquiring the website of the current loading webpage before acquiring the target link in the webpage content of the current loading webpage;

the judging module is used for judging whether the website is a preset website, and if the website is the preset website, executing the step of acquiring the target link in the webpage content of the current loaded webpage.

Optionally, the second obtaining module is specifically configured to determine whether the network resource identifier is in a preset access permission resource list, and if the network resource identifier is in the preset access permission resource list, obtain, based on the network resource identifier, resource data of a resource to be displayed corresponding to the network resource.

Optionally, the generating module is specifically configured to generate, according to the resource data and the target link, a target code for displaying the resource to be displayed and linking to the network resource through the resource to be displayed.

Optionally, the updating module is specifically configured to replace an original code corresponding to a target link in the first source code with the target code, so as to obtain the second source code, where the original code is a code for displaying the target link.

Optionally, the updating module is specifically configured to add the target code to the first source code to obtain the second source code.

In a third aspect of the embodiments of the present application, an electronic device is provided, including a processor, a communication interface, a memory, and a communication bus, where the processor, the communication interface, and the memory complete communication with each other through the communication bus;

a memory for storing a computer program;

and the processor is used for realizing any one of the steps of the webpage display method when executing the program stored in the memory.

In a fourth aspect of the embodiments of the present application, there is provided a computer readable storage medium having a computer program stored therein, the computer program implementing any of the above-described steps of a web page display method when executed by a processor.

According to the webpage display method, the target codes are generated according to the resource data of the resources to be displayed corresponding to the network resources, the source codes of the webpages are updated based on the target codes, and the webpages are displayed based on the updated source codes, so that the resources to be displayed can be displayed in the webpage content of the webpages, and a user can intuitively see the related content of the network resources in the webpages.

Of course, not all of the above-described advantages need be achieved simultaneously in practicing any one of the products or methods of the present application.

Drawings

In order to more clearly illustrate the embodiments of the present application or the technical solutions in the prior art, the following description will briefly introduce the drawings that are required to be used in the embodiments or the description of the prior art, and it is obvious that the drawings in the following description are only some embodiments of the present application, and other embodiments may also be obtained according to these drawings to those skilled in the art.

Fig. 1 is a first flowchart of a web page display method provided in an embodiment of the present application;

FIG. 2 is a second flowchart of a method for displaying a web page according to an embodiment of the present disclosure;

FIG. 3 is a third flowchart of a method for displaying a web page according to an embodiment of the present disclosure;

Fig. 4 is a fourth flowchart of a web page display method according to an embodiment of the present application;

fig. 5 is a fifth flowchart of a web page display method according to an embodiment of the present application;

FIG. 6 is a sixth flowchart of a method for displaying a web page according to an embodiment of the present application;

fig. 7a is a schematic diagram of web page content of a web page corresponding to a first source code according to an embodiment of the present application;

fig. 7b is a first schematic diagram of web page content of a web page corresponding to a second source code according to an embodiment of the present application;

fig. 7c is a second schematic diagram of web page content of a web page corresponding to a second source code according to an embodiment of the present application;

fig. 7d is a third schematic diagram of web page content of a web page corresponding to the second source code according to the embodiment of the present application;

fig. 7e is a fourth schematic diagram of web page content of a web page corresponding to the second source code according to the embodiment of the present application;

fig. 7f is a fifth schematic diagram of web page content of a web page corresponding to the second source code according to the embodiment of the present application;

fig. 8 is a schematic diagram of a development flow of a browser plug-in according to an embodiment of the present application;

fig. 9 is a block diagram of a web page display device according to an embodiment of the present application;

fig. 10 is a block diagram of an electronic device according to an embodiment of the present application.

Detailed Description

The following description of the embodiments of the present application will be made clearly and fully with reference to the accompanying drawings, in which it is evident that the embodiments described are only some, but not all, of the embodiments of the present application. Based on the embodiments herein, a person of ordinary skill in the art would be able to obtain all other embodiments based on the disclosure herein, which are within the scope of the disclosure herein.

The traditional webpage display mode cannot intuitively display the content of the network resource to the user, so that the user cannot quickly and intuitively view the related content of the network resource.

In order to enable a user to intuitively see relevant content of a network resource, the embodiment of the application provides a webpage display method, which is applied to a browser client, and the browser client can execute webpage display method steps through own functional components or built-in plug-ins, and the method is not limited herein.

The browser client comprises, but is not limited to, a google browser client, a Kiwi browser client, a Flow browser client and the like, and the specific browser client is not limited herein and can meet the actual application requirements.

Referring to fig. 1, fig. 1 is a first flowchart of a web page display method provided in an embodiment of the present application, where the web page display method is applied to a browser client, the method may include the following steps:

Step S101: and acquiring a target link in the webpage content of the current loaded webpage.

Step S102: and determining the network resource identification of the network resource corresponding to the target link according to the target link.

Step S103: and acquiring resource data of the resources to be displayed corresponding to the network resources based on the network resource identification.

Step S104: and generating target codes for displaying the resources to be displayed according to the resource data.

Step S105: updating the first source code of the webpage based on the target code to obtain the second source code.

Step S106: based on the second source code, the web page is displayed.

According to the webpage display method, the target codes are generated according to the resource data of the resources to be displayed corresponding to the network resources, the source codes of the webpages are updated based on the target codes, and the webpages are displayed based on the updated source codes, so that the resources to be displayed are displayed in webpage contents, and users can intuitively see the related contents of the network resources in the webpages.

For step S101, in the process of displaying the current web page, the display interface of the web page at the browser client has two situations, where the first situation is: the webpage data of the current loaded webpage are already in the browser client, but the webpage data are not completely loaded into the webpage, and at the moment, the webpage content cannot be displayed; second case: the web page data of the currently loaded web page is already in the browser client and all the web page data is already loaded into the web page, and at this time, the web page displays the web page content containing the target link.

In both cases, the web content of the currently loaded web page exists in the browser client, so that the browser client can still directly acquire the target link in the web content of the currently loaded web page.

The expression form of the target link in the web page content may be text, picture, etc., which is not limited herein.

When a user opens or refreshes a webpage through a browser client, and a detection function set in the browser client detects that the webpage is loaded, a first acquisition function set in the browser client acquires a target link in webpage content of the currently loaded webpage, wherein the specific detection function is not limited herein, and the function of the detection function can be realized; the specific first acquisition function is not limited herein, and may be any function that satisfies the above first acquisition function, for example: the first acquisition function is a renderLink function implemented by JS (JavaScript, a programming language).

The first obtaining function may detect whether there is a keyword of the link in the first source code, and use the keyword of the link and a parameter after the keyword of the link together as a target link, for example: setting "http" and "https" as link keywords in advance in the browser client, when the first acquisition function detects the link keywords "https" or "http" in the first source code, taking the link keywords and parameters after the link keywords together as target links, for example, when the first acquisition function detects the link keywords "https" in the first source code, taking the parameters after "https" and "https" together as target links, for example, taking the https:// my.video321.net/shareds?1460842827056672768 is determined to be the target link.

In one embodiment, the browser client installs a browser plug-in, which includes a renderLink function in a content. Js file (content file); the step S101 specifically includes: the browser client calls a render link function to acquire a target link in the webpage content of the current loading webpage, wherein the render link function is used for acquiring the target link in the webpage content of the current loading webpage.

In an actual application scene, the browser can selectively display the network resources corresponding to the target links in one or more specific webpages.

In one embodiment, referring to fig. 2, fig. 2 is a second flowchart of a web page display method provided in the embodiment of the present application, and before step S101, the method further includes:

step S107: and acquiring the website of the current loaded webpage.

Step S108: judging whether the website is a preset website, if so, executing the step S101.

The preset website is preset in the browser client, can be set by a user according to the needs, can be default by the browser client, and is not limited herein, so that the actual application scene can be satisfied.

In practical applications, a specific website may be set as the preset website, for example: setting the B website https of the A company:// A12345678.B as a preset website; some kind of website may also be set as a preset website, for example: all websites of the A company are preset as preset websites, for example, websites containing the English name "mini zi" of the A company are preset as preset websites. The specific preset determination mode is not limited, and the actual application scene can be satisfied. For step S107, when the user opens or refreshes a web page through the browser client, the browser client invokes the set second acquisition function to acquire the website of the currently displayed web page when the detection function set in the browser client detects that the web page is loaded. The specific second obtaining function is not limited herein, and may be any function capable of implementing the second obtaining function, for example: the second acquisition function may be a renderLink function.

Since the website of the currently displayed web page already exists in the cached data of the browser client when the user opens or refreshes the currently displayed web page through the browser client, and the cached data generation time corresponds to the time when the user opens the currently displayed web page. Therefore, the browser client searches the website keywords in the cache data according to the front-to-back sequence generated by the cache data, and determines the parameters behind the website keywords as the website of the current display webpage. For example: the browser client searches the website keyword tab in the cache at the current moment, if the website keyword is not found, the browser client continues to search the website keyword in the cache at the moment before the current moment, and the browser client pushes the website keyword until the website keyword is found, and then the parameters after the website keyword are determined as the website of the current display webpage.

In one embodiment, the browser client is provided with a browser plug-in, and the browser plug-in comprises a renderLink function in a content. Js file; the step S107 specifically includes: the browser client calls a render link function to acquire a website of the current loaded webpage, wherein the render link function is also used for acquiring the website of the current loaded webpage;

in the above steps, the website of the current loaded webpage is determined, and in the next step, whether the website of the current loaded webpage is the preset website is required to be judged.

For step S108, whether the website is a preset website is determined by a determining function set in the browser client, and if the website is the preset website, a first acquiring function preset in the browser client acquires the target link in the web page content of the current loaded web page, where the specific determining function is not limited herein, and the function of the determining function may be implemented, for example: the judgment function may be an Index0f function.

When the preset website is a specific website, the preset judging function of the browser client compares the website of the loaded webpage with the specific website, when the website of the loaded webpage is the same as the specific website, the judging function determines the website of the currently loaded webpage as the preset website, otherwise, the website of the currently loaded webpage is not the preset website.

When the preset website is a certain type of website, the browser client judges whether the website of the loaded webpage has a keyword of the preset website according to a preset judging function, if the website of the currently loaded webpage has the keyword of the preset website, the preset judging function determines that the website of the currently loaded webpage is the preset website, otherwise, the website of the currently loaded webpage is not the preset website. For example, if the preset website keyword 'mini zi' is not contained in the website https:// my.video321.Net, then the website https:// my.video321.Net is not the preset website.

In one embodiment, the browser client is provided with a browser plug-in, and the browser plug-in comprises an Index0f function in a content. Js file; the step S108 specifically includes: the browser client calls an Index0f function to judge whether the website is a preset website, if the website is the preset website, the step S101 is executed, wherein the Index0f function is used for judging whether the website of the current loading webpage is the preset website, and if the website of the current loading webpage is the preset website, the step of acquiring the target link in the webpage content of the current loading webpage is executed. Before acquiring a target link in the webpage content of the current loading webpage, judging whether the website of the current loading webpage is a preset website, and if the website of the current loading webpage is the preset website, acquiring the target link in the webpage content of the current loading webpage. The method can filter out some webpages which do not need to view the network resource content corresponding to the target link, only display the network resource content corresponding to the link in the specific webpage which is interested by the user, reduce the workload of the browser client and avoid resource waste.

For step S102, each target link in the web page corresponds to a network resource, where the network resource includes, but is not limited to, a video file, a text file, an audio file, etc., and is not limited herein, and it is only required to satisfy the actual application scenario.

The network resource identifier of the network resource may be understood as an ID of the network resource, and the network resource identifier may be generated randomly when the network resource is generated, or may be set manually, which is not limited herein.

Because the link has a specific format and the link corresponding to the network resource includes the network resource identifier, the target link can be parsed according to the format to obtain the network resource identifier of the network resource corresponding to the target link. For example: the target link is https:// my.video321.Net/shareds1460842827056672768, the parameter value behind the keyword of shareds in the target link is 1460842827056672768, and the network resource identifier of the network resource corresponding to the target link is 1460842827056672768.

In the above, after the first obtaining function set in the browser client obtains the target link in the web content of the current loaded web page, the browser client calls the parsing function to parse the target link to obtain the network resource identifier of the network resource corresponding to the target link, where the specific parsing function is not limited herein, and the function of the parsing function is satisfied, for example, the parsing function is a getVideoId function.

In one embodiment, the browser client installs a browser plug-in that includes a getvideoId function in the content. Js file; the step S102 specifically includes: and the browser client calls a getvideoId function to analyze the target link to obtain the network resource identifier of the network resource corresponding to the target link, wherein the getvideoId function is used for analyzing the target link to obtain the network resource identifier of the network resource corresponding to the target link.

In practical situations, because the target links are too many, resource data of the resources to be displayed corresponding to the specific target links can be selectively acquired.

In one embodiment, referring to fig. 3, fig. 3 is a third flowchart of a web page display method provided in the embodiment of the present application, and step S103 includes:

Step S1031: judging whether the network resource identifier is in a preset permission access resource list, and if the network resource identifier is in the preset permission access resource list, acquiring resource data of the resource to be displayed corresponding to the network resource based on the network resource identifier.

The license resource list includes network resource identifiers of the network resources allowed to be acquired, for example, the preset license resource list includes the network resource identifiers described above: 1460842827056672768, the network resource is allowed to be acquired, so that the browser client can acquire the resource data of the resource to be displayed corresponding to the network resource based on the network resource identifier.

The network resource identifier allowing to be acquired may be preset in the browser client in a list form, or may be preset in the browser client in other forms such as a document, which is an embodiment of the present application, and is not to be construed as limiting the protection scope of the present application.

The network resource identifier allowed to be acquired can be set by a developer of the browser client according to the product function requirement during development, or can be acquired from a background server at regular time by the browser client, and is not limited herein.

As shown in table 1, a licensed resource list includes network resource identifiers of allowed acquired network resources, and the browser client identifies the network resources: 1460842827056672768 is compared to all network resource identities in table 1, if there is a network resource identity in table 1: 1460842827056672768 the same network resource identity, then the network resource is characterized as allowed to be acquired.

TABLE 1 list of licensed resources

1460842827056672762	1460842827056672763	1460842827056672764
			1460842827056672766	1460842827056672767	1460842827056672768

Before acquiring the resource data of the resource to be displayed corresponding to the network resource, judging whether the network resource identifier is in a preset permission access resource list, and if the network resource identifier is in the preset permission access resource list, acquiring the resource data of the resource to be displayed corresponding to the network resource based on the network resource identifier. The method can avoid the problem of resource data failure caused by no network resource acquisition authority, can filter out some resource data which cannot be acquired, reduces the workload of the browser client and avoids resource waste.

For step S103, the resource to be displayed may be part of the content in the network resource, and the resource to be displayed may also be the network resource itself. For example: if the network resource is a video file, the resource to be displayed can be the video file, or can be a part of the content in the video file, such as a video cover, a video title, a preview video, and the like; if the network resource is a text file, the resource to be displayed can be the text file, or can be a part of the content in the text file, such as keywords, file titles, and the like; if the network resource is an audio file, the resource to be displayed may be the audio file, or may be a part of content in the audio file, such as an audio title, an audio fragment, and the like. Specifically, the relationship between the resources to be displayed and the network resources is not limited herein, and the actual application scenario can be satisfied.

For example, when the resource to be displayed is a picture, the resource data of the resource to be displayed may be a picture address of the picture; when the resource to be displayed is a video, the resource data of the resource to be displayed can be the video address of the video; when the resource to be displayed is a character, the resource data of the resource to be displayed can be the character itself; when the resource to be displayed is audio, the resource data of the resource to be displayed can be the audio address of the audio.

In one embodiment, the network resource is a video file, and the resource to be displayed is at least one of a video title, a video cover and a preview video in the video file; the resource data is at least one of text data of a video title, picture address data of a video cover and video address data of a preview video.

For example: if the resource to be displayed is the video file, the resource data of the resource to be displayed is the file address of the video file; if the resource to be displayed is a video cover, the resource data of the resource to be displayed is the picture address of the video cover; if the resource to be displayed is a video title, the resource data of the resource to be displayed is the text of the video title; if the resource to be displayed is the preview video, the resource data of the resource to be displayed is the video address of the preview video.

Likewise, in one embodiment, the network resource is a text file, and the resource to be displayed is at least one of a title and a keyword of the text file; the resource data is at least one of text data of a title and text data of a keyword.

Likewise, in one embodiment, the network resource is an audio file, and the resource to be displayed is at least one of a title and an audio clip of the audio file; the resource data is at least one of text data of a title and audio address data of an audio clip.

The specific correspondence between the resource data and the resource to be displayed can be deduced from the above description when the resource data and the resource to be displayed are in one-to-one correspondence and the network resource is a text file and an audio file, which is not illustrated here one by one.

And displaying the resources to be displayed of the network resources corresponding to the target links in the webpage content of the webpage, so that a user can intuitively see the related content of the network resources in the webpage, and the user experience is improved.

In the above, after the browser client obtains the network resource identifier of the network resource corresponding to the target link, the browser client invokes a preset interface function to obtain, according to the network resource identifier, resource data of the resource to be displayed corresponding to the network resource, where the specific interface function is not limited herein, and may satisfy the functions of the interface function, for example: the interface function is a getVideoInfo function.

Since the resource data is stored in the server, it is necessary to determine the server storing the resource data before acquiring the resource data. In general, the target link includes server information for storing network resources, and resource data of resources to be displayed corresponding to the network resources and the network resources are stored in the same file of the same server. Therefore, it is necessary to first determine a server storing network resources.

Because the target link includes the domain name corresponding to the storage network resource server, and the corresponding relation between the server storing the network resource and the domain name is configured in the background file of the browser client, the domain name corresponding to the storage network resource server can be determined based on the target link, and then the server storing the network resource can be determined based on the corresponding relation between the server storing the network resource and the domain name configured in the background file.

For example, the browser client may detect a keyword, such as "net", in the target link, which represents the domain name, determine the keyword and a parameter before the keyword as the domain name corresponding to the storage network resource server, and then determine the server of the storage network resource corresponding to the domain name based on the correspondence between the server of the storage network resource configured in the background. For example: the target link is https? 1460842827056672768, if the keyword of the domain name in the target link is "net", determining the parameter "my.video321" before the net and the net as the domain name, that is, the domain name in the target link is "my.video321.Net", and the browser client determines the server of the storage network resource corresponding to the domain name "my.video321.Net" based on the correspondence between the server of the storage network resource configured in the background.

The last step determines the server storing the network resources and then needs to determine the resource data of the resources to be presented.

Because the resources to be displayed corresponding to different network resources are different, correspondingly, the resource data of the corresponding resources to be displayed are different, for example, when the network resources are video resources, the corresponding resources to be displayed can be at least one of a video cover, a video title, a preview video and all videos. Therefore, resources to be displayed corresponding to different network resources are preset in the browser client, for example, when the browser client preset that the network resources are video resources, the resources to be displayed are preview videos, and corresponding resource data are address data of the preview videos; when the network resource is a text resource, the resource to be displayed is a text title, and the corresponding resource data is text title data. Therefore, the corresponding relation between different network resource types and the resources to be displayed is preset in the browser client.

When the browser client calls a preset interface function to obtain resource data of resources to be displayed corresponding to the network resources according to the network resource identification, the browser client can judge what type of the resources are the network resources corresponding to the target links according to the resource keywords in the target links, and after the type of the network resources is determined, the resources to be displayed in the network resources corresponding to the target links are determined according to the corresponding relation between the type of the network resources preset in the browser client and the resources to be displayed. For example: the browser client determines text keywords in the target link, for example: assuming that the resource keywords are video, audio and text, and when the browser client detects that the target link comprises video, the network resource is represented as video resource; when the browser client detects that the target link comprises audio, the network resource is represented as audio resource; when the browser client detects that the target link comprises text, the network resource is represented as text resource.

In the above example, the target links are: https? 1460842827056672768 the browser client determines that the network resource corresponding to the target link is a video resource according to the resource keyword, the interface function of the browser client determines that the resource to be displayed in the network resource corresponding to the target link is a preview resource based on the preset corresponding relation between the network resource type and the resource to be displayed, further determines that the display resource data is a preview resource address, and then obtains the preview resource address from the corresponding server according to the network resource identifier.

In one embodiment, the browser client is provided with a browser plug-in, and the browser plug-in comprises a getVideoInfo function in a background. The step S103 specifically includes: according to the target link, determining the network resource type of the network resource corresponding to the target link; the browser client calls a getVideoInfo function, and obtains resource data of resources to be displayed corresponding to the network resources based on the network resource identifiers and the network resource types, wherein the getVideoInfo function is used for obtaining the resource data of the resources to be displayed corresponding to the network resources based on the network resource identifiers.

In step S104, since the display content in the web page is determined by the source code of the web page, if a specific content needs to be displayed in the web page, the code of the specific content needs to be added to the source code of the web page. That is, if the resource to be displayed is to be displayed in the web page of the browser client, the code corresponding to the resource data should be in the source code of the web page. Fig. 7a is a schematic diagram of web page content of a web page corresponding to a first source code according to an embodiment of the present application.

After the browser client acquires the resource data, the browser client invokes a preset editing function to edit the resource data into an object code for displaying the resource to be displayed, and the specific editing function is not limited herein, so that the function of the editing function can be satisfied. The browser generates an object code for displaying the resource to be displayed according to the resource data, wherein the object code comprises two conditions: in case 1, the browser client generates an object code containing resource data and having a display function, for example, the object code may define whether the display position of the resource to be displayed corresponding to the resource data in the web content is at the beginning of the web content or in the middle of the web content; in case 2, the browser client may also generate object code containing resource data and having a specific display function and a function of accessing network resources through an access link, so that the user may access the network resources through the access link in the web page. Wherein, the access link can be in the form of text in the webpage content of the webpage, such as: the text form of the access link in fig. 7 b; the access link may be in the form of a graphic, such as the jump button in fig. 7 e. The access link may not be displayed in the web page content as shown in fig. 7c, for example: binding the network resource with the access link in the second source code, and setting a jump function, so that when a user clicks the resource to be displayed corresponding to the resource data, the browser client accesses the address corresponding to the access link, acquires the network resource in the server corresponding to the access link, and displays the network resource in the webpage.

As shown in fig. 4, in one embodiment, step S104 includes step S1041: and generating target codes for displaying the resources to be displayed and linking to the network resources through the resources to be displayed according to the resource data and the target links.

And linking the resource data with the target to generate target codes for displaying the resources to be displayed and linking the resources to be displayed to the network resources through the resources to be displayed. The function of the target link is maintained, the target link is not displayed in the display content of the webpage, the webpage displayed at present is simpler, and the user experience is improved.

For step S105, the target code for displaying the resource to be displayed is generated above, and in order to display the resource to be displayed in the web page content, the first source code of the web page needs to be updated based on the target code, and the second source code for displaying the web page is obtained.

Since each web resource in a web page corresponds to an element in the source code for displaying it, for example: the network resource in the webpage is a picture, the code for displaying the picture is arranged in the source code corresponding to the webpage, the code for displaying the picture is called an element, and the target code for displaying the resource to be displayed is obtained, so that a new element corresponding to the resource to be displayed is obtained. Therefore, the display of the network resource in the webpage can be changed by modifying the element corresponding to the network resource in the source code.

Further, updating the first source code of the web page based on the object code may be understood as updating the first source code of the web page based on new elements composed of the object code. Before updating the first source code of the web page based on the new elements composed of the target codes, it is first necessary to determine old elements corresponding to the target links in the first source code. Therefore, the browser client can search the position of the old element corresponding to the target link in the first source code in a keyword searching mode.

Assuming that the preset element keywords are "div" and "1460842827056672768", the first source code includes: < div > < p > explain video- < ahref= "https:// my.video321.Net/shareds?1460842827056672768", when the browser client detects that a piece of code in the first source code includes both" div "and" 1460842827056672768", the piece of code is the old Dom element corresponding to the target link in the first source code.

After determining the position of the old element corresponding to the target link in the first source code, the first source code of the web page needs to be updated based on the target code to obtain the second source code for displaying the web page.

Because the resource to be displayed can be a network resource or a part of the network resource, the method for updating the first source code of the web page based on the target code is different when the resource to be displayed is different, and the step S105 will be described for two cases respectively:

Case 1:

as shown in fig. 5, in one embodiment, in the case where step S104 includes step S1041, step S105 includes step S1051, step S1051: and replacing the original code corresponding to the target link in the first source code with the target code to obtain a second source code, wherein the original code is a code for displaying the target link.

Since the old Dom element corresponding to the target link in the first source code is determined, after determining the old Dom element corresponding to the target link in the first source code, the browser client may replace the old element of the target link in the first source code with the new Dom element composed of the target code, to obtain the second source code containing the new Dom element. In this case, the original target link is not displayed in the web page displayed based on the second source code, and only the network resource to be displayed is displayed.

The update function set in the browser client is based on generating a new Dom element, and updates the first source code to obtain the second source code, where the specific update function is not limited herein, and may implement the function of the update function, for example: the update function is $.

In one embodiment, the browser client is provided with a browser plug-in, and the browser plug-in comprises an updateBody function and a $ displacery function in a content. Js file, wherein the $ displacery function is a function in a Jquery; step S105, calling an updateBody function, and generating a new Dom element according to the object code; the method comprises the steps of calling a reprofiling width function, replacing old Dom elements corresponding to original codes in a first source code with new Dom elements corresponding to target codes to obtain a second source code, wherein the original codes are codes for displaying target links, an updateBody function is used for generating new Dom elements according to the target codes, and the reprofiling width function is used for replacing the old Dom elements corresponding to the original codes in the first source code with the new Dom elements corresponding to the target codes.

When the content to be displayed is the whole content of the network resource, the second source code is obtained by replacing the original code corresponding to the target link in the first source code with the target code. Thus, only the entire content of the network resource is displayed in the web page displayed based on the second source code. Therefore, the user can directly watch the whole content of the network resource without clicking the target link, and the user experience is improved.

Because the original target link is not displayed in the webpage displayed based on the second source code, only the network resource to be displayed is displayed. When the resource to be displayed is a part of the network resource, only the part of the network resource is displayed in the webpage of the browser client, and in this case, the object code not only contains the resource data, but also has a specific display function and a function of accessing the network resource through the access link, so that the user can access the network resource through the access link in the webpage.

When the content to be displayed is part of the network resource, the second source code is obtained by replacing the original code corresponding to the target link in the first source code with the target code. Therefore, in the web page displayed based on the second source code, not only part of the content of the network resource is displayed, but also access links for accessing all the network resources are provided. Therefore, the user can intuitively see the resources to be displayed of the network resources, namely the key contents of the network resources, in the display contents of the webpage. On the premise of knowing the key content of the network resource, the user can click on the access link corresponding to the resource to be displayed, which is interested in the webpage, to access the complete network resource. The method can enable a user to intuitively see the key content of the network resource, and does not need to place all the content of the network resource on the current display page, thereby saving the network resource.

Case 2:

as shown in fig. 6, in one embodiment, step S105 includes step S1052: and adding the target code into the first source code to obtain a second source code. At this time, the resource to be displayed and the target link are displayed in the webpage of the browser client, as shown in fig. 7b, assuming that the resource to be displayed is a network resource, and the webpage content displays the network resource and the target link; as shown in fig. 7d and fig. 7e, assume that the resource to be displayed is a video title and a video cover in a video file, and the web content is only displayed as the video title and the video cover in the video file, where the target link in fig. 7d is displayed in the form of text, and the target link in fig. 7e is displayed in the form of graphics.

Since the old Dom element corresponding to the target link in the first source code is determined, after determining the old Dom element corresponding to the target link in the first source code, the browser client may further add the remaining old Dom element of the target link in the first source code to a new Dom element composed of the target code, to obtain a second source code containing the old Dom element and the new Dom element. In this case, in the web page displayed based on the second source code, not only the original target link but also the network resource to be displayed is displayed.

The new element formed by adding the target code can be adjacently disposed on the old element, and the adjacent position can be the position before the old element or the position after the old element; a new element composed of the object code may be added at any position corresponding to the mail body in the first source code, which is not limited herein.

In one embodiment, the browser client is provided with a browser plug-in, and the browser plug-in comprises an updateBody function and a $ displacery function in a content. Js file, wherein the $ displacery function is a function in a Jquery; step S105 includes: invoking an updateBody function, and generating a new Dom element according to the object code; and calling a reprofiling width function, adding a new Dom element corresponding to the target code in the first source code to obtain a second source code, wherein the reprofiling width function is used for adding the new Dom element corresponding to the target code in the first source code to obtain the second source code.

Since the second source code is obtained by adding the object code to the first source code. Therefore, in the webpage displayed based on the second source code, not only the resource to be displayed but also the target link are displayed. Therefore, the user can intuitively see the resources to be displayed of the network resources in the display content of the webpage, and can select to click on the target link to access all the network resources. The method enables the user to intuitively see the related content of the network resource, and improves the user experience.

For step S106, as described above, there are two cases of the display interface of the web page, the first case: the webpage data of the current loaded webpage are already in the browser client, but the webpage data are not completely loaded into the webpage, and at the moment, the webpage content cannot be displayed; second case: the web page data of the currently loaded web page is already in the browser client and the web page data is already completely loaded into the web page, and at this time, the web page displays the web page content containing the target link. Therefore, when the currently loaded webpage is in the first condition, after the user opens the currently loaded webpage, the display interface of the browser client directly displays the webpage content corresponding to the second source code; when the currently loaded webpage is in the second condition, after the user opens the currently loaded webpage, the display interface of the browser client side firstly displays the webpage content corresponding to the first source code, and then the display content corresponding to the first source code is changed into the webpage content corresponding to the second source code.

The web page display method will be described with reference to specific examples.

Assume that: the browser client of the user C is provided with a browser plug-in, wherein the browser plug-in comprises a content. Js file and a background. Js file, and the content. Js file comprises a target link function for acquiring a current webpage; a getVideoId function for parsing the target link; generating an updateBody function of a new Dom element according to the object code; updating the first source code based on generating a new Dom element to obtain a $ displacerwidth function of the second source code; the background.js file includes getVideoInfo function for acquiring resource data based on the network resource identification.

The user D sends a mail carrying a link E to the user C, wherein the video corresponding to the link E is stored in the F server, and the link E: https:// my.video321.Net/shareds1460842827056672768; the user C opens the Gmail through the browser client, and the browser client loads the webpage content corresponding to the Gmail; acquiring a link E in the webpage content of the current loaded webpage by using a renderLink function of a content. Js file in the browser plug-in; after the renderLink function obtains the link E, the getvideoId function in the browser plug-in analyzes the obtained link E to obtain a network resource identifier 1460842827056672768 of the network resource in the link E; the browser plug-in calls a getVideoInfo function in a background.js file, and obtains resource data of resources to be displayed, corresponding to network resources, from the F server based on the network resource identifier 1460842827056672768; the browser plug-in generates an object code based on the resource data returned by the getVideoInfo function; the browser plug-in re-invokes the updateBody function, generates a new Dom element according to the object code, and re-invokes the $ displaWith function to update the first source code based on generating the new Dom element to obtain a second source code; the browser plug-in displays the web page based on the second source code.

The web page display method is illustrated below in connection with a specific usage scenario.

Scene 1:

the user a sends a mail f carrying a link to a mailbox account c of the user b through a computer, wherein the link is as follows: https:// my.video321.Net/shareds1460842827056672768, the link corresponding to a video placed in server d; a user b opens a corresponding mailbox through a computer browser e and logs in a mailbox account c, and the browser e automatically loads a first source code of webpage content corresponding to the mail f, wherein the browser e can execute any step in the webpage display method; the browser e renders a webpage of the browser e based on the first source code, so that a user can see a mail f sent by a user c on an interface of the browser e, and meanwhile, the browser e searches mail text content in webpage content corresponding to the mail f through keywords, for example, the keywords are "bodies", codes after the "bodies" are used for determining the mail text content in the first source code; and searching the key words of the links in the mail text to determine the links, for example: the keywords "https", "http" are searched, and the link keywords and parameters after the link keywords are taken together as target links, for example: the links determined are: https:// my.video321.Net/shareds1460842827056672768.

After determining the link, the browser e determines the id of the video corresponding to the link according to the keyword, for example, the parameters after the keyword "shareds" are determined as the id of the video; after determining the id of the video, the browser e calls a server interface to acquire the resource data of the video corresponding to the id from the server d, wherein the browser e presets the corresponding relation between the network resource type and the resource to be displayed, for example, the browser e presets the picture address and the video title of the video cover of the video and determines the picture address and the video title as the resource data; the browser e determines the network resource type corresponding to the target link according to the resource keyword in the target link, and then determines the resource data of the resource to be displayed according to the network resource type, for example: when the browser client detects that the target link comprises video, the network resource is represented as video resource, and the corresponding relation between the preset network resource type and the resource to be displayed is known, wherein the resource to be displayed of the video resource is a video cover and a video title, and the resource data is a picture address and a video title of the video cover.

After the browser e acquires the resource data, generating an object code containing a display video cover and a video title according to a certain display format based on the resource data; after the browser e generates the target code; since the link is determined in the above step, the browser e may add the above object code to the first source code at a position after a section of code containing the link, to obtain the second source code; since the browser e has completed rendering based on the first source code before the second source code is obtained, the browser e needs to refresh the current web page of the browser e based on the second source code, and at this time, as shown in fig. 7d, the user sees that the position behind the link in the original mail g displays the video cover and the video title.

Scene 2:

a user c opens a webpage g through a computer browser e, wherein the original webpage content of the webpage g comprises a link https:// my.video321.Net/shareds1460842827056672768, and the link corresponds to a video placed in a server d, and the browser e can execute any step in the webpage display method; the browser e renders the webpage of the browser e based on the first source code, so that a user can see the original webpage content on the interface of the browser e, and meanwhile, the browser e searches keywords of links in the first source code corresponding to the original webpage to determine the links, for example: searching keywords 'https', 'http', and taking the link keywords and parameters after the link keywords together as target links, for example, the links are: https:// my.video321.Net/shareds1460842827056672768.

After the browser e acquires the resource data, generating an object code containing a display video cover and a video title according to a certain display format based on the resource data; after the browser e generates the target code; since the link is determined in the above step, the browser e may add the above object code to the first source code at a position after a section of code containing the link, to obtain the second source code; since the browser e has completed rendering based on the first source code before the second source code is obtained, the browser e needs to refresh the current web page g of the browser e based on the second source code, and at this time, as shown in fig. 7f, the user sees the position behind the link in the original web page content to display the video cover and the video title.

Fig. 8 is a schematic diagram of development of a browser plug-in according to an embodiment of the present application. Mainly comprises the following steps:

the first step: a catalog of items is created. The item catalog may be extensions.

And a second step of: a base profile is created. The base profile may be a manifest.

The basic configuration file comprises the following steps: plug-in name, description of plug-ins, version numbers of configuration plug-ins, etc.

And a third step of: and adding background running file configuration in the basic configuration file.

Fourth step: a background page file is created. The background page file may be backgroup.

The background page file comprises a server interface getVideoInfo function, wherein the getVideoInfo function is used for acquiring resource data based on a network resource identifier.

Fifth step: a content file is created and logic is written in the content file. The content file may be a content.

The content file comprises an updateBody function, a displaWith function, a getVideoId function, a renderLink function and the like, and the background file comprises a getVideoInfo function, wherein the renderLink function is used for acquiring a target link in a current webpage; analyzing the target link by using the getVideoId function to obtain a network resource identifier; the updateBody function is used for generating new Dom elements according to the object code, and the replacable function is used for updating the first source code based on the generation of the new Dom elements to obtain the second source code.

According to the webpage display method, the target codes are generated according to the resource data of the resources to be displayed corresponding to the network resources, the source codes of the webpages are updated based on the target codes, and the webpages are displayed based on the updated source codes, so that the resources to be displayed are displayed in the webpage content of the webpages, namely, the user can intuitively see the content of the network resources in the webpages.

Based on the same inventive concept, the embodiment of the present application further provides a web page display device, which is applied to a browser client, referring to fig. 9, fig. 9 is a structural diagram of a web page display device provided in the embodiment of the present application, where the device includes:

a first obtaining module 901, configured to obtain a target link in a web page content of a currently loaded web page;

a determining module 902, configured to determine, according to the target link, a network resource identifier of a network resource corresponding to the target link;

a second obtaining module 903, configured to obtain resource data of a resource to be displayed corresponding to the network resource based on the network resource identifier;

a generating module 904, configured to generate, according to the resource data, an object code for displaying the resource to be displayed;

an updating module 905, configured to update the first source code of the web page based on the target code to obtain a second source code;

and a display module 906, configured to display a web page based on the second source code.

In some embodiments, the apparatus further comprises:

In some embodiments, the second obtaining module 903 is specifically configured to determine whether the network resource identifier is in a preset access permission resource list, and if the network resource identifier is in the preset access permission resource list, obtain, based on the network resource identifier, resource data of a resource to be displayed corresponding to the network resource.

In some embodiments, the generating module 904 is specifically configured to generate, according to the resource data and the target link, target code for displaying the resource to be exposed and linking to the network resource through the resource to be exposed.

In some embodiments, the updating module 905 is specifically configured to replace an original code corresponding to a target link in the first source code with the target code, so as to obtain the second source code, where the original code is a code for displaying the target link.

In some embodiments, the updating module 905 is specifically configured to add the target code to the first source code, so as to obtain the second source code.

In some embodiments, the network resource is a video file, and the resource to be shown is at least one of a video title, a video cover, and a preview video in the video file; the resource data is at least one of text data of the video title, picture address data of the video cover and video address data of the preview video.

According to the webpage display device, the target codes are generated according to the resource data of the resources to be displayed corresponding to the network resources, the source codes of the webpages are updated based on the target codes, and the webpages are displayed based on the updated source codes, so that the resources to be displayed can be displayed in the webpage content of the webpages, and a user can intuitively see the related content of the network resources in the webpages.

The embodiment of the present application also provides an electronic device, as shown in fig. 10, including a processor 1001, a communication interface 1002, a memory 1003, and a communication bus 1004, where the processor 1001, the communication interface 1002, and the memory 1003 complete communication with each other through the communication bus 1004,

a memory 1003 for storing a computer program;

the processor 1001 is configured to implement the steps of the web page display method according to any one of the above embodiments when executing the program stored in the memory 1003.

The communication bus mentioned above for the electronic devices may be a peripheral component interconnect standard (Peripheral Component Interconnect, PCI) bus or an extended industry standard architecture (Extended Industry Standard Architecture, EISA) bus, etc. The communication bus may be classified as an address bus, a data bus, a control bus, or the like. For ease of illustration, the figures are shown with only one bold line, but not with only one bus or one type of bus.

The communication interface is used for communication between the electronic device and other devices.

The Memory may include random access Memory (Random Access Memory, RAM) or may include Non-Volatile Memory (NVM), such as at least one disk Memory. Optionally, the memory may also be at least one memory device located remotely from the aforementioned processor.

The processor may be a general-purpose processor, including a central processing unit (Central Processing Unit, CPU), a network processor (Network Processor, NP), etc.; but also digital signal processors (Digital Signal Processor, DSP), application specific integrated circuits (Application Specific Integrated Circuit, ASIC), field programmable gate arrays (Field-Programmable Gate Array, FPGA) or other programmable logic devices, discrete gate or transistor logic devices, discrete hardware components.

In yet another embodiment provided herein, there is also provided a computer readable storage medium having stored therein a computer program which when executed by a processor implements the steps of any of the above web page display methods.

In yet another embodiment provided herein, there is also provided a computer program product containing instructions that, when run on a computer, cause the computer to perform any of the web page display methods of the above embodiments.

In the above embodiments, it may be implemented in whole or in part by software, hardware, firmware, or any combination thereof. When implemented in software, may be implemented in whole or in part in the form of a computer program product. The computer program product includes one or more computer instructions. When loaded and executed on a computer, produces a flow or function in accordance with embodiments of the present application, in whole or in part. The computer may be a general purpose computer, a special purpose computer, a computer network, or other programmable apparatus. The computer instructions may be stored in or transmitted from one computer-readable storage medium to another, for example, by wired (e.g., coaxial cable, optical fiber, digital Subscriber Line (DSL)), or wireless (e.g., infrared, wireless, microwave, etc.). The computer readable storage medium may be any available medium that can be accessed by a computer or a data storage device such as a server, data center, etc. that contains an integration of one or more available media. The usable medium may be a magnetic medium (e.g., floppy Disk, hard Disk, magnetic tape), an optical medium (e.g., DVD), or a semiconductor medium (e.g., solid State Disk (SSD)), etc.

It is noted that relational terms such as first and second, and the like are used solely to distinguish one entity or action from another entity or action without necessarily requiring or implying any actual such relationship or order between such entities or actions. Moreover, the terms "comprises," "comprising," or any other variation thereof, are intended to cover a non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements does not include only those elements but may include other elements not expressly listed or inherent to such process, method, article, or apparatus. Without further limitation, an element defined by the phrase "comprising one … …" does not exclude the presence of other like elements in a process, method, article, or apparatus that comprises the element.

In this specification, each embodiment is described in a related manner, and identical and similar parts of each embodiment are all referred to each other, and each embodiment mainly describes differences from other embodiments. In particular, for the apparatus, electronic device, storage medium embodiments, since they are substantially similar to the method embodiments, the description is relatively simple, and references to the parts of the description of the method embodiments are only needed.

The foregoing description is only of the preferred embodiments of the present application and is not intended to limit the scope of the present application. Any modifications, equivalent substitutions, improvements, etc. that are within the spirit and principles of the present application are intended to be included within the scope of the present application.

Claims

1. A web page display method, applied to a browser client, comprising:

acquiring a target link in the webpage content of the current loaded webpage;

and displaying the webpage based on the second source code.

2. The method of claim 1, wherein prior to the obtaining the target link in the web page content of the currently loaded web page, the method further comprises:

acquiring the website of the current loading webpage;

judging whether the website is a preset website, and if the website is the preset website, executing the step of acquiring the target link in the webpage content of the current loaded webpage.

3. The method of claim 1, wherein the obtaining, based on the network resource identifier, resource data of a resource to be displayed corresponding to the network resource includes:

4. The method of claim 1, wherein generating object code for displaying the resource to be presented based on the resource data comprises:

5. The method of claim 4, wherein updating the first source code of the web page based on the object code results in a second source code, comprising:

6. The method of claim 1, wherein updating the first source code of the web page based on the object code results in a second source code, comprising:

7. The method according to any one of claims 1-6, wherein the network resource is a video file, and the resource to be presented is at least one of a video title, a video cover, and a preview video in the video file; the resource data is at least one of text data of the video title, picture address data of the video cover and video address data of the preview video.

8. A web page display device for application to a browser client, the device comprising:

9. The electronic equipment is characterized by comprising a processor, a communication interface, a memory and a communication bus, wherein the processor, the communication interface and the memory are communicated with each other through the communication bus;

a memory for storing a computer program;

a processor for carrying out the method steps of any one of claims 1-7 when executing a program stored on a memory.

10. A computer-readable storage medium, characterized in that the computer-readable storage medium has stored therein a computer program which, when executed by a processor, implements the method steps of any of claims 1-7.