CN112559924B - Universal adaptation method for mobile terminal webpage folding screen - Google Patents
Universal adaptation method for mobile terminal webpage folding screen Download PDFInfo
- Publication number
- CN112559924B CN112559924B CN202011523469.5A CN202011523469A CN112559924B CN 112559924 B CN112559924 B CN 112559924B CN 202011523469 A CN202011523469 A CN 202011523469A CN 112559924 B CN112559924 B CN 112559924B
- Authority
- CN
- China
- Prior art keywords
- screen
- main body
- body module
- page
- navigation main
- 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
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
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Databases & Information Systems (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Software Systems (AREA)
- Data Mining & Analysis (AREA)
- Human Computer Interaction (AREA)
- Signal Processing (AREA)
- Radar, Positioning & Navigation (AREA)
- Remote Sensing (AREA)
- Information Transfer Between Computers (AREA)
- User Interface Of Digital Computer (AREA)
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 navigation main body module; s2, the navigation main body 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; and if so, the right screen updates the page according to the URL transmitted by the navigation main body 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 navigation main body module;
s2, the navigation main body 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 body module;
if not, the right screen creates a page according to the URL transmitted by the navigation main body module;
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 body 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 message to the navigation main body module through parent-child communication between 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 screen is the last window forever;
at any time, the page of the right screen is replaced by a new page opened from the left screen; opening a new page from the right screen, moving the original right screen page to the left, and opening the new page on the right screen;
at any time, the Back is triggered from the left screen, and all application pages in the left screen and the right screen exit;
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 navigation main body module; in a parallel view universal navigation mode, the method divides a front-end page into three modules, namely a page navigation main body module, a left screen module and a right screen module, wherein the left screen and the right screen are realized by iframe;
s2, the navigation main body 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 body module;
and if not, the right screen creates a page according to the URL transmitted by the navigation main body module.
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 body 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;
when the left screen module iframe and the right screen module iframe receive the message of the navigation main body module, jumping 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 navigation main body module;
s2, the navigation main body 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 body module;
if not, the right screen creates a page according to the URL transmitted by the navigation main body module;
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 body 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 message to the navigation main body module through parent-child communication between 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 CN112559924A (en) | 2021-03-26 |
CN112559924B true 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 (11)
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 |
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 |
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 |
CN111124225A (en) * | 2019-12-16 | 2020-05-08 | 维沃移动通信有限公司 | Display control method and electronic equipment |
CN111124561A (en) * | 2019-11-08 | 2020-05-08 | 华为技术有限公司 | Display method applied to electronic equipment with folding screen and electronic equipment |
CN111190681A (en) * | 2019-12-31 | 2020-05-22 | 华为技术有限公司 | Display interface adaptation method, display interface adaptation design method and electronic equipment |
Family Cites Families (4)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN108509174B (en) * | 2018-06-21 | 2021-04-16 | 泰华智慧产业集团股份有限公司 | Method and system for cross-screen full-screen display of webpage based on IE kernel |
CN111339455B (en) * | 2018-12-18 | 2024-02-23 | 阿里巴巴集团控股有限公司 | Method and device for loading page first screen by browser application |
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 |
-
2020
- 2020-12-22 CN CN202011523469.5A patent/CN112559924B/en active Active
Patent Citations (11)
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 |
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 |
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 |
---|
"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/》;20191213;第1-42页 * |
"华为发布折叠屏官方适配方案";华为开发者联盟;《https://www.infoq.cn/article/mPwQk57bK5fg_FTcXa2i》;20190318;第1-27页 * |
"移动端Web页面适配方案(整理版)";jluemmmm;《https://www.jianshu.com/p/2c33921d5a68》;20190811;第1-25页 * |
Also Published As
Publication number | Publication date |
---|---|
CN112559924A (en) | 2021-03-26 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
CN113157906B (en) | Recommendation information display method, device, equipment and storage medium | |
CN107992301B (en) | User interface implementation method, client and storage medium | |
US8448074B2 (en) | Method and apparatus for providing portioned web pages in a graphical user interface | |
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 | |
CN109508128B (en) | Search control display method, device and equipment and computer readable storage medium | |
US20190155488A1 (en) | Buddy list presentation control method and system, and computer storage medium | |
CN102479033B (en) | Chart browsing method, device and system | |
CN110399583B (en) | Page display method and device, electronic equipment and storage medium | |
KR20150072819A (en) | Method and apparatus for displaying digital contents in electronic device | |
CN111813308B (en) | Interface processing method and device, electronic equipment and storage medium | |
CN108989869B (en) | Video picture playing method, device, equipment 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 | |
CN114579228B (en) | Message display method and terminal equipment | |
CN102314468A (en) | Synchronous browse method | |
CN103543919B (en) | A kind of webpage content display changing method and device | |
CN114895815A (en) | Data processing method and electronic equipment | |
CN103699302B (en) | Method and terminal that message is hidden and shown at random | |
KR20130073016A (en) | Method for controlling webpage | |
CN114329278B (en) | Processing method and device of search result page, electronic equipment 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 |