CN108829398B - Mobile terminal page interaction realization method and device - Google Patents

Mobile terminal page interaction realization method and device Download PDF

Info

Publication number
CN108829398B
CN108829398B CN201810257146.2A CN201810257146A CN108829398B CN 108829398 B CN108829398 B CN 108829398B CN 201810257146 A CN201810257146 A CN 201810257146A CN 108829398 B CN108829398 B CN 108829398B
Authority
CN
China
Prior art keywords
javascript
page
interaction
statement
function
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Active
Application number
CN201810257146.2A
Other languages
Chinese (zh)
Other versions
CN108829398A (en
Inventor
傅小健
陈连兴
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Xiamen Xinlyutong Technology Co ltd
Original Assignee
Xiamen Xinlyutong Technology Co ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Xiamen Xinlyutong Technology Co ltd filed Critical Xiamen Xinlyutong Technology Co ltd
Priority to CN201810257146.2A priority Critical patent/CN108829398B/en
Publication of CN108829398A publication Critical patent/CN108829398A/en
Application granted granted Critical
Publication of CN108829398B publication Critical patent/CN108829398B/en
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Images

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00Arrangements for software engineering
    • G06F8/60Software deployment
    • G06F8/61Installation

Landscapes

  • Engineering & Computer Science (AREA)
  • Software Systems (AREA)
  • General Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Stored Programmes (AREA)
  • Information Transfer Between Computers (AREA)

Abstract

The invention discloses a method and a device for realizing mobile terminal page interaction, wherein the method comprises the following steps: the mobile terminal browser downloads a page from the PC terminal and carries out page interaction JavaScript initialization so as to inject predefined JavaScript and JavaScript interaction statements; calling back page data of the PC end through JavaScript bridge by using pre-injected JavaScript and JavaScript interactive statements to load a page, and intercepting the JavaScript of the PC end; and loading the JavaScript to respond to the operation of the user and run the JavaScript to realize the interaction of the corresponding webpage functions. By using the invention, the mobile terminal can directly log in and browse the PC terminal webpage without independently developing the WEB version of the mobile terminal.

Description

Mobile terminal page interaction realization method and device
Technical Field
The invention relates to the technical field of electronic information, in particular to a method and a device for realizing mobile terminal page interaction.
Background
With the rapid development of the mobile internet, a gate passing through the internet world is opened for a mobile communication terminal user, the mobile internet combines the convenience of mobile communication and the rich content of the internet, becomes a cross field of the convergence development of the communication industry and the internet industry, and has huge market prospect.
However, the screen resolution of the mobile terminal equipment is different in size, and the adaptive development cost is high. And the CPU processing performance of the mobile terminal equipment is low and the memory is small. Therefore, some website webpages are not suitable for being directly displayed on the mobile terminal, secondary development is needed, and software and hardware factors of the mobile terminal need to be considered during development and design.
For those websites or network applications that already have a PC end, if a mobile version is desired to be developed, more labor cost and time cost are often required, and in addition, they may adopt different websites and need to maintain two sets of codes at the same time.
Disclosure of Invention
The invention mainly solves the technical problem of providing a mobile terminal page interaction realization method and a mobile terminal page interaction realization device, which can convert a PC terminal WEB page into a mobile terminal WEB page.
In order to solve the technical problems, the invention adopts a technical scheme that: a mobile terminal page interaction realization method is provided, and the method comprises the following steps: the mobile terminal browser downloads a page from the PC terminal and carries out JavaScript initialization of page interaction so as to inject predefined JavaScript and JavaScript interaction statements; the pre-defined JavaScript interactive statements are respectively defined according to the webpage functions and the interactive modes to be realized, are used for communication between JavaScript and native, and interact JavaScript registration statements and calling statements through a calling system; calling back page data of the PC end through JavaScript bridge by using pre-injected JavaScript and JavaScript interactive statements to load a page, and intercepting the JavaScript of the PC end; and loading the JavaScript to respond to the operation of the user and run the JavaScript to realize the interaction of the corresponding webpage functions.
The page interaction JavaScript comprises a registration statement and a callback statement; the register statement is used for registering a JavaScript function for native calling and receiving data and a callback function transmitted from the native, and the callback statement is used for calling a JavaScript bridge statement provided by the native to execute callback according to returned data.
The method includes that a mobile terminal browser downloads a page from a PC terminal and performs JavaScript initialization of page interaction to inject predefined JavaScript and JavaScript interaction statements, and specifically includes the following steps: the mobile terminal browser downloads a page from a PC terminal and intercepts a JavaScript api:// __ init _ bridge __ link, initializes a global variable system to interact JavaScript under WebView, sets a value of a page interaction function JavaScript _ isalReady to true, actively triggers a page interaction JavaScript Ready event, and informs web JavaScript that page interaction JavaScript is initialized; and injecting predefined JavaScript and JavaScript interactive statements.
The method includes the steps that by means of pre-injected JavaScript and JavaScript interactive statements, page data of a PC side are called back through JavaScript bridge to load a page, and the JavaScript of the PC side is intercepted, and the method specifically includes the steps of: after JavaScript is injected in advance to process and call back, a registered function name of native is notified, and the native calls a corresponding processing statement through the function name to transmit data and a call-back function; calling a corresponding callback function through JavaScript bridge to process the returned data so as to load a page; and intercepting the JavaScript of the PC side.
Wherein the method further comprises: defining a JavaScript Ready statement for page interaction in JavaScript; and calling a webpage interaction JavaScript Ready statement, and using a webpage interaction JavaScript global object in the window to interact with the local code, so as to realize the interaction of the webpage function.
In order to solve the technical problem, the invention adopts another technical scheme that: the device for realizing the mobile terminal page interaction is provided, and comprises: the initialization module is used for downloading a page from a PC (personal computer) terminal and carrying out JavaScript initialization of page interaction so as to inject predefined JavaScript and JavaScript interaction statements; the method comprises the steps that pre-defined JavaScript interactive statements are respectively defined according to a webpage function to be realized and an interactive mode, are used for communication between JavaScript and native, and interact JavaScript registration statements and calling statements through a calling system; the calling module is used for calling back the page data of the PC end through the JavaScript bridge by utilizing the pre-injected JavaScript and JavaScript interactive statements so as to load the page and intercept the JavaScript of the PC end; and the interaction module is used for loading JavaScript to respond to the operation of the user and run the JavaScript to realize the interaction of the corresponding webpage function.
The system interaction JavaScript comprises a registration statement and a callback statement; the register statement is used for registering a JavaScript function for native calling and receiving data and a callback function transmitted from the native, and the callback statement is used for calling a JavaScript bridge statement provided by the native to execute callback according to returned data.
The initialization module is further used for downloading a page from a PC end, intercepting a JavaScript api:// __ init _ bridge __ link, initializing a global variable system interaction JavaScript under WebView.
Wherein the calling module is further configured to: after JavaScript is injected in advance to process and call back, a registered function name of native is notified, and the native calls a corresponding processing statement through the function name to transmit data and a call-back function; and calling a corresponding callback function through JavaScript bridge to process the returned data so as to load the page.
The initialization module is further used for defining a JavaScript Ready statement of page interaction in JavaScript; the calling module is also used for calling a JavaScript Ready statement of page interaction, and using a global object of the JavaScript of page interaction in window to interact with the local code, so as to realize the interaction of the webpage functions.
Due to the adoption of the technical scheme, the invention has the remarkable technical effects that:
according to the invention, through downloading the page from the PC and carrying out page interaction JavaScript initialization, the pre-defined JavaScript and JavaScript interaction statements are injected, so that the page data of the PC is called back through the JavaScript bridge to load the page, the JavaScript of the PC is intercepted, the JavaScript can be operated and operated in response to the operation of a user after the JavaScript is loaded to realize the interaction of the function of the page, the mobile terminal can directly log in and browse the webpage of the PC, the WEB version of the mobile terminal does not need to be independently developed, the development cost and the maintenance cost can be effectively reduced on the premise of fully utilizing the content of the original website and keeping the appearance of the original interface, and the development can be completed only by little time and little labor cost.
Drawings
Fig. 1 is a schematic flowchart of a mobile terminal page interaction implementation method according to an embodiment of the present invention;
FIG. 2 is a flowchart illustrating a specific implementation method of step S12 shown in FIG. 1;
fig. 3 is a schematic structural diagram of a mobile end page interaction implementation apparatus according to an embodiment of the present invention.
Detailed Description
The prior art terminology to which embodiments of the invention are referred will be explained first.
JavaScript, which is an object-and event-driven client-side scripting language with relative security, is also a scripting language widely used for client-side Web development, and is often used to add dynamic functions to HTML (a subset of standard generalized markup languages) Web pages, such as responding to various operations of a user.
The present invention will be described in detail below with reference to the accompanying drawings and embodiments.
Fig. 1 is a schematic flow chart of a mobile terminal page interaction implementation method according to an embodiment of the present invention, where the method includes:
step S11, the mobile browser downloads the page from the PC and performs JavaScript initialization for page interaction, so as to inject predefined JavaScript and JavaScript interactive statements.
In this specification, for convenience of description about the JavaScript for page interaction that appears in functions, statements, and the like, the JavaScript for page interaction is hereinafter abbreviated as XXJS.
After the page is downloaded in the mobile terminal, the front terminal actively requests a xxjsapi:// __ init _ bridge __ link, and the link is intercepted locally to carry out XXJS initialization.
XXJS initialization is specifically as follows: initializing a global variable XXJS under WebView, setting XXJS. _ isallReady to true, actively triggering an XXJReady event, notifying the web JavaScript XXJS that initialization is completed, and executing subsequent operations.
If the front end does not proactively initialize XXJS, the Web container of the advisor/helper App will also each initialize XXJS after the page is loaded.
Furthermore, a pre-defined JavaScript interactive statement (XXJS) is respectively defined according to the functions and interactive modes of the webpage to be realized, and is used for communication between JavaScript and native, and the front end can register the statement and call the statement by calling the JavaScript interactive statement. In the present embodiment, the XXJS includes:
(1) register statement, i.e., registerJSHandler statement: registering a JavaScript function for native call and providing callback. And calling back the registered function name of the native after the JavaScript processing is completed, calling the corresponding processing statement by the native through the function name, and receiving the data and the call-back function transmitted from the native.
For example, native calls JavaScript are implemented by:
@param jsHandlerName{string};
@p6ram handler{function};
function(data,callback){*//do something with'data'from native.*//notice native task done with'callback'*}*/XXJS.registerJSHandler=function(jsHandlerName,function(data,callback);
(2) callback statement, i.e., callnative handler statement: and calling a JavaScript bridge statement provided by native, and executing callback according to the returned data if the returned data exists after the processing is finished.
For example, the invocation of JavaScript bridge is implemented by:
@ param native HandlerName { strign }; native registered JavaScript bridge method name
@ param args { object }; the parameter value of the transfer is JavaScript object
@ param callback { function }; method callback processing ·/xxjs. callnative handler ═ function (native handler name, args, callback);
and step S12, calling back the page data of the PC side through the JavaScript bridge to load the page, and intercepting the JavaScript of the PC side.
Referring to fig. 2, calling back page data of the PC end by JavaScript bridge to load a page, and intercepting JavaScript of the PC end, which is specifically implemented by the following steps:
step S121, after JavaScript processing is injected in advance, a registered function name of native is called back to notify the native, and the native calls a corresponding processing statement through the function name to transmit data and a call-back function.
In the present embodiment, the following statements are specifically used:
@ param jsHandlerName { string }; registered function name by which native calls are realized
@ p6ram handler { function }; the processing function receives the data transmitted from the native and the callback function;
function (data, callback) with ' data ' from native '/notice true task with ' callback '/XXJS.REGISTER JSSHANDLE ═ function (jsHandlerName, function (data, callback);
step S122, calling a corresponding callback function through JavaScript bridge to process the returned data so as to load a page;
in the present embodiment, the following statements are specifically used:
@ param native HandlerName { strign }; JavaScript bridge sentence name registered by native
@ param args { object }; the parameter value of the transfer is JavaScript object
@ param callback { function }; statement callback processing ·/xxjs. callnative handler ═ function (native handler name, args, callback); realizing specific logic processing;
and step S123, intercepting the JavaScript of the PC terminal.
And step S13, loading JavaScript, and responding to user operation to run the JavaScript to realize interaction of corresponding webpage functions.
Specifically, an XXJSREAdy statement is defined in JavaScript, XXJSREAdy is called, and an XXJS global object in the window is used for interacting with the local code, so that the interaction of the webpage function is realized.
In this embodiment, an XXJSReady statement is defined in JavaScript as follows:
js var XXJSReady=function(readyCallback){if(readyCallback&&typeof readyCallback=='function'){if(window.XXJS&&typeof window.XXJS=='object'&&XXJS._isAllReady){readyCallback();}else{document.addEventListener('X XJSReady',function(){readyCallback();},false);}}};
in the embodiment, calling XXJSCAddy, using an XXJS global object under window to interact with a local code, and specifically realizing the interaction by the following statements:
js XXJSReady (function () {// initialize the function to be called;
in order to facilitate the calling of the front end, the client uses xxjs. callnative handler to encapsulate some commonly used components for the calling of the front end, and in the embodiment, the calling is specifically realized through the following statements:
"js XXJSREAdy (function ()// example: js calls method in load closure provided by native ui component XXJS.ui.loading.hide ();
further, the JavaScript interaction protocol supported by XXJS is illustrated as follows:
(1) opening a web page in a new view
The @ param url { string } of the page to be opened url @ param params { object } indicates that the page before opening is replaced (i.e. the page before opening cannot be returned) after the new page is opened when the parameter used for opening the page describes that @ display _ current { page } is true, and default is false/XXJS.page.start (url, params);
(2) returning to a view on a client
The number of layer levels needing rollback is @ param delta { int }, the default time of non-transmission is 1, and at most, the layer levels can return to the first page at the bottom of the stack,/XXJS.page.back (delta);
(3) web page redisplay callback JavaScript
The front end registers the code in the page to register the page, and the client calls the method when the page is displayed again, and the method is triggered by browser back operation and other operation of returning to the current page. The front end may handle operations such as setting navigation bar buttons within this method callback.
js// front-end registers xxjs register after xxjs has been initialized ('page. repeat', function (data) { xxjs. ui. toast. show ('page. html page redisplay') }
(4) Native obtains the sharing content of the current page through JavaScript
The front end registers the following method in a page needing custom shared content, and if the method is not registered or the method returns no data to be shared, the client locally reads the current ' webpage title ' webpage link ' as the shared content
'js// front end registers following method (registration after xxjs initialization is completed) for page requiring custom sharing scheme (xxjs is initialized) xxjs register jshandler (' page
Figure BDA0001609220390000081
// iOS client locally calls [ self.xxjsbridge callJHandler: @ "page.getShareData": nil responseCallback: ([ responseData isKindOfClass: [ NSDictionary class ] ]) { NSDictionary [ ("data" ] [ @ "shareData" ] ] ] "]; if (shareEntity) {/. acquiring customized shared content, and further analyzing and processing } }'
Please refer to fig. 3, which is a schematic structural diagram of a mobile terminal page interaction implementation apparatus according to an embodiment of the present invention. The device 30 comprises:
the initialization module 31 is configured to download a page from the PC and perform JavaScript initialization for page interaction, so as to inject predefined JavaScript and JavaScript interactive statements.
Specifically, the initialization module 31 initializes the global variable XXJS under WebView by intercepting a xxjsapi:// __ init _ bridge __ link after the page is completely downloaded, and sets XXJS. _ isallReady to true to actively trigger an XXJReady event to notify the web JavaScript XXJS that initialization is completed.
Furthermore, a pre-defined JavaScript interaction statement (XXJS) is respectively defined according to the webpage functions and interaction modes to be realized, the pre-defined JavaScript interaction statement is used for communication between JavaScript and native, and the front end can call XXJS registration statements and XXJS calling statements. In the present embodiment, XXJS includes a registerJSHandler statement and a callNativeHandler statement; the registry JSSHandler statement is used for registering a JavaScript function for native calling and receiving data and a callback function transmitted from the native, and the callNativeHandler statement is used for calling the JavaScript bridge statement provided by the native to execute the callback according to returned data.
The calling module 32 is configured to call back, by using the pre-injected JavaScript and JavaScript interactive statements, the page data of the PC end through the JavaScript bridge to load a page, and intercept the JavaScript of the PC end.
The calling module 32 calls back the page data of the PC end by using the pre-injected JavaScript and JavaScript interactive statements to load the page, which is specifically implemented as follows:
after JavaScript is injected in advance to process and call back, a registered function name of native is notified, and the native calls a corresponding processing statement through the function name to transmit data and a call-back function; the method is realized by the following statements:
@ param jsHandlerName { string }; registered function name, native, by which invocation is effected
@ p6ram handler { function }; the processing function receives the data transmitted from the native and the callback function;
function (data, callback) with ' data ' from native '/notice true task with ' callback '/XXJS.REGISTER JSSHANDLE ═ function (jsHandlerName, function (data, callback);
calling a corresponding callback function through JavaScript bridge to process the returned data so as to load a page; the method is realized by the following statements:
@ param native HandlerName { strign }; JavaScript bridge sentence name registered by native
@ param args { object }; the parameter value of the transfer is JavaScript object
@ param callback { function }; statement callback processing ═ xxjs. callnative handler ═ function (native handler name, args, callback); and realizing specific logic processing.
Example 1: JavaScript register statements for native call:
XXJS.registerJSHandler('getShareData',function(data,callback){
alert ('native calls getShareData method provided by JavaScript');
var responseData=do_some_task(data);
callback (responsedata); after completing the processing of/JavaScript, callback notifies native that the processing is completed
});
And the interaction module 33 is configured to load JavaScript, and respond to a user operation to run the JavaScript to implement interaction of a corresponding web page function.
In this embodiment, the initialization module 31 is further configured to define an XXJSReady statement in JavaScript. Specifically, the XXJSReady statement is:
js var XXJSReady=function(readyCallback){if(readyCallback&&typeof readyCallback=='function'){if(window.XXJS&&typeof window.XXJS=='object'&&XXJS._isAllReady){readyCallback();}else{document.addEventListener('X XJSReady',function(){readyCallback();},false);}}};
the calling module 32 is further configured to call an XXJSReady statement, and interact with the local code using an XXJS global object in the window to implement interaction of a web page function.
For example, in the present embodiment, the JavaScript interaction protocol supported by XXJS includes:
(1) opening a web page in the new view by the following statements:
the @ param url { string } of the page to be opened url @ param params { object } indicates that the page before opening is replaced (i.e. the page before opening cannot be returned) after the new page is opened when the parameter used for opening the page describes that @ display _ current { page } is true, and default is false/XXJS.page.start (url, params);
(2) returning to the view on the client, the method is realized by the following statements:
the number of layer levels needing rollback is @ param delta { int }, the default time of non-transmission is 1, and at most, the layer levels can return to the first page at the bottom of the stack,/XXJS.page.back (delta);
(3) callback JavaScript for web page redisplay
The front end registers the code in the page to register the page, and the client calls the method when the page is displayed again, and the method is triggered by the back operation of the browser and other operations returning to the current page. The front end may handle operations such as setting navigation bar buttons within this method callback.
js// front-end registers xxjs register after xxjs has been initialized ('page. repeat', function (data) { xxjs. ui. toast. show ('page. html page redisplay') }
(4) Native obtains the current page sharing case through js (front end register interface for local call)
The front end registers the following method on a page needing a custom sharing scheme, and if the method is not registered or the method returns no data to be shared, the client locally reads the current ' webpage title ' webpage link ' as the shared content
'js// front end registers following method (registration after xxjs initialization is completed) for page requiring custom sharing scheme (xxjs is initialized) xxjs register jshandler (' page
Figure BDA0001609220390000111
The client side of the iOS calls locally [ self.xxjsbridge callJSHandler: @ "page.getsharedata" data: nil responseCallback: [ [ responseData iskindofslass: [ NSDictionary class ] ]) { NSDictionary [ ([ NSDictionary class ] ]) { NSDictionary [ @ "data" ] [ @ "shareEntity" ]); if (shareEntity) {/. acquiring customized shared content, and further analyzing and processing } }'
According to the embodiment of the invention, the page is downloaded from the PC terminal and the JavaScript of page interaction is initialized, so that the pre-defined JavaScript and JavaScript interaction statements are injected, the page data of the PC terminal is called back through the JavaScript bridge to load the page, the JavaScript of the PC terminal is intercepted, the JavaScript can be operated and operated in response to the operation of a user after the JavaScript is loaded to realize the interaction of the function of the corresponding page, the mobile terminal can directly log in and browse the webpage of the PC terminal without independently developing the WEB version of the mobile terminal, the development cost and the maintenance cost can be effectively reduced on the premise of fully utilizing the content of the original website and keeping the appearance of the original interface, and the development can be completed only with little time and little labor cost.
In the embodiments provided in the present invention, it should be understood that the disclosed system, apparatus and method may be implemented in other ways. For example, the above-described apparatus embodiments are merely illustrative, and for example, the division of the modules or units is only one logical division, and there may be other divisions when actually implemented, for example, a plurality of units or components may be combined or may be integrated into another system, or some features may be omitted, or not executed. In addition, the mutual coupling or direct coupling or communication connection may be an indirect coupling or communication connection through some interfaces, devices or units, and may be in an electrical or other form.
The units described as separate parts may or may not be physically separate, and parts displayed as units may or may not be physical units, may be located in one place, or may be distributed on a plurality of network units. Some or all of the units can be selected according to actual needs to achieve the purpose of the solution of the embodiment.
In addition, functional units in the embodiments of the present invention may be integrated into one processing unit, or each unit may exist alone physically, or two or more units are integrated into one unit. The integrated unit can be realized in a form of hardware, and can also be realized in a form of a software functional unit.
The integrated unit, if implemented in the form of a software functional unit and sold or used as a stand-alone product, may be stored in a computer readable storage medium. Based on such understanding, all or part of the technical solution of the present invention may be embodied in the form of a software product, which is stored in a storage medium and includes instructions for causing a computer device (which may be a personal computer, a management server, or a network device) or a processor to execute all or part of the steps of the method according to the embodiments of the present invention. And the aforementioned storage medium includes: a usb flash disk, a removable hard disk, a read-only Memory (ROM), a Random Access Memory (RAM), a magnetic disk, or an optical disk, which can store program codes.
The above description is only an embodiment of the present invention, and not intended to limit the scope of the present invention, and all modifications of equivalent structures and equivalent processes performed by the present specification and drawings, or directly or indirectly applied to other related technical fields, are included in the scope of the present invention.

Claims (6)

1. A mobile terminal page interaction implementation method is characterized by comprising the following steps:
the mobile terminal browser downloads a page from a PC terminal and intercepts a JavaScript api:// __ init _ bridge __ link, initializes a global variable system to interact JavaScript under WebView, sets a value of a page interaction function JavaScript _ isalReady to true, actively triggers a page interaction JavaScript Ready event, and informs web JavaScript that page interaction JavaScript is initialized;
injecting a predefined JavaScript and JavaScript interactive statement; the mobile terminal receives a JavaScript interactive statement, wherein the JavaScript interactive statement which is defined in advance is respectively defined according to a webpage function and an interactive mode to be realized and is used for communication between JavaScript and native, and the mobile terminal registers the statement and calls the statement by calling the JavaScript interactive statement; the pre-defined JavaScript interactive statements comprise JavaScript function registration statements registered for native calling and callback statements calling JavaScript bridge statements provided by native;
calling back page data of the PC end through JavaScript bridge by using pre-injected JavaScript and JavaScript interactive statements to load a page, and intercepting the JavaScript of the PC end; and
the JavaScript is loaded to respond to the operation of the user and run the JavaScript to realize the interaction of the corresponding webpage function; the webpage interaction JavaScript Ready statement is defined in the JavaScript, the webpage interaction JavaScript Ready statement is called, and a webpage interaction JavaScript global object in the window is used for interacting with the local code, so that the interaction of the webpage function is realized.
2. The mobile terminal page interaction realization method according to claim 1, wherein the page interaction JavaScript comprises a registration statement and a callback statement; the register statement is used for registering a JavaScript function called by native and receiving data and a callback function transmitted from the native, and the callback statement is used for calling a JavaScript bridge statement provided by the native to execute callback according to returned data.
3. The method for realizing mobile terminal page interaction according to claim 2, wherein the method for calling back the page data of the PC terminal by using the pre-injected JavaScript and JavaScript interactive statements to load the page and intercepting the JavaScript of the PC terminal specifically comprises:
after JavaScript is injected in advance to process and call back, a registered function name of native is notified, and the native calls a corresponding processing statement through the function name to transmit data and a call-back function;
calling a corresponding callback function through JavaScript bridge to process the returned data so as to load a page; and
and intercepting the JavaScript of the PC terminal.
4. A mobile terminal page interaction implementation apparatus is characterized in that the apparatus includes:
the initialization module is used for downloading a page from a PC end, intercepting a JavaScript api:// __ init _ bridge __ link, initializing a global variable system interaction JavaScript under WebView, setting a value of a page interaction function JavaScript _ isalReady to true, actively triggering a page interaction JavaScript Ready event, and informing web JavaScript that page interaction JavaScript is initialized; injecting a predefined JavaScript and JavaScript interactive statement; the method comprises the steps that pre-defined JavaScript interactive statements are respectively defined according to a webpage function to be realized and an interactive mode, are used for communication between JavaScript and native, and are used for registering statements and calling statements by calling the JavaScript interactive statements;
the calling module is used for calling back the page data of the PC end through the JavaScript bridge to load the page by utilizing the pre-injected JavaScript and JavaScript interactive statements, and intercepting the JavaScript of the PC end;
the interaction module is used for loading JavaScript to respond to the operation of a user and run the JavaScript to realize the interaction of the corresponding webpage function; the webpage interaction JavaScript Ready statement is defined in the JavaScript, the webpage interaction JavaScript Ready statement is called, and a webpage interaction JavaScript global object in the window is used for interacting with the local code, so that the interaction of the webpage function is realized.
5. The mobile end page interaction implementation device according to claim 4, wherein the system interaction JavaScript comprises a registration statement and a callback statement; the register statement is used for registering a JavaScript function for native calling and receiving data and a callback function transmitted from the native, and the callback statement is used for calling a JavaScript bridge statement provided by the native to execute callback according to returned data.
6. The apparatus for implementing mobile end page interaction according to claim 5, wherein the invoking module is further configured to: after JavaScript is injected in advance to process and call back, a registered function name of native is notified, and the native calls a corresponding processing statement through the function name to transmit data and a call-back function; and calling a corresponding callback function through JavaScript bridge to process the returned data so as to load the page.
CN201810257146.2A 2018-03-27 2018-03-27 Mobile terminal page interaction realization method and device Active CN108829398B (en)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201810257146.2A CN108829398B (en) 2018-03-27 2018-03-27 Mobile terminal page interaction realization method and device

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201810257146.2A CN108829398B (en) 2018-03-27 2018-03-27 Mobile terminal page interaction realization method and device

Publications (2)

Publication Number Publication Date
CN108829398A CN108829398A (en) 2018-11-16
CN108829398B true CN108829398B (en) 2022-06-17

Family

ID=64154239

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201810257146.2A Active CN108829398B (en) 2018-03-27 2018-03-27 Mobile terminal page interaction realization method and device

Country Status (1)

Country Link
CN (1) CN108829398B (en)

Families Citing this family (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN110275738A (en) * 2019-06-30 2019-09-24 浪潮卓数大数据产业发展有限公司 A kind of Android bidirectional interaction method based on JsBridge
CN110502708B (en) * 2019-08-27 2020-10-30 北京达佳互联信息技术有限公司 Method, device and storage medium for communication based on JSbridge
CN110543372B (en) * 2019-09-10 2023-03-28 北京百度网讯科技有限公司 Method and device for interaction between native terminal and H5 terminal of mobile terminal
CN113050921A (en) * 2019-12-26 2021-06-29 中国移动通信集团江西有限公司 Webpage conversion method, device, storage medium and computer equipment
CN111831280A (en) * 2020-05-29 2020-10-27 大数金科网络技术有限公司 Mixed development method based on global singleton WebView container

Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20150052219A1 (en) * 2011-12-28 2015-02-19 Robert Staudinger Method and apparatus for streaming metadata between devices using javascript and html5
CN105138542A (en) * 2015-07-09 2015-12-09 北京天河石科技有限责任公司 Method for converting PC terminal WEB webpage into mobile terminal WEB webpage
CN105528369A (en) * 2014-09-30 2016-04-27 优视科技有限公司 Webpage transcoding method and device and server
CN106503111A (en) * 2016-10-18 2017-03-15 广州市动景计算机科技有限公司 Webpage code-transferring method, device and client terminal

Patent Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20150052219A1 (en) * 2011-12-28 2015-02-19 Robert Staudinger Method and apparatus for streaming metadata between devices using javascript and html5
CN105528369A (en) * 2014-09-30 2016-04-27 优视科技有限公司 Webpage transcoding method and device and server
CN105138542A (en) * 2015-07-09 2015-12-09 北京天河石科技有限责任公司 Method for converting PC terminal WEB webpage into mobile terminal WEB webpage
CN106503111A (en) * 2016-10-18 2017-03-15 广州市动景计算机科技有限公司 Webpage code-transferring method, device and client terminal

Non-Patent Citations (1)

* Cited by examiner, † Cited by third party
Title
WebViewJavascriptBridge机制解析;木夜溯;《https://www.jianshu.com/p/8bd6aeb719ff》;20151230;第1-10页 *

Also Published As

Publication number Publication date
CN108829398A (en) 2018-11-16

Similar Documents

Publication Publication Date Title
CN108829398B (en) Mobile terminal page interaction realization method and device
CN107368487B (en) Dynamic layout method, device and client for page components
US10726195B2 (en) Filtered stylesheets
US8527862B2 (en) Methods for making ajax web applications bookmarkable and crawlable and devices thereof
US20150095760A1 (en) Method and Device for Providing Webpage Browsing Based on Webkit Kernel
CN107943997B (en) Remote website evidence obtaining method based on Google browser, terminal device and storage medium
CN106874519B (en) Page display method and device
EP2948846A1 (en) Resource calling for hybrid applications
CN106790276B (en) Cross-browser data interaction method and device based on browser protocol
US20160179767A1 (en) Architecture for an application with integrated dynamic content
US11455365B2 (en) Data processing method and apparatus
CN109240697B (en) Call processing method and device and storage medium
CN111198998B (en) Method, device and system for loading network page based on Ajax request
US10594764B2 (en) Request cache to improve web applications performance
CN109299331B (en) Method and device for displaying hypertext markup language HTML5 page by Air
CN111079048B (en) Page loading method and device
CN113094612A (en) Method and device for loading webpage at client, electronic equipment and medium
CN109725887B (en) Data interaction method and device based on message research and development framework and terminal equipment
CN114385124A (en) Independent page jumping method, device and equipment based on Vue framework
CN112764746B (en) Data processing method, device, electronic equipment and storage medium
CN113315829A (en) Client offline H5 page loading method and device, computer equipment and medium
US9916391B2 (en) Method, apparatus and terminal for webpage content browsing
CN112818267A (en) Data processing method and device, computer readable storage medium and electronic equipment
CN113297522A (en) Page rendering method and device, electronic equipment and readable storage medium
CN107832040B (en) Method and device for determining payment mode by script acquisition terminal type and storage medium

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
GR01 Patent grant
GR01 Patent grant