1. Робота з різними видами браузерів
2. Реалізація атрибута innerText
3. Лістинг 1. Реалізація innerText для браузерів на основі Mozilla
4. Отримання значення прокрутки і розміру вікна
5. Лістинг 2. Визначення деяких універсальних змінних як унікальних атрибутів, які можуть заміщати геометричні...
6. Початок координат вікна в мовах із зворотним напрямком письма
7. Малюнок 1. Початок координат в Internet Explorer при відображенні сторінки справа наліво
8. Отримання многострочного деревовидного списку
9. Малюнок 2. Перед зміною розміру вікна колонки прив'язуються до сітки
10. Малюнок 3. Після зміни розміру вікна колонки більше не прив'язуються до сітки
11. Малюнок 4. За допомогою DIV сторінка виглядає добре
12. Визначення правильного розміру DIV
13. Малюнок 5. Прокрутка сторінки вниз призводить до зміщення тесту
14. Лістинг 3. Завдання ширини DIV за допомогою ширини тексту в ньому
15. Робота з різними настройками браузера
16. Підтримка браузерів, в яких не підтримується JavaScript
17. Лістинг 4. Інформування користувачів про те, чому вони не можуть переглянути сторінку
18. Лістинг 5. Перенаправлення на версію програми без підтримки JavaScript
19. резюме
20. Ресурси для скачування

Дотримуйтесь цих порад при роботі з різними типами браузерів і їх настройками

Функції різних Web-браузерів, наприклад мовні настройки та підтримка JavaScript, можуть бути причиною того, що Web-додатки працюють по-різному в різних браузерах. Цей недолік цілісності у різних браузерів не тільки призводить до поганого зовнішнім виглядом додатки, але часто є причиною припинення його роботи. У цій статті представлено кілька порад, які можуть допомогти вам вирішити деякі з цих проблем.

Робота з різними видами браузерів

Головна причина, по якій Web-сторінки не можуть працювати скрізь, це те, що різні види браузерів підтримують різні стандарти. Кращим способом уникнути цієї проблеми є використання тільки загальних атрибутів і методів. Проте, іноді доводиться писати спеціальний код.

Реалізація атрибута innerText

Ви використовуєте атрибут innerText для установки або вибірки тексту між початковим і кінцевим тегами об'єкта, що визначено тільки в Microsoft® Windows® Internet Explorer®. Хоча цей атрибут широко використовується, він не є стандартним. Замість нього ви могли б використовувати innerHTML але це не одне і те ж. Атрибут innerText пропонує більш доступного режиму, наприклад здатність отримувати текст дочірнього вузла безпосередньо, що може допомогти вам написати більш "чистий" код. У вас також можуть бути успадковані сторінки, що використовують innerText. Реалізуючи атрибут innerText самостійно, ви дозволяєте цих сторінок підтримувати більше браузерів. Наприклад, вам може знадобитися реалізувати цей атрибут в браузері на основі Mozilla; лістинг 1 показує, як це зробити.

Лістинг 1. Реалізація innerText для браузерів на основі Mozilla

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});

Отримання значення прокрутки і розміру вікна

Більшості Web-додатків потрібні геометричні значення, наприклад розмір вікна і значення прокрутки. Однак браузери можуть зберігати ці значення в різних атрибутах; деякі атрибути навіть мають одне і те ж назву, але призначення їх по-різному. Вам краще створювати власні унікальні змінні для заміщення значень атрибутів. лістинг 2 показує, як створити унікальні атрибути в більшості популярних браузерів.

Лістинг 2. Визначення деяких універсальних змінних як унікальних атрибутів, які можуть заміщати геометричні значення

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 particular property. if (window.pageYOffset) {scrollTop = window.pageYOffset} else if (document.documentElement && document.documentElement.scrollTop) {scrollTop = document.documentElement.scrollTop; } Else if (document.body) {scrollTop = document.body.scrollTop; } If (window.pageXOffset) {scrollLeft = window.pageXOffset} else if (document.documentElement && document.documentElement.scrollLeft) {scrollLeft = document.documentElement.scrollLeft; } Else if (document.body) {scrollLeft = document.body.scrollLeft; } Var windowWidth, windowHeight; // frame width & height if (window.innerWidth) {windowWidth = window.innerWidth; } Else if (document.documentElement && document.documentElement.clientWidth) {windowWidth = document.documentElement.clientWidth; } Else if (document.body) {windowWidth = document.body.offsetWidth; } If (window.innerHeight) {windowHeight = window.innerHeight; } Else if (document.documentElement && document.documentElement.clientHeight) {windowHeight = document.documentElement.clientHeight; } Else if (document.body) {windowHeight = document.body.clientHeight; }

Початок координат вікна в мовах із зворотним напрямком письма

Деякі мови, наприклад арабська та іврит, відомі як мови із зворотним напрямком письма, тобто в них читають справа наліво. Сучасні браузери підтримують можливість відображати подібне вміст. Однак коли сторінка відображається справа наліво, Internet Explorer визначає інше початок координат вікна. Початок координат знаходиться не в лівому кутку області відображення, а в лівому кутку видимої частини. Це означає, що якась частина сторінки матиме від'ємне значення x, через що деякі елементи вашої сторінки виявляться в неправильному положенні. на малюнку 1 показано, де знаходиться початок координат в Internet Explorer, коли сторінка показується зліва направо.

Малюнок 1. Початок координат в Internet Explorer при відображенні сторінки справа наліво

Пам'ятайте, що при відображенні сторінки в Internet Explorer справа наліво ви повинні внести зміни в арифметичні операції, наприклад відрегулювати положення елемента зрушенням початку координат.

Отримання многострочного деревовидного списку

Ви використовуєте теги <ul> and <li> для відображення деревовидного списку. Однак браузери на основі Mozilla не дозволяють вам вбудовувати інші елементи в теги <li>, тому ви можете отримати тільки прості списки. Для вирішення цієї проблеми ви можете використовувати таблиці, щоб створити деревовидний список. Використовуючи TABLE замість LI для реалізації елемента списку, ви можете створювати складні елементи.

Однак ви знову зіткнетеся з проблемами, якщо в TABLE багато колонок. Зміна розмірів вікна за допомогою миші призводить до того, що сторінка виглядає як на малюнку 2 .

Малюнок 2. Перед зміною розміру вікна колонки прив'язуються до сітки

малюнок 3 показує, як виглядає сторінка, коли ви змінюєте розмір фрейму; колонки більше не прив'язуються до сітки.

Малюнок 3. Після зміни розміру вікна колонки більше не прив'язуються до сітки

Ви можете вказати ширину TD в таблиці деревовидного списку, але це погане рішення, так як ширина TD означає лише максимальний розмір, тому браузери можуть змінити розмір TD для відображення додаткового вмісту при зміні розмірів вікна. Щоб досягти "організованого" зовнішнього вигляду, вам потрібно щось ще - DIV. (У цій статті DIV, TABLE і TD представляють вузли дерева DOM; звичайно ж, ви також можете ставитися до них, як до HTML-тегами.)

На жаль, ви скоро зрозумієте, що DIV викликає подібні проблеми. Ширина DIV є не абсолютною величиною, а, скоріше, мінімальною шириною. Якщо ви зміните розмір вікна, деякі браузери також змінять ширину DIV. А чи не можна скомбінувати TD і DIV? Якщо використовувати DIV всередині TD, то будуть визначені і максимальний, і мінімальний розміри осередків. Тепер у нас фіксований розмір, як показано на малюнку 4 .

Малюнок 4. За допомогою DIV сторінка виглядає добре

Робота з декількома мовами

Якщо ваше додатки підтримують кілька мов, майте на увазі, що один і той же текст на різних мовах, можливо, буде мати різну довжину, що може призвести до поганого зовнішнім виглядом сторінки. У цій ситуації може допомогти настройка DIV, що містить текст.

Визначення правильного розміру DIV

Припустимо, що ви хочете використовувати DIV, щоб намалювати спливаюче меню. Однак якщо ви не поставите вашому меню фіксований розмір, ви зіткнетеся з проблемою при скролінгу сторінки, як показано на малюнку 5 .

Малюнок 5. Прокрутка сторінки вниз призводить до зміщення тесту

Як ви бачите, текст виходить за межі. Internet Explorer автоматично задає DIV розмір видимої частини, коли DIV не має фіксованого розміру. Тому, коли ви прокручуєте сторінки, щоб переглянути невидиму її частина, розмір DIV недостатній, що призводить до зсуву тексту. Для вирішення цієї проблеми задайте фіксований розмір DIV.

Тепер потрібно визначити, як управляти розміром. Ви не можете жорстко поставити розмір, оскільки довжина тексту в DIV не може бути фіксованою, якщо ви підтримуєте багато мов. Вам потрібно отримувати довжину тексту динамічно, а потім встановлювати розмір DIV. Цього разу вам може допомогти таблиця. Розмір таблиці не залежить від її видимості. лістинг 3 показує, як поставити належну ширину DIV.

Лістинг 3. Завдання ширини DIV за допомогою ширини тексту в ньому

var leftmenu = document.getElementById ( "leftmenu"); var divWidth = parseInt (document.getElementById ( "divtable"). offsetWidth); leftmenu.style.width = divWidth + "px";

Робота з різними настройками браузера

Джерелом проблем можуть бути не тільки різні браузери і мови, але іноді і користувачі. Користувачі можуть створювати проблеми, коли вони задають спеціальні настройки в своїх браузерах. Наприклад відключення функціональності JavaScript може викликати серйозні труднощі для вашого застосування.

Підтримка браузерів, в яких не підтримується JavaScript

Деякі користувачі як і раніше використовують старі версії браузерів, а деякі відключають JavaScript, що призводить до некоректного відображення Web-сторінок. Щоб вирішити цю проблему, ви можете використовувати тег <noscript>. Просто додайте до тегу текст, який повідомляє користувачам, що їх браузери не підтримують JavaScript і не можуть правильно відобразити сторінку. В лістингу 4 показаний код, який ви можете використовувати з цією метою.

Лістинг 4. Інформування користувачів про те, чому вони не можуть переглянути сторінку

<Html> <head> <noscript> Your browser does not support JavaScript, or you've disabled the JavaScript in your browser, so you can not view this page correctly. </ Noscript> </ head> </ html>

Проте, найкращим вирішенням даної проблеми є створення іншою версією вашого Web-додатки, яка не залежить від JavaScript. Включили користувачі підтримку JavaScript чи ні, вони все одно можуть працювати з додатком. Використовуйте код, показаний в лістингу 5 , Щоб направити користувачів на версію без підтримки JavaScript.

Лістинг 5. Перенаправлення на версію програми без підтримки JavaScript

<Noscript> <meta HTTP-EQUIV = "REFRESH" CONTENT = "0; URL = noscriptversion.jsp?"> </ Noscript>

резюме

У цій статті я запропонував кілька порад, а саме: як реалізувати атрибут innerText в браузерах на основі Mozilla, як використовувати змінні для представлення значень геометрії, щоб вони були доступні для всіх браузерів, і як налаштувати положення елемента за допомогою зсуву точки початку координат, коли сторінка відображається в Internet Explorer справа наліво. Я також показав, як отримати багатостроковий деревовидний список, як вказати правильний розмір елементів DIV і як здійснювати підтримку браузерів, які не підтримують JavaScript. Сподіваюся, що ці поради можуть допомогти вам у вашій щоденній роботі.

Ресурси для скачування

Схожі теми

Підпишіть мене на повідомлення до коментарів