168 Chương 7: Tạo các script làm việc trong mọi trình duyệt Tọo cóc script làm việc trong mọi trình duụệt Trong chương n ày bạn sẽ học nhữ ng điểm ch ính sau đây: B Tìm hiển các điểm khác biệt của trình dĩiyệt K Phát hiện loại trình dĩiyệt nào mà người dừng đanq chạy B Tnty 1’ấn mồ hình Ỳài liêi/ B Tuân theo các chuẩn web M Viết mã nhiều trình duyệt T rong những ngày đầu phát triển JavaScript, việc xử lý những sự bất thường giữa những nhà sản xuất trình duyệt và các phiên bản khác nhau đã là một công việc khó khăn. Sau cùng, một số trìn h duyệt đã không hỗ trợ JavaScript gì cả (như Netscape 1.0). Thậm chí nếu bạn có một trình duyệt hỗ trợ JavaScript, mô hình tài liệu (DOM) nền tảng là khác nhau giữa các trình duyệt khác nhau, nghĩa là các lỗi JavaScript rấ t phổ biến. Sự khó khăn này của việc phát triến mã JavaScript vôn đã làm việc chính xác trong mọi trình duyệt đã xảy ra chủ yếu do một sô" yếu tố: K Các phiên bản trình duỵệt mới cách vài tháng * Một cuộc cạnh tranh đang diễn ra giữa các công ty trình duyệt để thêm các tính năng mới M Thiếu một cktiẩn HTML h(,át JavaScript M ất một số thời gian, nhưng cuối cùng các vân đề bắt đầu biến mất khi JavaScript ổn định. Và khi người dùng bắt đầu dần dần nâng cấp lên các trìn h duyệt phiên bản 4.0 trở lên, các nhà phát triển JavaScript có thời gian dễ dàng để phát triển mã tương thích nhiều trìn h duyệt. Thật không may, một số thay đối sắp tới đối với JavaScript sẽ buộc các iilià phát triều v/eb phả’ tắ t đầu vLế'., 1-iã lại cho các điểm khác biệt của trình duyệt. Các lý do cho thời điểm không ổn định mới này có thể bao gồm: M Sự hỗ trợ không nhất quán cho JavaScript 2.0 R Các phiên bản trình duyệt mới cácr? ìibau J’ải tháng (cụ thể từ Mozilla) m Sự hỗ trợ trôn JavaScript không nhất qỉián cho nhũng công nghệ mới, chẳng ban nhítXML và css Chỉ có thời gian mới cho biết những yếu tố này sẽ khiến cho các nhà phát triển web phâi đau đầu như thế nào. Tìm hiểu các điểm khác biệt cua trình duyệt Theo một C U Ộ I, khảo sát gầii (iây, Microsoft In ternet Sxploie) (IE) được sử dụng bởi khoảng 94% những người lướt web. Netscape và Mozilla có một mức sử dụng khoáng 2%. 4% còn lại được phân chia giữa những công ty khác chẳng hạn như Opera hoặc bị mất do làm tròn. Nl-ững cor số nAy có vhổ vh;iy đổi trong cấc tháag- và n:\rn ¡’ắp tớK Nhà cuug cấp dịch vn internet (ISF) lớn nhất r Mỹ gần đây đã thông báo nó sẽ bắt đầu sử dung Netscape làm trình duyêt mặc định cùa nó và có thể có tác động lơn đối với nhừng con số này. ĩ*Th'in kỹ h tr n ệ t chút £ố liôu thoof kê V‘1 tính thcng dụnf trìnb duyệt gần đây như trong bang 7.1, chung ta có thể thầv răng một nửa những người lướt \veđ đã chưa nâng cấp lên các phiên bản gần đây của các trinh đuyội- web .jfu tiên họ 54% những người lướt web sử đụnEí các trình duyệt không phải là phiên bản mới nhất "';ừ Microsoft hoặc Netscape. Do đó hãy cẩn thận khi tạo các chương trình JavaScript phụ thuộc quá nhiều vào các tính năng độc quyền hoặc các tính năng mới được bổ sung. Sử dụng các tính năng mà không áp dụng những biện pháp phòng ngừa toàn bộ có thể gây ra các lỗi cho một phần khán giả đáng kể thậm chí nếu ứng dụng hoạt động tốt trong trình duyệt được cài đặt trên PC. Các loại lỗi có thể xảy ra? Khi thiết kế bất kỳ chương trình máy tính, điều quan trọng là phải ghi nhớ rằng các lỗi có thể xảy ra bất kể nhà lập trình cô" gắng hết mình để tránh chúng. Điều này đặc biệt đúng đối với các chương trình JavaScript Chương 7: Tạo các script làm việc trong mọi trình duyệt __________________ 169 170 Chương 7: Tạo các script làm việc trong mọi trình duyệt được sử dụng qua nhiều trình duyệt và hệ điều hàn h khác nhau. Khi phát triển mã JavaScript, bạn có thể tìm thấy các nguồn lỗi sau đây: B Nhĩing điểm khác biệt trong Document Object Model của mỗi phiên bản trình duyệt R Các máy tính client chạy các trình duyệt cũ (chẳng hạn như Netscape 3.0) không hỗ trợ chức năng JavaScript nhất địnk B Các máy tính client có những công nghệ nhất địnb được tắt, chẳng hạn như cookie hoặc Java B Các công nghệ được bật web mới, chẳng hạn như các thiết bị xách tay, thiết bị di động, hoặc thậm chí các thiết bị gia dụng, chẳng hạn rưrntủ lạnh Chương này sẽ xem xét một sô" kỹ thu ật chung để trán h những loại lỗi này. Bảng 7.1 Thông sỗ' kỹ thuật sử dụng trình duyệt web gần đây Trình duyệt Mức sử dụng IE 6 46% IE 5 44% IE 4 2% Netscape 4 2% Netscape 6, Netscape 7, Mozilla (gộp chung) 1% IE cũ nhỏ hơn 1 % Netscape cũ hơn nhỏ hơn 1% Phái hiện ỉoại trinh duyệt nào mà ngưừi dũng đang chạy Chạy một chương trìn h JavaScript hiện đại hoặc phức tạp trong một trình duyệt cũ hơn có th ể gây ra vô số sự số. Có lẽ cách dễ nhất để trán h những loại lỗi này là phát hiện loại trìn h duyệt nào mà người dùng đang chạy và sau đó tắt (disable) một số tín h năng chương trình hoặc cung cấp m ã thay th ế vốn thực hiện cùng một tác vụ bằng một cách hơi khác. C ¡ & c Ệ a » Phát kiện tliông tin tên và phiên bđn trình duLjệi tliưồnq được q ọ i là ẩánli hơi ỈPÌnh duqệt (Lpowsep sniffinq). Giốnq nkỉểu như mội con chó có tíiế phát hiện mủi dutj nliốỉ của m ột cá nkân, một bpowsep sniffep cố ptiát liiện và tp<3 về nliữnq chi tiết dui) nliđt của phđn mềm trìnk dui^ệt. Để phát hiện nhà sản xuất trìn h duyệt và một sô" phiên bản, chúng ta sẽ phụ thuộc vào đối tượng navigator DOM. Đối tượng navigator có một số phương thức và thuộc tính, nhưng ba phương thức và thuộc tính Chương 7: Tạo các script làm việc trong mọi trình duyệt 171 mả chúng ta quan tầm vào lúc riàv là appNam e, appV ersion, và userAgent. var browserString = navigator.appName; var browserVersion = navigator.appVersion; var browserAgent = navigator.userAgent; a.ert (orowserString); alert (browserVersion'; ________ alert (browserAgent); _____________________________________________________________ Điều bạn cẩn biết? Xác đ ịnh các số phiên bản JavaScript Các nhà sản xuất trình duyệt bắt đầu với những mục đích tốt nhất. Cả Netscape và IE cho phép các nhà phát triển xác định một số phiên bản JavaScript bên trong thuộc tinh ngôn ngữ của thẻ <script>. Điểu này ngăn các script chạy trong các trình duyệt vốn không hỗ trợ số phiên bản JavaScript được xác định. Để tạo một script mà sẽ chỉ chạy trong các trình duyệt h5 trợ Jav iScr pl 1 2, bạn sẽ sử dụng mã sau đây: <f cripí lanc-uíige =".¡avarcr;p11 Điều tương tự có thể được thực hiện trong tất cả phiên bản của JavaScript lên phiên bản 1.5. (Một danh sách các số phiên bản JavaScript và chúng liên quan với trình duyệt như thế nào sẽ được tìm thấy trong chương 1). Thật khcny nay, rết r. nhè. phỉit triển wob biết rằng d!ều rày có thổ được thực hiện và ít nhà phat triển hon (/ẫn thực su sử dụng kỹ thuật này khi tạo các script nhiểu trình duyệt. Ngoài ra phương pháp này không giúp các I nnà phát triển giai quyêt nhưng đièm knác Diệt liên quan đến DOlvl giừa các trinh duyệt khác nhau. Do đó mác du kỹ thuật này vẫn có sẵn, nhưng nó knông thể dươc Un cậy để giải quyết các vấn đề viết script nhiểu trinh duyệt. Đối với các trình duyệt web Netscape (bao gồm trình duyệt web Mozilla nguồn mở), thuộc tính navigator.appName luôn trả về cùng một giá trị bất kể phiên bản hoặc hệ điều hành. Netscape Đối với Microsoft Internet Explorer, thuộc tính navigator.appName cũng trả về một giá trị có thể dự đoán trước bất kể phiên bản. 172 Chương 7: Tạo các script làm việc trong mọi trình duyệt Do đó nếu trang web cần hiển thị text khác nhau phụ thuộc vào trình duyệt mà một khách tham quan đang chạy, bạn chỉ việc truy vấn thuộc tính navigator.appName như sau: var browserString = navigator.appName; if (browserString == ' Netscape’ ) t // Do something for Netscape/Mozilla here document.write (“Long live the lizard."); } else if (browserString == “Microsoft Internet Explorer") I // Do something for Microsoft here document.write (“You will be assimilated.’’); Tuy nhiên, navigator.appName cực kỳ giới hạn trong lượng thông tin mà nó cung cấp. Những thuộc tính navigator khác cung cấp thông tin hữu dụng hơn. v í dụ, thuộc tính navigator.appVersicn cjn g cấp thòng tin phiên bản cụ thể hơn. Dôi với các ti'ình duyệt Neiseap, chuoi được trả về từ thuộc tính đó hoàn toàn đơn giản. } else { // The browser is not one of the major two document.write (“Why must you always be so different?”); CUED Chương 7: Tạo các script làm việc trong moi trinh duyệt 173 Tương tự, Microsoft In tern et Explorer tra về thông tin phiên bản của nó trong chuỗi navigator.appVersiơn, như chúng ta có thể thấv từ ảnh chụp màn hình sau đáv được lấy từ Microsoft Intern et Explorer 6.0. Các phiên bản gần đây của trình duyệt web Microsoft luôn báo cáo số phiên ban là tương thích 4.0. Tuy nhien, số phiên bán thực sự được nhúng sau đó trong cùng một chuỗi (trong trường hợp này là MSIE 6.0). Các trình duyệt Mozilla l.x, Netscape 6.Ü và Netscape 7.0 đểu dựa vào cùng một mă nguồn, do đổ cách hoạt động của chúng rấ t tương tự. Nếu bạn đã từng nhận đươc chính xác tén trình đuyột và một sô phiên bán tì; r hứng cr\nn 'luyệt này, bạn co thí t:u / vấn ohdệc ánh userAgí n* của đòi tượpg navigator Như ban có f.h4’ thấy từ hình minh họa dưới đây, nó chứa một số thông tin phiên bản rất cụ thể ngay đến ngày tháng chír.h xác mà trinh duyệt đã được biên dịch. Sử dụng' ba thuộc tính nàv, chúng ta có thể tạo một hàm JavaScript rn à Sií p h á t h i ệ n loại t.Tình đ uyẹt. e h ú ih Xiíc m à n g ư ơ i d u n g l a n g c h ạ v . function getBrowserlntoO ( // Define variables »C contain the results var browserName - navigator.appName; vai browserVersionNum = parseFloatinavigator.appVersion). var browserAgent = navigator.userAgent; // Boolean (true or false) variables to detect browser type var is J E = (browserAgent.indexOffMSIE") != -1); var is_NN = (browserName.indexOffNetscape”) != -1): // Based on browser type, retrieve version number if (is_NN) { if (browserVersionNum >= 5.0) { var tempStart = browserAgent.indexOf(“Metscape/”); 174 Chướng 7: Tạo các script làm việc trong mọi trình duyệt if (tempStart == *1) { // “Netscape/” not found; must be Mozilla tempStart = browserAgent.indexOffrv:”); tempStart += 3; browserName = “Mozilla" var tempEnd = browserAgent.indexOfO”, tempStart); } else { // “Netscape/” found; must be Netscape Gecko tempStart += 9; var tempEnd - browserAgent.length; } var browserVersion = browserAgent.substring(tempStart, tempEnd); } else { // version < 5.0; must be old Netscape var browserVersion = browserVersionNum; } } else if (isJE ) { var lempStart = 0rowserAgent.indexOf(“MSIE’ ); tempStart += 5; var tempEnd = browserApent.indexOff“;”, tempStart^; Vqr jruwjeiVfcrsior. = browserAgent.substring(tempStart, tempEnd); } // Create new property of navigator object based on real // version number navigator.appRealVersion = browserVersion; return; } getBrowserlnfo(); document.write (“<h1>You appear to be running:<brxbr>”); document.write (“<b>” + navigator.appName + “</b> <i>version</i> “); document.write (“<b>” + navigator.appRealVersion + “</bx/h1>”); Như bạn có thể thấy chúng ta phải viết m ã nhiều để biết sô' phiên bản thực sự của các loại khác nhau của trìn h duyệt Netscape. Đối với Chng 7. To cỏc script lm vic trong mi trỡnh duyt 175 Netscape 4 tr v trc, thuc tớnh navigator.appVersion tr v ỳng g iỏ tr . Vỡ N e tsca pe 6 vỏ 7 v M oidlla u tr vờ 5.0 lỏ navigator.appVersioR. chỳng ta phi bt u tỡm kim thuc tớnh navigator.userAgent tỡm giỏ tr thớch hp. Q ờ x c U M ó lr*ớ( <lj ctcc (lr q(jn lỳ a rỡ .úc inc ớck CIJ \ớ cJ^ i^ V J Jo 3ú khụnq bao hõm ti c cỏc loqi hoc pkiờn bdn trỡn ii duL)t. xem mt vớ d hon hớo v mf scpipt phỏt hin tpỡnli duyt, bn nờn fkam Itko p p a c ical Bpovvsep S n iớớin q S cp ip cd a Bo b C la p ij tqi http :// bclapij.com/xbppojects-<jccs/ua, st dnq nhng tliuc tớnới ciia i tnq naviqatop quyt nh loqi v p kộn Ln rỡn ti d uqt. W et) site ú cng cha mt SCPè pt ( J q ỡ htlp://t>cl apq.com /xbppoects-cioc s M D O M ) cko pkộp byn sự d^nqi mt ttfp lằp i r;nq D O M ckuớớn cho tl c fpỡnli duL|t. Hỡnh m inh ha sau õy cho thy hm nh chy trong Netscape 2.0 v Netscape 7.0 nh ch no. [y?i Netscape - (JvdScnpt sample code] ệ 0 E 3 m m ùỷik* ỷpfo rằ òiwci low;-!# Fe***rfợH hoô*.;'- 0 đ 'sVMtoM m X'bầtf. Q è V' rằ*w i /Vi*vf mi W M *. ẫ S f g ẫv^:: 1 - ' s - - You appear to be running: Netscape version 2 v 3?iÊi ' (PuựjmajL'Pw. 'Vù/y ! T.; yaffil ;Ql 176 Chương 7: Tạo các script làm việc trong mọi trình duyệt 1$$ JavaSciipt «ample code - Neticdpe ■ H H T T n T T I - ỵier» £o Ễodanỏíkí look Window yete ¿ i JaviStiipt compiocoòe 1 □ You appear to be running: Netscape version 7.0 © Í ! OoturwV: Don« Í0.39 »csl Microsoft Internet Explorer đã luôn cung cấp số phiên bản của nó bằng chính xác cùng một cách. Nó tự báo cáo là tương thích Netscape 4.0 trong thuộc tính navigator.appVersion và để số phiên bản phần mềm thực sự được nhúng ở nơi khác trong cùng một chuỗi. Tìm nó tương đối đơn giản bằng cách sử dụng phương thức indexOfO của đôi tượng JavaScript String. Truy vấn mô hình đôì tượng (document mode!) Vấn đề với việc phụ thuôc vào mã kiểm tra tìm các trình duyệt theo tôn \ à phiôn bản 'à nó không rõ ’’ànk. H ên L/ậ: 'dioảng 9C9? l h jfr.g người lướt web sử dụng một trong hai trình duyệt chính - Netscape hoặc IE. Nhưng còn về 4% kia - những người lướt web chọn những nhãn hiệu khác chẳng hạn như Opera hoặc Konqueror thì sao? Các trình duyệt mới đang được phát triển và các web site sẽ không làm việc đáng tin cậy nếu chúng chỉ được viết mã để hoạt động với hai nhãn hiệu hàng đầu. Vấn đề khác là khi các phiên bản mới của IE và N etscape được tung ra, sự hỗ trợ cho các tính năng khác nhau thay đổi. Ví dụ, Netscape 4 hỗ trợ một phương pháp layout được gọi là các layer, nhưng sau đó sự hỗ trợ đã bị loại bỏ khi Netscape 6 xuất hiện. (Các layer sẽ được thảo luận thêm trong phần "Viết mã nhiều trình duyệt"). Cách dễ dàng nhất để khắc phục vấn đề của các trìn h duyệt khác nhau có sẵn (cả trong hiện tại và tương lai) là viết mã và kiểm tra xem có một phương thức đơn trước khi cố sử dụng nó hay không. Phiên bản chính thức đầu tiên của Document Object Model (được gọi là DOM 1) định nghĩa một phương thức của đối tượng tài liệu được gọi ià getElementB^IđG. Các trình duyệt gần đây (chẳng hạn như IE 5 và Netscape 6) hỗ trợ nó, nhưng các trình duyệt cũ hơn thì không. Việc đơn giản gọi phương thức getElement.ByldO trong một trình duyệt không hỗ trợ nó sẽ gây ra một lỗi: var obịptr = docurrent.getElPmentByld(”carname') • Do đó nếu bạn rr.uốn kiểm tra xom 4rình duyệt hiệr tại cổ bỗ trợ phương thức getElementByldO trước khi sứ dụng nó hay không, bạn chỉ việc truy vấn đối tượng tài liệu để xem nó có một thành viên có tên đó trước khi gọi nó hay không: if (document.getElementByld) { var objptr = document.getEiementByldC carname’’); Ị Mã trên sẽ làm việc trong bất kỳ trình duyệt vì các trình duyệt mà không hỗ trợ phương thức đó sẽ không thực thi mã bên trong câu lệnh if. Dí nhiên, trong các trình duyệt đó. biến obịptr sẽ không được xác lập, do đó tốt rh .it háy để mả chay thê xử lý những’ tình huống đó: if (C0Cjn.er.t.ije1EI';nrertBylõ) ; var objptr = document.getElementByldfcarname"); } else { alert (“Sorry, this web page will not work in your browser ”): } Dĩ nhiên, nếu bạn phải bao boc mỗi và mọi lệnh goi đến một phương thức DOM bằng câu iệnh if riêng cua nó, chương trình sẽ dài và kém hiôu quá. Do đó phương pháp tốt nhâr có thể là kết hợp phương pháp browser sniñing (đánh ho'' Lvinh duyệt) vơi phương thức pnát niện DOM đế đạt được vẹn ca đôi đường. Trung thành vói những chuẩn Web Trong những ngày đầu phát triển web, hai nhà sản xuất trìn h duyệt lớn nhất cạnh tran h dữ dội để đạt được thị phần. Một trong những chiến lược mà họ ưa thích nhất là cố vượt trội nhau về các tính năng. Những người tiêu dùng download và cài đặt phiên bản mới nhất của trình duyệt ưa thích của họ và trong vòng vài ngày phiên bản kế tiếp sẽ có sẵn để download. Các công ty lớn đôi khi đòi hỏi nhiều tháng để test và phê chuẩn phần mềm mới để sử dụng tự nhận thấy mình có lên đến hai phiên bản full đằng sau phiên bản hiện hành. Dĩ nhiên, điều này đã dẫn đến hai chuẩn HTML thay vì một chuẩn đã làm cho công việc của nhà phát triển web phức tạp hơn mức cần thiết. Thật may thay, cuối cùng cả Microsoft và Netscape quyết định Chương 7: Tạo các script làm việc trong mọi trình duyệt_____________________177 [...]... trìn h duyệt Ở p h ần trước trong chương chúng ta đã làm việc với một s ố m ã Jav aS cript có th ể được sử dụng để p h á t hiện tê n và số phiên bản chính Chương 7: Tạo các script làm việc trong moi trình dut 179 xác cúa trìn h duyệt Client Trong phần này, chúng ta sẽ dặt mã tương tự để sử dụng với dynamic HTML Dynamic HTM L (hoặc viết tắt là DHTML) là m ột phần mở rộng của chuẩn HTML cho phép các chương... gray square 180 Chương 7: Tạo các script làm việc trong mọi trinh duyệt < layer> J document.layersCmylayer^.bgColor = “black"; document.layers[“mylayer2"].bgColor = ‘'#CCCCCC"; document.layersỊ“mylaỵer2"Ị.moveBy (60, 10); Mã HTML này được th iế t k ế để h oạt động trong chỉ các trìn h duyệt web N etscape 4 X Mã của... getBrowserlnfo trước đó trong chương, cầu của chúng ta đơn giản hơn th ế nhiều T ất cả cần làm là phát hiện sự khác b iệt giữa N etscape 4, Để làm điều đó, sử dụng mã Jav aS crip t sau đây: var ua = navigator.userAgent.toLowerCase(); var ie4 = ua.indexOf(“msie”) != -1; 182 Chương 7: Tạo các script làm việc trong mọi trình duyệt if (document.layers)... 7.2 Tạo các layer trong Netscape 4 Lưu ý cách chúng ta sử dụng thẻ HTML chuẩn được xếp lồng bên trong th ẻ khơng chuẩn Các trình đuvệt, khơng hỗ trợ sẽ bỏ qua nó, vì các trìn h duyệt khơng hỗ trợ sẽ bỏ qua thẻ đó Tiếp theo chúng ta cần chỉnh sửa script để p h át hiện loại trìn h duyệt đang chạy Chúng ta có th ể nhưng những nhu những gì chúng ta N etscape 6 và IE sử dụng script... Chưdng 7: Tạo các script làm việc trong mọi trình duyệt HŨE &)1 khòng phù hợp với các chuẩn HTM L (vì thẻ khơng phải là m ột phần của chuẩn), nhưng nó sẽ làm việc trong cả TE và Netscape Tree view ũem o 9 '_ J Application example 3 Types of folders ' Targets JO RĨqhịlrạniặ •jj] New... quả Chèn một form HTML vào một trang web Các form được thêm vào các tran g web giống như cách các ảnh, text và những phần tử khác của trang, với m arkup HTML Các nhà p hát triển có th ể định nghĩa tấ t cả phần của một form bao gồm các điều khiển (control) mà nó chứa và chúng được sắp xếp như th ế nào sử dụng các thẻ HTML chuẩn Sử dụng thể Trong HTML, các form được định nghĩa sử dụng thẻ . biệt đúng đối với các chương trình JavaScript Chương 7: Tạo các script làm việc trong mọi trình duyệt __________________ 169 170 Chương 7: Tạo các script làm việc trong mọi trình duyệt được sử dụng. 7: Tạo các script làm việc trong mọi trình duyệt Tọo cóc script làm việc trong mọi trình duụệt Trong chương n ày bạn sẽ học nhữ ng điểm ch ính sau đây: B Tìm hiển các điểm khác biệt của trình. của thẻ <script>. Điểu này ngăn các script chạy trong các trình duyệt vốn không hỗ trợ số phiên bản JavaScript được xác định. Để tạo một script mà sẽ chỉ chạy trong các trình duyệt h5 trợ