Enable web applications to adapt to multiple browsers

On different browsers or browsers with different settings, the web page is executed differently. This article describes some useful techniques to help you make your Web Applications ProgramBetter adapt to all environments.

The features of different Web browsers, such as language settings and JavaScript support, may result in inconsistent working methods of Web applications in different browsers. Inconsistencies between browsers not only make applications look bad, but also often make them unable to work. This article provides some tips that you can use to solve these problems.

Process different types of browsers

The main reason why Web pages cannot work smoothly anywhere is that different types of browsers support different standards. The best way to overcome this problem is to use only common attributes and methods. However, sometimes you must write specialCode.

Implement innertext attributes

UseInnertextSet the property or obtain the text between the start and end tags of an object. This property is only defined in Microsoft Windows Internet Explorer. Although this attribute is widely used, it is not a standard attribute. AvailableInnerhtmlBut they are different.InnertextAttributes provide special features. For example, you can directly obtain the text of a subnode, which helps you write cleaner code. You may also encounterInnertextProperties. Implement it by yourselfInnertextProperties to make these pages support more browsers. For example, you may need to implement this attribute in a Mozilla-based browser; Listing 1 shows the implementation method.

Listing 1. Implementing innertext for mozilla-based browsers

Htmlelement. Prototype. _ definegetter _ ("innertext", function () // define a getter method to get the value of innertext, // so you can read it now! {Var textrange = This. ownerdocument. createRange (); // using range to retrieve the content of the object textrange. selectnodecontents (this); // only get the content of the object node return textrange. tostring (); // give innertext the value of the node content });

Obtain the scroll value and window size.

Most Web applications require geometric values, such as window size and scroll values. However, the browser can store these values in different attributes. Some attributes even have the same name and different meanings. A better way is to create your own unique variables to represent these attribute values. Listing 2 demonstrates how to create unique properties in most mainstream browsers.

List 2. Define some common variables as unique attributes for storing geometric values

VaR scrollleft, scrolltop; // scrollleft: the distance between the horizontal scrollbar // with the left edge of the frame. // scrolltop: the distance between the vertical scrollbar // with the top edge of the frame. // get the scroll value from different browsers. // determine the browser type first. // and then get the value from the participates property. if (window. pageyoffset) {scrolltop = Window. pageyoffset} else if(document.doc umentelement & document.doc umentelement. scrolltop) {scrolltop = document.doc umentelement. scrolltop;} else if (document. body) {scrolltop = document. body. scrolltop;} If (window. pagexoffset) {scrollleft = Window. pagexoffset} else if(document.doc umentelement & document.doc umentelement. scrollleft) {scrollleft+document.doc umentelement. scrollleft;} else if (document. body) {scrollleft = document. body. scrollleft;} var returns wwidth, returns wheight; // frame width & height if (window. innerwidth) {empty wwidth = Window. innerwidth;} else if(document.doc umentelement & document.doc umentelement. clientwidth) {Your wwidth?document.doc umentelement. clientwidth;} else if (document. body) {required wwidth = document. body. offsetwidth;} If (window. innerheight) {interval wheight = Window. innerheight;} else if(document.doc umentelement & document.doc umentelement. clientheight) {javaswheight?document.doc umentelement. clientheight;} else if (document. body) {export wheight = document. body. clientheight ;}

Windows origin in two-way language

Some languages (such as Arabic and Hebrew) are called bidirectional languages, which means they are read from right to left. The current browser supports displaying content from right to left. However, when the page is displayed from right to left, Internet Explorer defines different window origins. This origin is not in the upper left corner of the canvas, but in the upper left corner of the visible part. This means that some parts of the page will be negative.XValue, which causes some elements of the page to appear in the wrong position. Figure 1 shows the original position of Internet Explorer when the page is displayed from right to left.

Figure 1. Origin in Internet Explorer when the page is displayed from right to left

Remember, when the page is displayed from right to left in Internet Explorer, you must modifyAlgorithmFor example, adjust the element position according to the offset of the origin.