CN112559924A - Universal adaptation method for mobile terminal webpage folding screen - Google Patents
Universal adaptation method for mobile terminal webpage folding screen Download PDFInfo
- Publication number
- CN112559924A CN112559924A CN202011523469.5A CN202011523469A CN112559924A CN 112559924 A CN112559924 A CN 112559924A CN 202011523469 A CN202011523469 A CN 202011523469A CN 112559924 A CN112559924 A CN 112559924A
- Authority
- CN
- China
- Prior art keywords
- screen
- module
- page
- navigation
- main body
- 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.)
- Granted
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/957—Browsing optimisation, e.g. caching or content distillation
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/954—Navigation, e.g. using categorised browsing
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/955—Retrieval from the web using information identifiers, e.g. uniform resource locators [URL]
- G06F16/9566—URL specific, e.g. using aliases, detecting broken or misspelled links
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
- G06F3/04842—Selection of displayed objects or displayed text elements
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/451—Execution arrangements for user interfaces
-
- H—ELECTRICITY
- H04—ELECTRIC COMMUNICATION TECHNIQUE
- H04M—TELEPHONIC COMMUNICATION
- H04M1/00—Substation equipment, e.g. for use by subscribers
- H04M1/02—Constructional features of telephone sets
- H04M1/0202—Portable telephone sets, e.g. cordless phones, mobile phones or bar type handsets
- H04M1/026—Details of the structure or mounting of specific components
- H04M1/0266—Details of the structure or mounting of specific components for a display module assembly
- H04M1/0268—Details of the structure or mounting of specific components for a display module assembly including a flexible display panel
Abstract
A mobile terminal webpage folding screen general adaptation method comprises the following specific steps; s1, acquiring the current user click state, and transmitting the target page path needing to be jumped and the current screen click information to the main module; s2, the main module judges the received states among different screen modules; if the receiving state is from clicking the left screen, executing S4; s4, the navigation main body module judges whether the received information is a click return button event; if not, go to S6; s6, judging whether the right screen has an unloaded page or not; if yes, the right screen updates the page according to the URL transmitted by the navigation main module.
Description
Technical Field
The invention relates to the technical field of webpage design, in particular to a universal adaptation method for a mobile terminal webpage folding screen.
Background
In recent years, the increase of the screen size of the mobile intelligent terminal has become an important characteristic of the iterative evolution of products; with the continuous increase of the screen size, how to simultaneously ensure smooth large-screen experience and good portability becomes a prominent problem influencing the user experience; the appearance of the folding screen product form effectively solves the problems; through large-size display of the screen in the unfolded state, a more exquisite and shocking video/picture effect can be brought, and richer personalized human-computer interaction experience is brought to the whole industry;
because the length-width ratio of the folded screen product is greatly different from that of the common product, and various screen sizes may appear in the process from unfolding to folding, it is difficult to have a good method for realizing the adaptation of the web page.
Disclosure of Invention
Objects of the invention
The invention provides a general adaptation method for a folding screen of a mobile webpage, which aims to solve the technical problems in the background art and is used for realizing the general adaptation method for the folding screen of the mobile webpage based on a parallel view general navigation mode.
(II) technical scheme
In order to solve the problems, the invention provides a universal adaptation method for a mobile terminal webpage folding screen, which comprises the following specific steps;
s1, acquiring the current user click state, and transmitting the target page path needing to be jumped and the current screen click information to the main module;
s2, the main module judges the received states among different screen modules;
if the received status is from clicking the navigation body module, executing S3;
if the reception state is from clicking the left screen, S4 is performed;
if the reception state is from when the right screen is clicked, S7 is executed;
s3, the navigation main body module transmits the state and the URL of the page to be jumped to the left screen module; the left screen module receives information to update a rendering page;
s4, the navigation main body module judges whether the received information is a click return button event;
if so, then the process proceeds to S5,
if not, go to S6;
s5, unloading the left and right screen pages and displaying the navigation main body module page;
s6, judging whether the right screen has an unloaded page or not;
if yes, the right screen updates the page according to the URL transmitted by the navigation main module;
and if not, the right split screen navigation main module transfers the URL to create a page.
And S7, the left screen module updates the page according to the current URL of the right screen, and the right screen module updates the page according to the URL transmitted by the navigation main module.
Preferably, a document object to which the iframe belongs is obtained, then an event is registered for the document object, a response mouse click event is monitored, and the address and related information of a target page are recorded; and transmitting the acquired event messages and the like to the navigation main body module through parent-child communication among iframes.
Preferably, when the split screen mode is not unfolded, the navigation main body module is displayed on the whole screen, and the navigation main body module positions the navigation part to any position of the screen through the position attribute of the CSS; and judging the source of the event through the source field of the attribute, simultaneously determining a communication module, and transmitting the related attribute to the communication module.
The technical scheme of the invention has the following beneficial technical effects:
in the invention, the right split screen is always the last window;
at any time, the page of the right split screen is replaced by the new page opened from the left split screen; opening a new page from the right split screen, moving the original right split screen page to the left, and opening the new page on the right split screen;
at any time, triggering Back from the left split screen, and exiting all application pages in the left split screen and the right split screen;
the invention has wider application range and lower workload of research, development and maintenance.
Drawings
Fig. 1 is a flowchart of a general adapting method for a mobile-end web page folding screen according to the present invention.
Detailed Description
In order to make the objects, technical solutions and advantages of the present invention more apparent, the present invention will be described in further detail with reference to the accompanying drawings in conjunction with the following detailed description. It should be understood that the description is intended to be exemplary only, and is not intended to limit the scope of the present invention. Moreover, in the following description, descriptions of well-known structures and techniques are omitted so as to not unnecessarily obscure the concepts of the present invention.
As shown in fig. 1-1, the general adapting method for a mobile terminal web page folding screen provided by the present invention includes the following specific steps;
s1, acquiring the current user click state, and transmitting the target page path needing to be jumped and the current screen click information to the main module; in a parallel view universal navigation mode, the method divides a front end page into three modules, namely a page navigation main module, a left screen module and a right screen module, wherein the left screen and the right screen are realized by iframe;
s2, the main module judges the received states among different screen modules;
if the received status is from clicking the navigation body module, executing S3;
if the reception state is from clicking the left screen, S4 is performed;
if the reception state is from when the right screen is clicked, S7 is executed;
s3, the navigation main body module transmits the state and the URL of the page to be jumped to the left screen module; the left screen module receives information to update a rendering page;
s4, the navigation main body module judges whether the received information is a click return button event;
if so, then the process proceeds to S5,
if not, go to S6;
s5, unloading the left and right screen pages and displaying the navigation main body module page;
s6, judging whether the right screen has an unloaded page or not;
if yes, the right screen updates the page according to the URL transmitted by the navigation main module;
and if not, the right split screen navigation main module transfers the URL to create a page.
And S7, the left screen module updates the page according to the current URL of the right screen, and the right screen module updates the page according to the URL transmitted by the navigation main module.
In an optional embodiment, a document object to which an iframe belongs is obtained, then an event is registered for the document object, a response mouse click event is monitored, and the address and related information of a target page are recorded; and transmitting the acquired event messages and the like to the navigation main body module through parent-child communication among iframes.
In an optional embodiment, when the split-screen mode is not unfolded, the whole screen displays the navigation main body module, and the navigation main body module positions the navigation part to any position of the screen through the position attribute of the CSS; and judging the source of the event through the source field of the attribute, simultaneously determining a communication module, and transmitting the related attribute to the communication module.
In the invention, the specific step 1: because a relatively independent document object is loaded in the iframes of the left and right screens relative to the navigation main body module, firstly, the document object to which the iframes belong needs to be obtained, then, an event is registered for the document object, a response mouse click event is monitored, and the address and related information of a target page are recorded;
acquiring a screen expansion angle and a screen expansion state through a javascript screen method, and transmitting acquired event messages and the like to a navigation main body module through parent-child communication between iframes;
in a specific step 2, when the split-screen mode is not unfolded, the whole screen displays a navigation main body module, and the navigation main body module can also position the navigation part to any position of the screen through the position attribute of the CSS (for example, the navigation main body module can position the navigation part to the position below the left screen to achieve the effect similar to WeChat chat pages);
judging an event source through a source field of the attribute, simultaneously determining a communication module, and transmitting the related attribute to the communication module;
the specific left and right screen unloading scheme is that when the left and right screen modules iframe receives the message of the main module, the left and right screen modules jump to a target page through window.
Specific left and right screen creation schemes:
and creating and displaying the left screen and the right screen by creating the corresponding iframe.
It is to be understood that the above-described embodiments of the present invention are merely illustrative of or explaining the principles of the invention and are not to be construed as limiting the invention. Therefore, any modification, equivalent replacement, improvement and the like made without departing from the spirit and scope of the present invention should be included in the protection scope of the present invention. Further, it is intended that the appended claims cover all such variations and modifications as fall within the scope and boundaries of the appended claims or the equivalents of such scope and boundaries.
Claims (3)
1. A mobile terminal web page folding screen general adaptation method is characterized by comprising the following specific steps;
s1, acquiring the current user click state, and transmitting the target page path needing to be jumped and the current screen click information to the main module;
s2, the main module judges the received states among different screen modules;
if the received status is from clicking the navigation body module, executing S3;
if the reception state is from clicking the left screen, S4 is performed;
if the reception state is from when the right screen is clicked, S7 is executed;
s3, the navigation main body module transmits the state and the URL of the page to be jumped to the left screen module; the left screen module receives information to update a rendering page;
s4, the navigation main body module judges whether the received information is a click return button event;
if so, then the process proceeds to S5,
if not, go to S6;
s5, unloading the left and right screen pages and displaying the navigation main body module page;
s6, judging whether the right screen has an unloaded page or not;
if yes, the right screen updates the page according to the URL transmitted by the navigation main module;
and if not, the right split screen navigation main module transfers the URL to create a page.
And S7, the left screen module updates the page according to the current URL of the right screen, and the right screen module updates the page according to the URL transmitted by the navigation main module.
2. The universal adaptation method for the mobile terminal webpage folding screen, according to claim 1, is characterized in that a document object to which an iframe belongs is obtained, then an event is registered for the document object, a response mouse click event is monitored, and an address and related information of a target page are recorded; and transmitting the acquired event messages and the like to the navigation main body module through parent-child communication among iframes.
3. The universal adapting method for the mobile terminal web page folding screen according to claim 1, wherein when the split screen mode is not unfolded, the whole screen displays the navigation main body module, and the navigation main body module positions the navigation part to any position of the screen through the position attribute of the CSS; and judging the source of the event through the source field of the attribute, simultaneously determining a communication module, and transmitting the related attribute to the communication module.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202011523469.5A CN112559924B (en) | 2020-12-22 | 2020-12-22 | Universal adaptation method for mobile terminal webpage folding screen |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202011523469.5A CN112559924B (en) | 2020-12-22 | 2020-12-22 | Universal adaptation method for mobile terminal webpage folding screen |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN112559924A true CN112559924A (en) | 2021-03-26 |
| CN112559924B CN112559924B (en) | 2021-09-17 |
Family
ID=75031148
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202011523469.5A Active CN112559924B (en) | 2020-12-22 | 2020-12-22 | Universal adaptation method for mobile terminal webpage folding screen |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN112559924B (en) |
Citations (15)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| JP2009137301A (en) * | 2007-11-14 | 2009-06-25 | Jun Taiko | Page turning device |
| CN108509174A (en) * | 2018-06-21 | 2018-09-07 | 泰华智慧产业集团股份有限公司 | A kind of method and system based on across the screen full screen display webpage of IE kernels |
| CN108717366A (en) * | 2018-03-30 | 2018-10-30 | 斑马网络技术有限公司 | The display page adaptation system and its adaptation method of vehicle-carrying display screen |
| CN108965608A (en) * | 2018-08-28 | 2018-12-07 | 维沃移动通信有限公司 | A kind of alarm clock setting method folds terminal and computer readable storage medium |
| CN109614061A (en) * | 2018-11-27 | 2019-04-12 | 维沃移动通信有限公司 | Display methods and terminal |
| CN109918072A (en) * | 2019-03-21 | 2019-06-21 | 烽火通信科技股份有限公司 | The method and system of split screen preview page |
| CN110032318A (en) * | 2019-04-15 | 2019-07-19 | 珠海格力电器股份有限公司 | Display methods, system and Folding screen mobile terminal based on Folding screen mobile terminal |
| CN110069228A (en) * | 2019-04-15 | 2019-07-30 | 珠海格力电器股份有限公司 | A kind of Folding screen display methods and device |
| CN110324464A (en) * | 2019-05-17 | 2019-10-11 | 华为技术有限公司 | A kind of application display method and electronic equipment |
| CN110489045A (en) * | 2019-07-18 | 2019-11-22 | 维沃移动通信有限公司 | A kind of object displaying method and terminal device |
| CN110737375A (en) * | 2019-09-29 | 2020-01-31 | 维沃移动通信有限公司 | display methods and terminals |
| CN111124561A (en) * | 2019-11-08 | 2020-05-08 | 华为技术有限公司 | Display method applied to electronic equipment with folding screen and electronic equipment |
| CN111124225A (en) * | 2019-12-16 | 2020-05-08 | 维沃移动通信有限公司 | Display control method and electronic equipment |
| CN111190681A (en) * | 2019-12-31 | 2020-05-22 | 华为技术有限公司 | Display interface adaptation method, display interface adaptation design method and electronic equipment |
| US20200195705A1 (en) * | 2018-12-18 | 2020-06-18 | Alibaba Group Holding Limited | Method and apparatus for browser application to load first screen of web page |
-
2020
- 2020-12-22 CN CN202011523469.5A patent/CN112559924B/en active Active
Patent Citations (15)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| JP2009137301A (en) * | 2007-11-14 | 2009-06-25 | Jun Taiko | Page turning device |
| CN108717366A (en) * | 2018-03-30 | 2018-10-30 | 斑马网络技术有限公司 | The display page adaptation system and its adaptation method of vehicle-carrying display screen |
| CN108509174A (en) * | 2018-06-21 | 2018-09-07 | 泰华智慧产业集团股份有限公司 | A kind of method and system based on across the screen full screen display webpage of IE kernels |
| CN108965608A (en) * | 2018-08-28 | 2018-12-07 | 维沃移动通信有限公司 | A kind of alarm clock setting method folds terminal and computer readable storage medium |
| CN109614061A (en) * | 2018-11-27 | 2019-04-12 | 维沃移动通信有限公司 | Display methods and terminal |
| US20200195705A1 (en) * | 2018-12-18 | 2020-06-18 | Alibaba Group Holding Limited | Method and apparatus for browser application to load first screen of web page |
| CN109918072A (en) * | 2019-03-21 | 2019-06-21 | 烽火通信科技股份有限公司 | The method and system of split screen preview page |
| CN110032318A (en) * | 2019-04-15 | 2019-07-19 | 珠海格力电器股份有限公司 | Display methods, system and Folding screen mobile terminal based on Folding screen mobile terminal |
| CN110069228A (en) * | 2019-04-15 | 2019-07-30 | 珠海格力电器股份有限公司 | A kind of Folding screen display methods and device |
| CN110324464A (en) * | 2019-05-17 | 2019-10-11 | 华为技术有限公司 | A kind of application display method and electronic equipment |
| CN110489045A (en) * | 2019-07-18 | 2019-11-22 | 维沃移动通信有限公司 | A kind of object displaying method and terminal device |
| CN110737375A (en) * | 2019-09-29 | 2020-01-31 | 维沃移动通信有限公司 | display methods and terminals |
| CN111124561A (en) * | 2019-11-08 | 2020-05-08 | 华为技术有限公司 | Display method applied to electronic equipment with folding screen and electronic equipment |
| CN111124225A (en) * | 2019-12-16 | 2020-05-08 | 维沃移动通信有限公司 | Display control method and electronic equipment |
| CN111190681A (en) * | 2019-12-31 | 2020-05-22 | 华为技术有限公司 | Display interface adaptation method, display interface adaptation design method and electronic equipment |
Non-Patent Citations (3)
| Title |
|---|
| JLUEMMMM: ""移动端Web页面适配方案（整理版）"", 《HTTPS://WWW.JIANSHU.COM/P/2C33921D5A68》 * |
| 匿名: ""Talk about the changes of Android folding screen to interactive design and development"", 《HTTPS://DEVELOPPAPER.COM/TALK-ABOUT-THE-CHANGES-OF-ANDROID-FOLDING-SCREEN-TO-INTERACTIVE-DESIGN-AND-DEVELOPMENT/》 * |
| 华为开发者联盟: ""华为发布折叠屏官方适配方案"", 《HTTPS://WWW.INFOQ.CN/ARTICLE/MPWQK57BK5FG_FTCXA2I》 * |
Also Published As
| Publication number | Publication date |
|---|---|
| CN112559924B (en) | 2021-09-17 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN113157906B (en) | Recommendation information display method, device, equipment and storage medium | |
| JP5430743B2 (en) | Method and apparatus for providing a scraped web page within a graphical user interface | |
| CN106933587B (en) | Layer drawing control method and device and mobile terminal | |
| CN107992301B (en) | User interface implementation method, client and storage medium | |
| WO2019174469A1 (en) | Message notification method, apparatus, device and storage medium | |
| US9672539B2 (en) | Advertisement generation apparatus and terminal device | |
| US20140143071A1 (en) | Method and apparatus for providing online advertisement | |
| US10775979B2 (en) | Buddy list presentation control method and system, and computer storage medium | |
| CN102479033B (en) | Chart browsing method, device and system | |
| CN109508128B (en) | Search control display method, device and equipment and computer readable storage medium | |
| KR20140114645A (en) | Method for displaying preview screen of hyperlinks | |
| CN110399583B (en) | Page display method and device, electronic equipment and storage medium | |
| KR20150072819A (en) | Method and apparatus for displaying digital contents in electronic device | |
| CN107911536B (en) | Cross-application access method, device and computer readable storage medium | |
| CN104423839A (en) | Browser resource display method and device | |
| CN112835485A (en) | Application interface processing method and device, electronic equipment and readable storage medium | |
| CN113325978B (en) | Message display method and device and electronic equipment | |
| CN113886110A (en) | Method for embedding plug-in window of plug-in video into browser | |
| CN112559924B (en) | Universal adaptation method for mobile terminal webpage folding screen | |
| CN103543919B (en) | A kind of webpage content display changing method and device | |
| CA2867055A1 (en) | Method and system for advertising using a mobile communication device | |
| CN102314468A (en) | Synchronous browse method | |
| CN114579228B (en) | Message display method and terminal equipment | |
| CN104679767A (en) | System and method for displaying picture in webpage according to visible region | |
| CN103699302B (en) | Method and terminal that message is hidden and shown at random |
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 |