CN111695076A

CN111695076A - Cross-browser webpage compatibility standard construction method based on hypertext 5

Info

Publication number: CN111695076A
Application number: CN202010544474.8A
Authority: CN
Inventors: 刘秀萍; 王程
Original assignee: Jingmen Huiyijia Information Technology Co ltd
Current assignee: Jingmen Huiyijia Information Technology Co ltd
Priority date: 2020-06-15
Filing date: 2020-06-15
Publication date: 2020-09-22

Abstract

According to the hypertext 5-based cross-browser webpage compatibility standard construction method provided by the invention, through formulating the cross-browser webpage compatibility adaptive standardization from nine aspects, the hypertext 5 unified standard is used for keeping the style of hypertext 5 codes consistent, so that the hypertext 5 codes are easy to understand, modify, maintain and upgrade, the expression difference of the hypertext 5 webpage under different browsers is reduced, the normal use of the same application on all platforms is realized, the workload of developers is reduced, the fragmentation problem of the hypertext 5 supporting cross-platform application is solved, and the functions are added by developers and the later-stage optimized maintenance are facilitated. The cross-browser and cross-platform compatibility is achieved through the cross-browser webpage compatibility self-adaptive standardization, the cross-browser and cross-platform compatibility can be well followed after reconstruction, the codes are more robust, the maintenance and the expansion are easy, and the method has stronger practicability and popularization value for solving the problem of hypertext 5 webpage compatibility existing in a large quantity.

Description

Cross-browser webpage compatibility standard construction method based on hypertext 5

Technical Field

The invention relates to a method for constructing a cross-browser webpage compatibility standard, in particular to a method for constructing a cross-browser webpage compatibility standard based on hypertext 5, and belongs to the technical field of webpage compatibility standards.

Background

The advent of the hypertext 5 era pushed Web technology to the peak, and the internet went deep into the lives of every modern. Networked services are an indispensable part of daily life and work as an increasingly popular service model. More enterprises or organizations are also aware of the powerful capabilities of the network, enabling business activities with customers around the world on the Web, etc. The browser is a window for people to obtain network services, and the compatibility of web pages is the problem which is encountered first, is easy to encounter and is urgently needed to be solved by adopters. For enterprises and related organizations, if pages can only be normally displayed in a specific browser, the pages cannot meet the requirements of different users, and as a result, the self-competitiveness of the enterprises or organizations is inevitably weakened, and the situation is difficult to open on an open international route. Currently, hypertext 5 has become an important standard for large internet enterprises. The hypertext 5 can not only express the webpage content, but also has good cross-platform performance, and can bring the Web technology into a very wide ecological platform. The hypertext 5 is a new version Web standard of the Internet publicly released by the world Wide Web alliance, the pages are richer by adopting the hypertext 5 standard, more functions can be realized, and a developer only needs to write the same page and then the adaptation work can be finished by a browser. The hypertext 5 element system is rich, and can replace a complex plug-in, thereby greatly reducing the Web technology development cost. Meanwhile, the hypertext 5 is open, and cannot be monopolized by any organization or enterprise, so that the benign development of the whole Internet industry is promoted. With the cross-platform nature of hypertext 5, the cell phone browser can become platform through the traffic portal. The hypertext 5 is designed for the first purpose of declaring the type of a document to be simple and excellent, the second purpose of code semantization, the third purpose of local storage and offline cache, the fourth purpose of simply realizing multimedia application, the fifth purpose of acquiring updates from a server in a webpage self-adaptive mode, and the sixth purpose of better entering form data.

On the whole, the global mainstream internet companies have advanced the hypertext 5 technology, explore the hypertext 5 for the global mainstream internet companies through different modes, and continuously iterate in the advancing, verifying, compatible, correcting and re-advancing processes. However, current hypertext 5 technologies still behave very differently under different browsers. The hypertext 5 is a hypertext markup language of a new version, the hypertext 5 is greatly modified based on the hypertext 4, some elements, attributes and behaviors are added and improved, and meanwhile, a series of technologies with stronger functions are added to enable the Web site and the application to be more diversified. The hypertext invention has gradually become an industry standard to date.

While many of the features of the hypertext 5 standard are of revolutionary nature, it does not mean that a website created using hypertext 4 must be recreated, hypertext 5 is evolved rather than revolutionary, and its core idea is to maintain a smooth transition of all new features, backwards compatible. The hypertext 5 establishes rules, for example, new features should be based on CSS, HTML, document objects, and JavaScript, reduce dependence on external plug-ins, handle errors more efficiently, express elements of scripts more abundantly, the hypertext 5 should not be limited to devices or platforms, and the development process should be transparent and open.

But the hypertext 5 technology is more and more favored, and the problem of cross-browser fragmentation is more obvious, so that development and users are seriously troubled. Fragmentation is the fact that many versions of an operating system or browser are different from each other, so that a web page cannot be normally applied under different platforms or browsers. Currently, hypertext 5 web pages are very different in performance under different browsers, and the browser industry also lacks necessary unified extension standards. Since the most significant advantage of hypertext 5 is that it can be used normally by the same application on all platforms, reducing the workload of developers, the fragmentation problem is a very big obstacle to supporting hypertext 5 for cross-platform applications.

Over the years of development, hypertext 5 has implemented more and more functions. However, the related developers such as browsers and operating systems in the prior art are not uniform for the presentation of hypertext 5 web pages. If the ideal state of the W3C program is reached, the hypertext 5 becomes a standard which is followed by the Internet industry, so that different user groups can experience the hypertext 5 standard, and the problem of compatibility of a hypertext 5 page cross-browser is very important. The problem of hypertext 5 cross-browser fragmentation is solved, and the hypertext 5 prospect is very wide. However, despite the great advantages of hypertext 5 in application development and platform, the value of hypertext 5 still remains to be verified for users on mobile platforms, the user experience is not very mature, and further development of hypertext 5 requires efforts from chip, various browsers, operating systems, and Web application developers.

The full functionality of the prior art hypertext 5 standard cannot be implemented under all browsers, and it takes a long time to achieve full support of hypertext 5. What is currently important is what standards and technologies can actually be employed on the user's browser. If hypertext 5 is fully supported by all current mainstream browsers and all users use upgraded browsers, the plug-in will be heavily stricken from hypertext 5 technology.

Although the hypertext 5 technology is continuously updated and improved, and the application is also in a certain scale, there are some major and practical obstacles in the specific implementation process. In addition to the above problems, the present invention is intended to solve the following problems, in part, in view of the disadvantages of the prior art:

firstly, compatibility, new characteristics of the hypertext 5 are many, but many devices and different browsers cannot well support all the new characteristics, and some common browsers do not support part of the new characteristics of the hypertext 5, so that the user experiences inconsistently under different browsers, the experiences under part of the browsers are very poor, and the development of the hypertext 5 is severely restricted. Solving this problem can greatly increase the workload of developers, requiring repeated testing.

Secondly, performance and security, the performance of hypertext 5 is significantly different from the original APP. The performance and speed of hypertext 5 on mobile platforms also increases. Hypertext 5 is a web page standard for displaying contents in an open environment, and the problem of poor protection of web page contents is brought about in terms of security, and particularly for companies developing hypertext 5 games, the situation that the games are copied without being on line for several days is often encountered.

Third, hypertext 5 lacks a uniform implementation standard. The most critical factor that the prior art hinders the rapid spread of hypertext 5 is the realization of standards that are too fragmented and lack of consistency. The result of the over-opening of the hypertext 5 is that the developer is in a painful type selection and that the correctness and the efficiency of the implementation cannot be ensured. Hypertext 5 is a distance from the standard to the technology to the application, and the process needs to be improved and refined.

The compatibility of the hypertext 5 technology directly determines the presentation effect of the webpage and directly influences the user experience, and the method has several new characteristics of the hypertext 5: the method comprises the steps of writing instance codes respectively in a video/audio element mode, a server push event mode, a high-level form mode and a client data storage mode, running in each browser, and obtaining a conclusion by combining three compatibility detection tools of HTML5Test, Canisu and IE NetRenderer. Under browsers with different kernels, the performance of hypertext 5 web pages is greatly different, the hypertext 5 technology is best in Chrome 49 performance, next, Opera 36 and Firefox 45 are adopted, and the stronger and stronger kernels enable Google and Firefox browsers to have stronger decoding capability and supporting capability, higher efficiency and lower system resource occupancy when browsing the web pages. Under the Chrome 49 browser, the new characteristics of the hypertext 5 can achieve the expected effect, and can be normally displayed and used. Under Opera 36 and Firefox 45, video files in MPEG4 format are not compatible. However, Microsoft is still at a lower level than browsers of other manufacturers, the hypertext 5 feature is not optimistic under the Microsoft series of browsers, IE8 is not supported by any of the other four features except for the Web Storage, and IE 9/10/11, Edge 13 and Safari 9 browsers also do not ideally support the hypertext 5 technology. As for the mobile side, the hypertext 5 web page also does not perform as expected in Chrome 49for Android and iOS Safari browsers of different kernels. A specific transformation scheme needs to be provided for the problem of hypertext 5 cross-browser incompatibility, cross-browser webpage compatibility self-adaptive standardization is achieved, the existing code incompatible part is reconstructed based on a document object model, compatibility problems existing in main new characteristics are transformed respectively, and the problem of hypertext 5-based cross-browser webpage compatibility standard is solved.

Disclosure of Invention

Aiming at the defects of the prior art, the method for constructing the hypertext 5-based cross-browser webpage compatibility standard provided by the invention has the advantages that the cross-browser webpage compatibility self-adaptive standardization is established from nine aspects, the hypertext 5 code style is kept consistent through the hypertext 5 unification standard, so that the hypertext 5 code is easy to understand, modify, maintain and upgrade, the expression difference of the hypertext 5 webpage under different browsers is reduced, the same application can be normally used on all platforms, the workload of developers is reduced, the fragmentation problem of the hypertext 5 supporting cross-platform application is solved, and the functions can be added by developers and the later-stage optimized maintenance are facilitated. The cross-browser and cross-platform compatibility is achieved through the cross-browser webpage compatibility self-adaptive standardization, the cross-browser and cross-platform compatibility can be well followed after reconstruction, the codes are more robust, the maintenance and the expansion are easy, and the method has stronger practicability and popularization value for solving the problem of hypertext 5 webpage compatibility existing in a large quantity.

In order to achieve the technical effects, the technical scheme adopted by the invention is as follows:

the method comprises the steps of constructing a cross-browser webpage compatibility standard based on hypertext 5, wherein the cross-browser webpage compatibility self-adaptive standardization and the hypertext 5 key new feature compatibility standardization are included, the cross-browser webpage compatibility self-adaptive standardization comprises a hypertext 5 unified standard and reconstruction based on a document object model standard, and the hypertext 5 key new feature compatibility standardization comprises Audio and Video elements, server sending events and advanced form element compatibility standardization;

hypertext 5 unification criteria includes nine aspects: firstly, introducing files in a standard mode, secondly, unifying naming rules, thirdly, adopting correct document types, fourthly, not omitting tags of < html >, < head > and < body >, fifthly, correctly setting head contents, sixthly, closing all hypertext elements, seventhly, providing alternative schemes for pictures, eighthly, properly changing lines and indenting, and ninely, adopting quotation marks for attribute values;

the hypertext 5 coding standard keeps the unified style of hypertext 5 codes, and the hypertext 5 unified standard of the invention specifically comprises the following steps:

firstly, introducing files according to specifications, and filing hypertext, images, CSS and JS files into an agreement directory, omitting an external link resource URL protocol, reducing the number of bytes of the files, and adopting a relative path when the resources are linked to avoid excessive and deep interlayer levels of the files;

secondly, unified naming rules are adopted, the hypertext 5 adopts the unified naming rules, and capital or lowercase letters are adopted for file names, attribute names and element names;

thirdly, a correct document type is adopted, the hypertext invention document type must be clearly declared first, so that the Web browser avoids the browser entering a mixed mode by judging whether a document decision parser and a rendering type are switched to a corresponding hypertext 5 mode; DOTYPE declares <! DOTYPE html > or <! doctype html >, does not distinguish case from case;

fourth, the < html >, < head > and < body > tags are not omitted, the hypertext tags express the page language: the method comprises the following steps that (1) html lang ═ zh >, a hypertext declares lang attribute, natural language used in a page is definitely specified, screen readers and search engines are facilitated, an < html > tag or a < body > tag is omitted, the < body > tag can crash in document objects and XML software, fatal errors can occur under an old version browser when the < body > tag is omitted, content before the < body > tag is added to a default < head > tag by the browser, and a head element is not omitted;

fifthly, head content is correctly set, a < title > tag in the hypertext 5 is necessary and used for adding a title name and expressing a page theme, the title and language help a search engine to quickly and accurately understand the theme content of the webpage, the coding rule of a declared page is < meta charset ═ UTF-8 >, if the introduced JS script invented piece is different from the charset used by the hypertext invention file, an outsink file coding < script charset ═ UTF-8 ═ src ═ >, and an IE compatible mode is declared to be edge for the page, an external CSS style and a JS script invented piece are loaded by adopting simple grammar, and the type attributes of the script and the style sheet are omitted;

sixthly, all hypertext elements are closed, and each element of the method needs to be added with a closing label;

seventhly, a picture providing alternative scheme is adopted, an alt attribute is adopted when a picture is introduced, when the picture cannot be displayed, an alt attribute value is used for replacing the picture to be displayed, page search engine optimization is assisted, the size of the picture is set, a designated space is reserved during loading, and flicker is reduced;

eighthly, appropriate line feed and indentation are carried out, the code amount of each line is less than 80 characters, unnecessary empty lines are reduced in shorter codes, plain text does not need to be fed before the hypertext tag is finished, empty lines are added between each logic function block, nested contents are indented into one level by two or four blank spaces, a TAB key is not directly used, hypertext annotations, particularly TODO annotations, are appropriately added;

ninthly, attribute values adopt quotation marks, hypertext element attributes are stated according to the sequence of class, id or name, data-, src or href or type or for, title or alt, role or aria-, data-is element self-defined attributes, hypertext 5 attribute values adopt double quotation marks, id and class attribute values of the hypertext elements are defined names, and disabled/selected/closed attributes do not need to be set.

The method for constructing the cross-browser webpage compatibility standard based on the hypertext 5 further reconstructs incompatible codes based on the document object model standard without manually modifying the existing codes, the document object structure allows dynamic access and updating of document contents, structures and styles, and adaptively standardizes the existing codes which do not conform to the document object standard in a reconstruction mode to realize cross-browser compatibility;

various browsers control a document object through a script language, if codes are incompatible, a script is firstly analyzed, if incompatible codes are to be found in the analyzed script language, an incompatible list needs to be obtained, and when codes conforming to the standard of the document object are generated, a self-adaptive standardized reconstruction tool is adopted;

in the specific implementation process, JavaScript codes embedded in a page need to be analyzed, incompatible parts are found and corrected, and a language analyzer constructed for a specific JS script is implemented by adopting an open source syntax analyzer; the open source syntax analyzer receives syntax expression, forms a corresponding analyzer according to the given lexical rule, codes take the syntax of a language C + +, Java or C #, greatly accelerates self-writing of the analyzer, the open source syntax analyzer receives an LL (k) grammar, the standard for writing the LL (k) is that left recursion is not adopted, at most k characters are seen forward, if no corresponding production formula is found after compiling recursion reaches k times, namely, a sentence is identified and failed, when a webpage Document is input, a program database of a self-adaptive standardized reconstruction tool must analyze a Document object model from the webpage Document, the whole webpage content can be easily operated through a Document object obtained after analysis and a Document object application program interface, the open source hypertext analyzer NekoHTML analyzes the page into a Document object tree, NekoHTML scans a hypertext invention and corrects common errors in the process of writing the Document, supplementing missing parent elements, closing tags in a self-adaptive manner, developing NekoHTML by adopting an Xerces local interface, using the NekoHTML as a preprocessor, preprocessing an input page document to obtain a document object tree, using an open source syntax analyzer as a JavaScript analyzer to analyze JS codes, identifying and correcting incompatible codes by context data obtained in the analyzing process and a compatible comparison table, and well following the document object standard after reconstructing parts which are not compatible with a document object model;

for non-standard page parts, the self-adaptive standardized reconstruction tool is based on the document object standard, the reconstructed web page follows the document object model and the W3C standard, and the cross-browser compatibility is realized.

The invention provides four methods for standardizing the compatibility of Audio and Video elements of hypertext 5, which are based on a method for constructing a cross-browser webpage compatibility standard of hypertext 5, and further, adopt the functions of Audio and Video in the hypertext 5 in a webpage:

the method comprises the following steps: firstly, preparing video or audio files with various formats in advance; the key point of preparing the multi-format browser is the conversion format, the invention adopts a file Converter on Converter to convert a file from one format to another format, the on Converter supports a plurality of different source formats, including video and audio conversion and a Hash generator, the on Converter directly selects a target format without installing software, and then uploads the video or audio and configures parameters to realize format conversion;

step two, writing corresponding Audio or Video or code of hypertext 5, both containing Audio and Video related information respectively, and the code is similar,

step three, ensuring the support of the old browser, if the browser does not support, displaying the prompt content in the video or audio label, replacing the prompt content with the traditional flash of the old browser, and displaying the video of the flash version when the browser does not support the video or audio label;

and directly writing the Audio or Video label according to a normal flash introduction method before the hypertext 5, so that the cross-browser adoption of the Audio and Video elements is realized.

A hypertext 5-based cross-browser webpage compatibility standard construction method is further provided, and an Audio and Video element compatibility standardization method of the hypertext 5 comprises the following steps:

the method 2 comprises the following steps: by using hyperlinks, if a page has hyperlinks to media files, the browser will use the auxiliary application to play the files, the following code segments display links to the media files, and when the user clicks on the link, the browser will start the "auxiliary application" to play:

< ahref ═ intro.swf "> playavidin! - -playing video- - > - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Mp3"> Playthesound <! -playing audio-.

the method 3 comprises the following steps: introducing a JavaScript library html5media.js, adopting the introduced html5media.js and a plug-in html5media.js to be independent of any other JavaScript frame when the swf player is more excellent, switching the self-adaption to a Flowplayer when the used browser does not support the hypertext 5 after the adoption, watching the video and audio files of the hypertext 5 under all browsers through the plug-in, making up the defect that the low-version IE browser does not support the < video > and < audio > tags, and adding a script inside the < head > of the webpage by the method: and (2) script src ═// api. html5media.info/1.1.8/html5media.min.js ">/script, loading the JS script only under an old edition IE browser by adopting an IE condition annotation mode, and then respectively adding a video or audio by using video or audio:

<videosrc＝"video.mp4"width＝"320"height＝"240"controlspreload></video>

<audiosrc＝"audio.mp3"controlspreload></audio>

js can use Audio and Video tags under IE8, even the older IE6 browser.

The method for constructing the cross-browser webpage compatible standard based on the hypertext 5 is characterized in that a server sends an event compatible standard, a putty script technology is adopted, a provided JavaScript library is used for avoiding browser differences, a third party JS library is only required to be loaded into a webpage, and a client code of an application body is not required to be changed;

the method solves the problem that an XMLHttpRequest object under a Microsoft browser is incompatible, an XDR object needs to be introduced into an IE8, the XDR object provides an onprogress event, when the event is triggered, response content is obtained through a responseText attribute, after the XDR object is opened and connected with a server, when new data occurs in the server, the event onprogress in the XDR object is processed, the XDR object is strictly limited, and the limitation influences the realization of the XDR as the EventSource object, and the specific limitation and solution comprise the following steps:

the method comprises the steps that firstly, the request sent by the XDR object does not contain any information related to user authentication, including cookies, and if the server side needs to authenticate, the user authentication information is transmitted in other modes of HTTP request;

secondly, the server side response needs to contain an < Access-Control-all-Origin > head, states that the URL address allows the Access from which domains, and indicates that the URL address can be accessed from any domain, the invention adopts the same domain as the current application, and limits the Access only from the current domain;

thirdly, the XDR object sending request cannot comprise a self-defined HTTP header, the condition that an Event identifier received by a client at the Last time cannot be declared by adopting a 'Last-Event-ID' header is limited, and only other methods of HTTP requests are allowed to be adopted to transmit the identifier;

fourthly, the Content-Type of the XDR object request can only be 'text/plane', which indicates the POST request mode, a frame introduced by the server end cannot self-adaptively analyze the Content of the frame, the Content of the POST request cannot be acquired by adopting an HttpServletRequest-Type getParameter method, and the Content of the original request can only be analyzed at the server end to acquire the parameter value of the Content.

The method for constructing the cross-browser webpage compatibility standard based on the hypertext 5 further comprises a series of limitations of an XDR object, wherein a server side is correspondingly modified, and the limitations comprise the return of an Access-Control-low-Origin head, the processing of user authentication information in a request and the analysis of a text/plane type parameter sent by a browser;

the putty script library adopted by the invention is an open source project eventSource developed on GitHub, an eventSource. js file in the eventSource project is taken as a putty script, the putty script is downloaded and put into a folder where a webpage is located, the file is introduced into a head label, and related codes are compiled;

the page running result can continue to extend downwards along with time, and by adopting a putty script library, after the realization of a server side is correspondingly changed, the server pushing event of the hypertext 5 can be adopted under the IE8 and above and an Edge browser.

The invention relates to a method for constructing a cross-browser webpage compatible standard based on hypertext 5, and further solves the problems of url, password, number and email input by adopting high-level form element compatible standardization, and realizes cross-browser hypertext 5 form verification, wherein a form verification plug-in package is adopted in the invention, and the method specifically comprises the following steps:

the method comprises the steps that firstly, Chinese and English switching is supported, and a checkValidity.js plug-in also supports bilingual website switching in Chinese and English;

secondly, unifying UI, unifying an interface by the plug-in, simulating the effect of a Chrome browser, unifying the interface style and position display, customizing the interface style and position, providing an option of adopting default prompt characters of the browser for prompt information, and customizing the content if not adopting the default prompt characters;

thirdly, asynchronous verification is supported, and the function of supporting the asynchronous verification is strong;

and fourthly, the plug-in can support various types of verification rules, including mandatory items, formats or self-definition.

A hypertext 5-based cross-browser webpage compatibility standard construction method, further, the application of a checkvalidity.

Step 1, compiling html structure of form;

step 2, after the html structure is provided, initializing the plug-in:

and three parameters are introduced when the new From is executed, and are respectively a document object element of the form, configuration in a verification rule and a callback function after the verification is successful, wherein two attributes of errorMsgClass and errorInputClass of checkOpt are used as custom styles.

Compared with the prior art, the invention has the advantages and innovation points that:

according to the method for constructing the hypertext 5-based cross-browser webpage compatibility standard, provided by the invention, the cross-browser webpage compatibility self-adaptive standardization is formulated from nine aspects, the hypertext 5 code style is kept consistent through the hypertext 5 unification standard, so that the hypertext 5 code is easy to understand, modify, maintain and upgrade, the performance difference of the hypertext 5 webpage under different browsers is reduced, the browser industry uniformly expands the standard, the same application can be normally used on all platforms, the workload of developers is reduced, and the fragmentation problem of the hypertext 5 supporting cross-platform application is solved. The team cooperation efficiency is improved, and developers can add functions and perform later-period optimization maintenance conveniently. By adopting the cross-browser webpage compatibility self-adaptive standardization, the hypertext document is promoted to have a high quality standard, so that the website has a more excellent front-end architecture, and a good foundation is laid for the development of website webpages.

The invention also provides a cross-browser webpage compatible standard construction method based on the hypertext 5, the self-adaptive standardized reconstruction tool is based on the document object standard, the reconstructed webpage can follow the document object model and follow the W3C standard, the cross-browser compatibility is realized, the self-adaptive standardized reconstruction tool is very important to the webpage code standardized value, the self-adaptive reconstruction is carried out on the existing irregular application by means of lower cost, the cross-browser cross-platform compatibility is achieved, the document object standard can be well followed after the reconstruction is carried out, the code is more robust, the maintenance and the expansion are easy, and the method has stronger practicability and popularization value for solving the mass hypertext 5 webpage compatibility problems.

Thirdly, the method for constructing the hypertext 5-based cross-browser webpage compatibility standard constructs the hypertext 5-based cross-browser webpage compatibility standard, solves the problem of cross-browser webpage compatibility self-adaptive standardization, adopts the overall transformation scheme of constructing the hypertext 5 code unification standard, and reconstructs the existing incompatible codes based on the document object standard. The other key point of the invention is that the new feature of the hypertext 5 with compatibility problem is reformed, and for audio and video elements, several reforming standard methods are provided, including file format conversion, hyperlink adoption and JavaScript script library html5media.js adoption; for a server push technology of a server sending an event, a putty script library eventsource.js file is adopted for standard transformation, and related elements of a form newly added in a hypertext 5 are more, so that various standard transformation schemes are provided, including input form verification of a checkValidity.js file transformation url, password, email and number, transformed datalist elements of a jquery.datalist.js file and the like, and in addition, most forms can be transformed in compatibility by adopting the putty script. The method makes up for the compatibility deficiency in the prior art of the hypertext 5, and realizes the construction of the cross-browser webpage compatibility standard.

Fourthly, the invention provides a hypertext 5-based cross-browser webpage compatibility standard construction method, which aims at solving the problem that most of module performances of hypertext 5 in the prior art can be used under some mainstream browsers, but are still incompatible in many situations, which seriously hinders popularization and use of the hypertext 5 and greatly limits technical development of the hypertext 5, and aims at solving the problem of cross-browser webpage compatibility of the hypertext 5, wherein the key objective is to detect and analyze webpage compatibility of the hypertext 5, and perform compatibility transformation on commonly used technologies with poor compatibility in the hypertext 5, so as to construct a cross-browser webpage compatibility standard based on the hypertext 5, the cross-browser webpage compatibility quality after compatibility transformation is remarkably improved, the objective evaluation index of the cross-browser webpage compatibility is better in performance, and the further development of the hypertext 5 is facilitated.

Drawings

FIG. 1 is a schematic diagram of the hypertext 5 normalization standard of the cross-browser web page compatibility adaptive normalization of the present invention.

FIG. 2 is a schematic workflow diagram of the adaptive normalized reconstruction tool of the present invention.

Detailed Description

The technical solution of the hypertext 5-based cross-browser webpage compatibility standard building method provided by the present invention is further described below with reference to the accompanying drawings, so that those skilled in the art can better understand the present invention and can implement the present invention.

hypertext 5 unification criteria includes nine aspects: firstly, introducing files in a standard mode, secondly, unifying naming rules, thirdly, adopting correct document types, fourthly, not omitting tags of < html >, < head > and < body >, fifthly, correctly setting head contents, sixthly, closing all hypertext elements, seventhly, providing alternative schemes for pictures, eighthly, properly changing lines and indenting, and ninely, adopting quotation marks for attribute values.

Cross-browser webpage compatibility adaptive standardization

Hypertext 5 normalization standard

The hypertext 5 coding standard keeps the unified style of the hypertext 5 codes, so that the hypertext 5 codes are easy to understand, parse, maintain and upgrade, developers can add functions and perform later-stage optimization maintenance conveniently, and the high-quality hypertext invention file enables a website to have a more excellent front-end architecture and lays a good foundation for the development of the website. The present invention hypertext 5 unification criteria includes nine aspects, as shown in FIG. 1:

the method is characterized in that files are introduced in a specification, hypertext, images, CSS and JS files are filed in an agreement directory, an external link resource URL protocol is omitted, and the number of bytes of the files is reduced, for example, the embodiment < ahref ═ https:// www.***.com/"> omits http: or https:, the embodiment is abbreviated as < ahref ═// www.***.com/", wherein "///" cannot be omitted, a relative path is adopted when the resources are linked, the interlayer level of the files is prevented from being too deep, and the file searching efficiency is improved.

Secondly, the unified naming rule is adopted, the hypertext 5 adopts the unified naming rule, and the file names, the attribute names and the element names adopt upper-case letters or lower-case letters, so that the lower-case letters are easier to write and have more refreshing style compared with the upper-case letters, and therefore, the embodiment adopts the lower-case letters to write corresponding to the X hypertext invention files.

Thirdly, a correct document type is adopted, the hypertext invention document type must be clearly declared first, so that the Web browser avoids the browser entering a mixed mode by judging whether a document decision parser and a rendering type are switched to a corresponding hypertext 5 mode; DOTYPE declares <! DOTYPE html > or <! doctype html >, does not distinguish between cases and cases.

Fourth, the < html >, < head > and < body > tags are not omitted, in the hypertext 5 standard, the < html >, < head > and < body > tags are omitted, but the hypertext 5 unification standard of the present invention does not omit the < html >, < head > and < body > tags, the hypertext tags express page language: the html lang attribute is declared to the hypertext, the natural language used in the page is specified explicitly, the screen reader and the search engine are facilitated, the < html > tag is omitted or the < body > tag crashes in the document object and the XML software, the < body > tag is omitted to cause fatal error under the old browser (for example, IE 9), the content before the default < body > tag is added to a default < head > tag by the browser, but the head element is not omitted.

Fifthly, head content is correctly set, a < title > tag in the hypertext 5 is necessary and used for adding a title name and expressing a page theme, the title and language help a search engine to quickly and accurately understand the theme content of the webpage, the coding rule of the declared page is < meta charset ═ UTF-8 >, if the introduced JS script invented product is different from the charset used by the hypertext invention file, the < script charset ═ UTF-8 ═ src ═ is required to be specified, an IE compatible mode is declared to be edge for the page, an external CSS style and a JS script invented product are loaded by adopting simple grammar, and the type attributes of the script and the style sheet are omitted.

Sixthly, all hypertext elements are closed, all elements do not need to be closed in the hypertext 5, for example, a < p > tag is not necessarily closed, but each element of the present invention needs to be added with a closing tag, in the hypertext 5, an empty hypertext element also does not need to be closed, two ways of < metacharset ═ utf-8"> or < metacharset ═ utf-8"/> are adopted, the present invention adopts the second way, a slash "/" is necessary in the X hypertext and the XML, and if the written page can be adopted in the XML software, a slash style is adopted.

And seventhly, a picture providing alternative scheme is adopted, an alt attribute is adopted when the picture is introduced, when the picture cannot be displayed, an alt attribute value is used for replacing the picture to be displayed, page search engine optimization is assisted, the size of the picture is set, a designated space is reserved during loading, and flicker can be reduced.

And eighthly, line changing and indentation are proper, the code amount of each line is less than 80 characters, otherwise, a hypertext 5 editor is adopted, the code is inconvenient to roll left and right, unnecessary empty lines are reduced in shorter codes, plain text does not need to be changed before the hypertext tag is finished, empty lines are added between each logic function block, the code structure is easier to read and maintain, nested contents are indented to one level by two or four spaces, a TAB key is not directly used, hypertext annotations, especially TODO annotations, are properly added, and the code structure is easier to read.

Ninthly, attribute values adopt quotation marks, hypertext element attributes are stated according to the sequence of class, id or name, data-, src or href or type or for, title or alt, role or aria-, code is ensured to be easy to read, data-is the attribute of element self-definition, hypertext 5 attribute values adopt double quotation marks, attribute values adopt quotation marks to be easy to read, if the attribute values contain spaces, quotation marks are needed to be adopted, the uniform style of attribute values plus quotation marks is adopted, id and class attribute values of hypertext elements are provided with name containing definitions, and disabled/selected/checked attributes do not need to be provided with values.

(II) reconstruction based on document object model criteria

The prior art has two solutions to document object compatibility, one is based on application programming interfaces in the document object, and many standard application programming interfaces are unfamiliar and no longer willing to learn for developers accustomed to a certain browser. The other scheme is to adopt capability detection, before executing the code, whether a certain script object or method exists is detected, if necessary, the browser can adopt the script object or method, and the code can be executed as expected. The common disadvantages of the two schemes in the prior art are that the re-encoding workload is too large, the encoding cost is too high, and automation cannot be realized.

The reconstruction based on the document object model standard can reconstruct incompatible codes without manually modifying the existing codes, and simultaneously reduces the error rate of manual modification. Document object structures allow dynamic access and updating of document content, structure, and style. In order to improve factors such as competitiveness, various browser manufacturers do not completely comply with the W3C standard to realize the document object model standard, and self-adaptive standardization is carried out on existing codes which do not comply with the document object standard in a reconstruction mode to realize cross-browser compatibility.

Various browsers control a document object through a script language, if codes are incompatible, a script is firstly analyzed, if incompatible codes are to be found in the analyzed script language, an incompatible list needs to be obtained, and when codes conforming to the document object standard are generated, a self-adaptive standardized reconstruction tool is adopted. The workflow of the adaptive normalized reconstruction tool is shown in fig. 2.

In the specific implementation process, JavaScript codes embedded in a page need to be analyzed, incompatible parts are found and corrected, and a language analyzer constructed for a specific JS script is implemented by adopting an open source syntax analyzer. The open source syntax analyzer receives syntax expression, forms a corresponding analyzer according to the given lexical rule, codes take the syntax of a language C + +, Java or C #, greatly accelerates self-writing of the analyzer, the open source syntax analyzer receives an LL (k) grammar, the standard for writing the LL (k) is that left recursion is not adopted, at most k characters are seen forward, if no corresponding production formula is found after compiling recursion reaches k times, namely, a sentence is identified and failed, when a webpage Document is input, a program database of a self-adaptive standardized reconstruction tool must analyze a Document object model from the webpage Document, the whole webpage content can be easily operated through a Document object obtained after analysis and a Document object application program interface, the open source hypertext analyzer NekoHTML analyzes the page into a Document object tree, NekoHTML scans a hypertext invention and corrects common errors in the process of writing the Document, the method can supplement missing parent elements, self-adaptively close tags, an Xerces local interface is adopted for development of NekoHTML, the NekoHTML is used as a preprocessor, an input page document is preprocessed to obtain a document object tree, an open source syntax analyzer is used as a JavaScript analyzer to analyze JS codes, context data obtained in the analyzing process and a compatible comparison table can identify and enable incompatible codes to play a role in reconstruction, the incompatible parts of a document object model can well follow the document object standard after being corrected, the codes are more robust, and the method is easy to maintain and expand.

For non-standard page parts, the self-adaptive standardized reconstruction tool is based on a document object standard, the reconstructed webpage can follow a document object model and follow a W3C standard, cross-browser compatibility is realized, the self-adaptive standardized reconstruction tool is very important for the standardized value of webpage codes, self-adaptive reconstruction is carried out on existing irregular application by means of low cost, cross-browser and cross-platform compatibility is achieved, and the self-adaptive standardized reconstruction tool has strong practicability and popularization value for solving the problem of the compatibility of a large number of hypertext 5 webpages.

II, hypertext 5 key new feature compatibility standardization method

Standardization of compatibility between Audio and Video elements

The Video content can be conveniently controlled by JavaScript through the Audio and Video elements of the hypertext 5, the functions are very powerful, the code amount is small, the loading speed is high, and in addition, the cross-platform performance is good, especially for a flat plate and a mobile phone. But the compatibility of hypertext 5Video element is very poor, and the developer can play Audio and Video by using Audio and Video elements in the webpage, but the visitor using the old version browser can not play the Video or Audio normally. Aiming at the problems, the Audio and Video functions in the hypertext 5 are adopted in the webpage, and the invention provides four standardized methods for the compatibility of the Audio and Video elements of the hypertext 5.

The method comprises the following steps: firstly, preparing video or audio files with various formats in advance; for example, first prepare a video file in mp4 format for use in apple devices, then prepare a file in ogv format for use in a 360 browser, and finally prepare a video file in webm format for use in *** browser, webm being open-source and free of charge, can be made into a cross-browser compatible video format.

The key for preparing the multi-format browser is conversion format, the invention adopts a file Converter ONLINE Converter to quickly and conveniently convert a file from one format to another format, the ONLINE Converter supports a plurality of different source formats including video and audio conversion and a Hash generator, the ONLINE Converter directly selects a target format without installing software, and then uploads the video or audio and configures parameters to realize format conversion.

Step two, writing the corresponding Audio or Video or code of the hypertext 5, wherein the two respectively contain Audio and Video related information, and the codes are similar, the embodiment takes the Video as an example, and the specific codes are as follows:

the browser does not support the video tag, please click here to download the video:

< a href ═ video

</video>

The label video is used for referencing a video, the height and the width of the video content are set through height and width attributes, the unit is a pixel, a source label is contained in the label video, and the source label is used for representing the referenced video, the video format and the video type; in order to ensure downward compatibility, a prompt is added in a video tag, the prompt is not displayed in a browser supporting a video element, the browser cannot be displayed unless the prompt is displayed, and a video download address is also added in a code to prompt a user that the user can download and play the video if the browser cannot support the video element. The host used must be able to correctly process these video requests, ensuring that when the host is requested for video, it is correct to send the MIME Type on the Content-Type header, if the host supports. htaccess, the following statements can be added to the. htaccess file:

AddType video/ogg.ogv

AddType video/mp4.mp4

AddType video/webm.webm；

step three, ensuring the support of the old browser, if the browser does not support, displaying the prompt content in the video or audio label, replacing the prompt content with the traditional flash of the old browser, and displaying the video of the flash version when the browser does not support the video or audio label; the code for the example of video is as follows:

<paramname＝"movie"value＝"fallback.swf"/>

<paramname＝"flashvars"value＝"autostart＝true&amp；file＝video.flv"/>

</object>

</video>

The method 2 comprises the following steps: with hyperlinks, if a page contains hyperlinks to media files, the browser will use the auxiliary application to play the files. The following code fragments display a link to a Media file, which when clicked by a user, the browser launches an "auxiliary application" (e.g., Windows Media Player) to play:

Mp3"> Playthesound <! -playing audio-.

The method 3 comprises the following steps: the method introduces JavaScript library html5media.js, and when the swf player is better, the two methods are a method for well solving the problem of cross-browser of Audio and Video labels, but under the condition of no high-quality swf player, the method adopts the introduction of html5media.js and the plug-in html5media.js to be independent of any other JavaScript frame, and after the method is adopted, when the used browser does not support hypertext 5, the self-adaption is switched into a Flowlayer player, the Video and Audio files of the hypertext 5 can be watched under all browsers through the plug-in, and the defect that the low-version IE browser does not support the < Video > and < Audio > labels is overcome, and the method adds a script inside the < head > of the webpage: and (2) script src ═// api. html5media.info/1.1.8/html5media.min.js ">/script, loading the JS script only under an old edition IE browser by adopting an IE condition annotation mode, and then respectively adding a video or audio by using video or audio:

<videosrc＝"video.mp4"width＝"320"height＝"240"controlspreload></video>

<audiosrc＝"audio.mp3"controlspreload></audio>

js can use Audio and Video tags under IE8, even the older IE6 browser.

(II) Server Transmit event compatible standardization

The server sends the event by using an EventSource object initiated by the browser, and the problem that the browser of Microsoft does not support exists is serious. In order to solve the problem, the invention adopts a putty script technology, avoids browser differences by utilizing the provided JavaScript library, only needs to load a third party JS library into a webpage, and does not need to change the client code of the application.

The server sends the event in a long connection mode, when the connection is opened all the time, the XMLHttpRequest object cannot obtain the content of the response, and the corresponding event cannot be triggered, particularly when the readyState of the XMLHttpRequest object is 3, the responseText attribute of the XMLHttpRequest object cannot be obtained. Theoretically, the response content of the server can be obtained through the XMLHttpRequest object, and then the text is analyzed, so that the associated event can be extracted, and the corresponding event is triggered. However, the XMLHttpRequest object does not support obtaining response content under an IE browser and can only be obtained after the response is completed. In order to solve the problem of incompatibility of XMLHttpRequest objects under a Microsoft browser, an XDR object is introduced into an IE8, the XDR object provides an onprogress event, response content is obtained through a responseText attribute when the event is triggered, and after the connection between the XDR object and a server is opened, the server processes the event onprogress through the XDR object when new data occurs in the server. However, because the cross-domain sending of the AJAX request is the original purpose of the XDR object, the XDR object is strictly limited, and the limitations affect the implementation of the XDR as an EventSource object, and specific limitations and solutions include:

the method comprises the following steps that firstly, the request sent by the XDR object does not contain any information related to user authentication, including cookies and the like, if the server side needs to authenticate, user authentication information, such as ID of session and the like, is transmitted in other modes of HTTP request;

secondly, the server side response needs to contain an < Access-Control-all-Origin > header, states that the URL address allows the Access from which domain, indicates that the Access can be from any domain, but does not suggest adopting the value, the invention adopts the same domain as the current application, and limits the Access only from the current domain;

thirdly, the XDR object sending request can not comprise a self-defined HTTP header, the condition that an Event identifier received by a client at the Last time can not be declared by adopting a 'Last-Event-ID' header is limited, and only other methods adopting the HTTP request are allowed to transfer the identifier, such as a parameter in a GET mode or a content body in a POST mode.

Fourthly, the Content-Type of the XDR object request can only be 'text/plane', which indicates the POST request mode, a frame introduced by the server end cannot self-adaptively analyze the Content of the frame, and the Content of the POST request cannot be acquired by adopting a getParameter method of an HttpServletRequest class. The content of the original request can only be analyzed at the server side to obtain the values of the parameters therein.

The implementation of the server side is also modified correspondingly by a series of limitations of the XDR (xdomainanrequest) object, including the return of an < Access-Control-low-Origin > header, the processing of the user authentication information in the request, and the parsing of a "text/plane" type parameter sent by the browser.

The putty script library adopted by the invention is an open source project EventSource developed on GitHub, an eventsource.js file in the EventSource project is taken as a putty script, the putty script is downloaded and put into a folder where a webpage is located, the file is introduced into a head label, and related codes are compiled.

(III) advanced form element compatibility standardization

Hypertext 5 advanced form compatibility issues manifest in four ways:

firstly, a hypertext 5 optimized or newly added form is adopted, but the form is still displayed as a conventional input text field;

secondly, the input box can not trigger verification when losing focus, only trigger when clicking a submit button, and hopefully, the input box can detect the content of verification input when the user mouse leaves;

thirdly, the UI interface of the information prompting control has large difference, the Safari browser cannot even trigger the information prompting control, and some browsers such as IE and Edge can add red borders on illegal input boxes;

fourthly, the prompt characters are fixed and different from browser characters, wherein Chrome prompt characters are relatively best.

In order to solve the above problems of url, password, number and email input and realize the hypertext 5 form verification of the cross-browser, the invention adopts a form verification plug-in checkvariable.js, which specifically comprises the following steps:

secondly, the UI is unified, the plug-in firstly unifies the interface, the effect of the Chrome browser is simulated, the interface style and the position display are unified, the user can define the interface style, the prompt information provides an option whether to adopt default prompt characters of the browser, and if not, the user can define the content.

Thirdly, asynchronous verification is supported, and the asynchronous verification is supported, wherein the asynchronous verification is powerful, for example, whether a user name exists or not is verified;

and fourthly, the method supports various types of rule verification, and the checkvalidity.js plug-in can support various types of verification rules, including mandatory items, formats or self-definition, for example, two requirements of verifying contact telephone, namely mandatory items and conforming formats.

(1) Use of a checkvariable

The application of the checkvalidity. js plug-in is specifically as follows:

step 1, compiling html structure of form;

step 2, after the html structure is provided, initializing the plug-in;

(2) Adding custom checks

In this embodiment, the password input is required to be the same twice, custom check is added in the checkOpt, a rule attribute is added to the checkOpt, the name attribute of the form is the key value of the form, and the value includes a custom check function and an error prompt.

(3) Custom asynchronous inspection

Part of the data needs to request for verification from the server, and the embodiment is to verify whether an account already exists: and two parameters are transmitted into the callback function, the first parameter is executed when the verification fails, the second parameter is executed when the verification succeeds, and the parameters are used by the plug-in. Js plug-in code is not complex, but requires more detail to consider. Such as adding a checkValidity function; error prompt adds the position of the key point in calculating the prompt message; the method for realizing the asynchronous check includes that when the issue callback is executed by the difficulty of realizing the asynchronous check, the method is to add an attribute hasCheck to each form, the check is set to true by setting the check to true, if focus is set to false, if blue is set to false, and the issue callback is executed when all input hasCheck is true. Js' Form plug-in supports several inputs, text, password, url, email and number, and can satisfy most Form submission verifications.

IE6 to IE 9 do not support datalist elements, are solved by adopting a putty script technology, download jquery.

The JS file part is as follows: $ ('input [ list ]'). datalist (), in the CSS style file, it is necessary to add: datalist { display: block; };

the compatibility problem existing in the form is solved by adopting putty script polyfil.

Claims

1. The method for constructing the cross-browser webpage compatibility standard based on the hypertext 5 is characterized by comprising a cross-browser webpage compatibility self-adaptive standardization method and a hypertext 5 key new feature compatibility standardization method, wherein the cross-browser webpage compatibility self-adaptive standardization method comprises a hypertext 5 unified standard and a document object model standard-based reconstruction;

fifthly, head content is correctly set, a < title > tag in the hypertext 5 is necessary and used for adding a title name and expressing a page theme, the title and language help a search engine to quickly and accurately understand the theme content of the webpage, the encoding rule of the page is declared to be < metacharset ═ UTF-8 >, if the introduced JS script invented product is different from the script used by the hypertext invented file, an outsink file encoding < script charset ═ UTF-8 ═ src ═ is required to be specified, an IE compatible mode is declared to be edge for the page, an external CSS style and a JS script invented product are loaded by adopting simple grammar, and the type attributes of the script and the style sheet are omitted;

2. The method for constructing the hypertext 5-based cross-browser webpage compatibility standard according to claim 1, wherein the reconstruction based on the document object model standard reconstructs incompatible codes without manually changing existing codes, the document object structure allows dynamic access and updating of document contents, structures and styles, and the existing codes which do not conform to the document object standard are adaptively standardized in a reconstruction manner, so that cross-browser compatibility is realized;

3. The method of claim 1, wherein the Audio and Video functions of hypertext 5 are used in the web page, the invention provides four standardized methods for Audio and Video element compatibility of hypertext 5:

the method comprises the following steps: firstly, preparing video or audio files with various formats in advance; the key for preparing a multi-format browser is conversion format, the invention adopts a file Converter on Converter to convert a file from one format to another format, the on Converter supports a plurality of different source formats including video and audio conversion and a Hash generator, the on Converter directly selects a target format without installing software, and then uploads the video or audio and configures parameters to realize format conversion;

4. The method of claim 3, wherein the hypertext 5-based cross-browser web page compatibility standardization method comprises the following steps:

Mp3"> Playthesound <! -playing audio-.

5. The method of claim 3, wherein the hypertext 5-based cross-browser web page compatibility standardization method comprises the following steps:

<videosrc＝"video.mp4"width＝"320"height＝"240"controlspreload></video>

<audiosrc＝"audio.mp3"controlspreload></audio>

js can use Audio and Video tags under IE8, even the older IE6 browser.

6. The method for constructing the hypertext 5-based cross-browser webpage compatibility standard according to claim 1, wherein the server sends an event compatibility standard by using a putty script technology, avoids browser differences by using a provided JavaScript library, and only needs to load a third party JS library into a webpage without changing a client code of an application;

7. The method of claim 6, wherein a series of limitations of XDR object, server-side modifications, include the return of < Access-Control-Allow-Origin > header, processing of requested user authentication information, parsing of "text/plane" type parameter issued by browser;

8. The method for constructing the hypertext 5-based cross-browser webpage compatibility standard according to the claim 1 is characterized in that the problems of url, password, number and email input are solved through high-level form element compatibility standardization, the hypertext 5 form verification of the cross-browser is realized, and the method adopts a form verification plug-in checkvalidity.

9. The hypertext 5-based cross-browser webpage compatibility standard building method of claim 8, wherein the checkvalidity.js plug-in is specifically applied as follows:

step 1, compiling html structure of form;

step 2, after the html structure is provided, initializing the plug-in: