Главная | Пиротехника

Наша совместная команда Banwar.org

Связаться с нами

  • (097) ?601-88-87
    (067) ?493-44-27
    (096) ?830-00-01

Статьи

кросбраузерності DHTML

  1. Зміст
  2. Вікна та документи
  3. Розміри робочої області вікна
  4. форми
  5. Форми і Mozilla
  6. <Select> і Netscape
  7. <Select> і Opera
  8. картинки
  9. шари
  10. Доступ до шару
  11. Доступ до CSS-властивостями шару
  12. Відмінності в CSS-властивості
  13. Видимість шару (visibility)
  14. Колір фону шару
  15. Чи не CSS-властивості
  16. Поточні координати верхнього лівого кута шару на сторінці
  17. Поточні розміри вмісту шару
  18. Запис в шар
  19. Вантаження іншого документа в шар
  20. Динамічне створення шарів через document.write в Netscape 4
  21. миша
  22. координати миші
  23. Корисні посилання

Початківці веб-програмісти рано чи пізно стикаються з тим, що їх скрипт, любовно написаний (чи запозичений) і прекрасно працює на домашньому комп'ютері з MSIE 5.5, чомусь не працює у сусіда або клієнта на його Opera, Mozilla або Netscape.

Мета цієї статті - розглянути наявні відмінності в DHTML-об'єктах та функціях у нинішніх браузерів. Передбачається, що читач вже більш-менш знайомий з програмуванням принаймні під один з браузерів.

Зміст

визначення браузера

Браузерів і їх версій досить багато, але багато хто з них не розрізняються між собою розумінням DHTML. Тому є сенс розбити їх на кілька груп, названих по найпоширенішому представнику. Перевіряти на приналежність до тієї чи іншої групи будемо через підтримку випробуваним браузером тих чи інших об'єктів:

isDOM = document.getElementById isOpera = isOpera5 = window.opera && isDOM isOpera6 = isOpera && window.print isOpera7 = isOpera && document.readyState isMSIE = document.all && document.all.item &&! isOpera isMSIE5 = isDOM && isMSIE isNetscape4 = document .layers isMozilla = isDOM && navigator.appName == "Netscape"

Домовимося, що в цій статті ми розглядаємо такі DHTML-браузери:

  • Microsoft Internet Explorer (MSIE) версії 4 і вище;
  • Netscape Navigator версії 4 і вище;
  • Mozilla всіх стабільних версій;
  • Opera версії 5 і вище.

Таким чином, фразу "це працює в MSIE" слід розуміти, як "це працює в MSIE версії 4 і вище" або, коротше, MSIE 4+.

Вікна та документи

У різних браузерах по-різному викликаються такі властивості, як розміри вікна, розміри документа, показники прокрутки і т.д.

Розміри робочої області вікна

  • MSIE - document.body.clientWidth, clientHeight
  • Netscape, Mozilla, Opera - innerWidth, innerHeight

Координати верхнього лівого кута робочої області вікна

  • MSIE, Opera 7 - screenLeft, screenTop
  • Netscape, Mozilla, Opera 5, 6 - screenX, screenY

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

  • MSIE, Opera 7 - document.body.scrollWidth, scrollHeight
  • Netscape, Mozilla - document.width, height
  • Opera 5, 6 - document.body.style.pixelWidth, pixelHeight

Прокрутка (scrolling)

  • MSIE, Opera 7 - document.body.scrollLeft, scrollTop
  • Netscape, Mozilla, Opera 5, 6 - pageXOffset, pageYOffset

В MSIE в документі повинен бути присутнім тег <body> </ body>, інакше document.body може бути не визначено.

форми

Доступ до форм

В MSIE такий код прекрасно працює:

<Form name = myform> <input name = mytext> </ form> ...... myform.mytext.value = "hello"

Але в 4-му Netscape цей код видає помилку. Там не можна так поводитися до форм. Необхідно писати document.myform.mytext.value = "hello" - це буде працювати і там, і там. Щоб уникнути можливих конфліктів імені форми з іншими об'єктами document краще писати document.forms.myform.mytext.value або document.forms [ "myform"]. Elements [ "mytext"]. Value. Останній запис рекомендується у випадках, коли ім'я форми або її елемента можуть містити неприпустимі для імені змінної в JavaScript символи.

Форми і Mozilla

У Mozilla краще не звертатися до елементів сторінки (особливо формам) до настання події onload.

<Select> і Netscape

В Netscape у об'єкта select немає властивості value. Для вибору потрібного option користуйтеся перевіркою select .options [n] .value і установкою відповідного select .selectedIndex. Користуватися select .options [n] .selected = true / false не рекомендується через проблеми з Opera (див. Далі).

<Select> і Opera

В Opera старих версій (напр. 5.10, на відміну від, наприклад, 5.12) не можна вибрати опцію select через select .options [n] .selected = true. Замість цього потрібно писати select .selectedIndex = n.

картинки

Доступ з картинок, т. Е. Об'єктів, створюваним тегом <img>, здійснюється через колекцію document.images []. Але у Netscape 4 є особливість у виклику картинки, якщо вона вставлена в шар (див. нижче ).

шари

Якщо в MSIE, Mozilla (він же Netscape 6) і Opera 7 шаром може бути будь-який елемент сторінки, то в Netscape 4 і Opera 5, 6 це зазвичай контейнер <div> </ div> з певним стилями absolute або relative розташуванням. Деякі рекомендують використовувати в Netscape 4 тег <layer>, т. К. Він краще розуміється Нетскейп. Тому ті випадки, коли <div> і <layer> в 4-му Netscape поводяться по-різному, можливо, я розгляну в одній з майбутніх статей. Але ці випадки досить рідкісні і специфічні і пов'язані з глюками в форматуванні вмісту шарів.

У Netscape 4 не використовуйте в іменах класів (class =) і ідентифікаторів (id =) символ підкреслення "_", в іншому випадку Netscape не побачить цього елемента.

Доступ до шару

Доступ до верствам по-різному здійснюється в різних браузерах. А саме:

  • MSIE 4+ - document.all [layerName]
  • Netscape 4 - document.layers [layerName]
  • DOM1 (MSIE 5+, Mozilla, Opera 5+) - document.getElementById (layerName)

Можна порекомендувати таку функцію:

function layer (layerName) {if (document.getElementById) return document.getElementById (layerName) if (document.all) return document.all [layerName] if (document.layers) return document.layers [layerName] return null}

З доступом до верствам в Netscape 4 є один аспект. Від пов'язаний з вкладеними (nested) шарами, т. Е. З шарами, які описані всередині контейнерів іншого шару. Приклад (передбачається, що в CSS для тегів <div> задано допустиме властивість position):

<Div id = "mylayer"> <div id = "cool"> xxx </ div> </ div>

Якщо в MSIE можна викликати шар "cool" через document.all [ "cool"], то в Netscape 4 document.layers [ "cool"] поверне undefined. Для виклику вкладеного шару доведеться написати таку конструкцію:

document.layers [ "mylayer"]. document.layers [ "cool"]

Те ж саме стосується і адресації інших об'єктів, що знаходяться всередині шару - картинок, форм, посилань і т.д.

Стало бути, нашу функцію можна модернізувати таким чином:

function findLayer (what, where) {if (! where) return var i, l, parent var len = where.length for (i = 0; i <len; i ++) {parent = where [i] .document.layers l = parent [what] if (l) return ll = findLayer (what, parent)} return false} function layer (layerName, parentLayerName) {if (document.getElementById) return document.getElementById (layerName) if (document.all) return document.all [layerName] if (document.layers) {if (parentLayerName) {return findLayer (layerName, eval (parentLayerName))} else {return findLayer (layerName, document.layers)}}}

Тепер ми можемо звернутися до нашого шару "cool" так: layer ( "cool", "mylayer") або взагалі layer ( "cool"), але останній варіант буде більш "гальмівним", т. К. Комп'ютеру доведеться обходити все дерево шарів до шуканого. Схоже міркування призводить до того, що логічно раз викликати шар - var mylayer = layer ( "xxx"), а потім використовувати змінну mylayer для подальшої роботи з шаром.

З картинками, вставленими в шар, в Netscape 4 справа йде так само. Картинки в шарі не входять до колекцію document.images [] кореневого документа, вони належать колекції document.images [] цього шару. Приклад - у нас є шар "layer", в ньому є картинка "image". Щоб поміняти у цій картинки src, пишемо:

document.layers [ "layer"]. document.images [ "image"]. src = "file.jpg"

Доступ до CSS-властивостями шару

Доступ до CSS-властивостями шару (розташування, видимість і т.д.) також по-різному здійснюється в різних браузерах. В MSIE 4 і DOM1-браузерах доступ до властивості здійснюється через об'єкт .style. Приклад (використовується вже певна нами функція виклику шару):

layer ( "mylayer"). style.visibility = "hidden"

У Netscape 4 у шару немає поля style, доступ до властивостей здійснюється безпосередньо:

layer ( "mylayer"). visibility = "hide"

Можна помітити, що навіть значення, яке потрібно привласнити властивості .visibility, різний у різних браузерів. Хоча більш нові версії 4-го Netscape підтримують не тільки "show" / "hide", але і "visible" / "hidden", як і MSIE.

Для доступу до стилів можна порекомендувати таку функцію:

function layerStyle (layerObject) {if (layerObject.style) return layerObject.style return layerObject}

Разом з якої наш приклад скоротиться до layerStyle (layer ( "mylayer")). Visibility = isNetscape4? "Hide": "hidden"

Треба, правда, відзначити, що наведений мною приклад виглядає дещо громіздким. Це пов'язано з тим, що він, не володіючи великою практичною користю, покликаний лише проілюструвати роботу з шарами в різних браузерах. Але ви можете познайомитися з більш акуратно написаною мною ж об'єктно-орієнтованої бібліотекою DHTML-функцій KLayers .

Відмінності в CSS-властивості

Хочу повторити, що доступ до CSS-властивостями по різному здійснюється в різних браузерах.

Видимість шару (visibility)

  • MSIE, Opera, Mozilla - .visibility = "visible" / "hidden" (видимий / невидимий)
  • Netscape 4 - .visibility = "show" / "hide" (show / hide вимагають тільки найперші версії Netscape 4, більш нові розуміють і visible / hidden)

Крім видимості, в CSS є ще "отображаемость" - display. Від visibility він відрізняється тим, що невидимий (visibility = "hidden") шар продовжує займати місце, а що не відображаються (display = "none") місця не займає, немов його просто немає. У Netscape 4 динамічно (т. Е. Скриптом) міняти display можна.

Колір фону шару

  • MSIE, Mozilla, Opera 6, 7 - .backgroundColor = "КОЛІР" (напр. "Red", "# ffee15")
  • Netscape 4 - .bgColor = "КОЛІР"
  • Opera 5 - .background = "КОЛІР" (працює тільки в тому випадку, якщо спочатку через CSS для шару було вказано будь-якої фоновий колір)

Фонове зображення у шару

  • MSIE, Mozilla, Opera 6, 7 - .backgroundImage = "url (url картинки)"
  • Netscape 4 - .background.src = "url картинки"

Обрізка шару (clip)

Дозволяє зробити тільки частина шару видимої. Може застосовуватися для ефектів "розорювання", "виповзання" або "скролінгу".

  • MSIE, Mozilla, Opera 7 - .clip = "rect (top, right, bottom, left)"
  • Netscape 4 - .clip.top = "top", .clip.right = "right" і т.д. (Top, right, bottom, left - розміри в пікселах, тобто, наприклад, 120px)
  • Opera 5, 6 - не підтримує

Для реалізації прокручуваного тексту в нових браузерах (MSIE, Mozilla, Opera) зручно застосовувати css-властивість overflow: hidden. Можна створити блок з overflow: hidden і фіксованими розмірами, а всередину його вкласти інший блок, який і будемо перекручувати. Для прокрутки досить міняти йому .style.left і top (або .style.pixelLeft, pixelTop в Opera). У Netscape 4, само собою зрозуміло, для прокрутки шару доведеться користуватися властивістю clip.

Чи не CSS-властивості

У верств є властивості, які не визначаються CSS. Це, наприклад, отримані габарити шару, які залежать від кількості тексту, поміщеного в ньому. Звертатися до цих властивостей треба минаючи .style, т. Е. Просто layer. властивість.

Поточні координати верхнього лівого кута шару на сторінці

  • MSIE, Opera, Mozilla - .offsetLeft, offsetTop (тільки для читання)
  • Netscape 4 - .pageX, pageY (можна змінювати, рухаючи шар абсолютно, т. Е. Щодо вікна, а не батьківських елементів, якщо такі є)

приклад:

function getLayerTop (layer) {if (isMSIE || isOpera5 || isMozilla) {return layer.offsetTop} else if (isNetscape4) {return layer.pageY}}

У DOM1-браузер (MSIE, Opera, Mozilla) в разі вкладених шарів, т. Е. Коли шар вкладений в інший шар, координати .offsetLeft і .offsetTop відраховуються відносно батьківського шару. Для отримання посилання на батьківський елемент існує властивість .offsetParent. Можна пройтися по ланцюжку offsetParentов, підсумовуючи їх координати, поки не дійдемо до самого верхнього батька - document.body.

Поточні розміри вмісту шару

  • MSIE, Mozilla, Opera 7 - .offsetWidth, offsetHeight
  • Netscape 4 - .document.width, height
  • Opera 5, 6 - .style.pixelWidth, pixelHeight

Зміна вмісту шару

Запис в шар

Через проблеми з MSIE 4 не слід викликати .innerHTML до настання onload сторінки.

У Netscape 4 є глюк із записом російських букв в шар. Вони перетворюються або в символи кодування western, або в знаки питання ( &quot;?????"). Вирішення цієї проблеми може бути досягнуто через використання завантаження в шар іншого документа (див. Далі). У шар завантажується документ з коректно виставлених charset, а потім в нього друкується через document.write потрібний текст.

Вантаження іншого документа в шар

У Netscape 4 шари мають атрибут і властивість src, а також метод .load (url). Це дозволяє записувати в шар вміст будь-якого документа.

В MSIE, Mozilla і Opera натомість є тег <iframe>, який дозволяє досягти схожих результатів. Однак метою даної статті не є докладний розгляд цього рішення. Скажу лише, що цей <iframe> робиться невидимим за допомогою CSS, в нього завантажується шуканий документ і, після його завантаження, вміст <iframe> записується в потрібний шар через .innerHTML.

В Opera 5, 6 будуть проблеми, т. К. В ній не можна ні завантажувати нічого в шар, ні писати в нього.

Динамічне створення шарів через document.write в Netscape 4

У Netscape 4 буде помилкою створювати шари (або просто теги зі стильовим атрибутом style) таким чином:

document.write ( "<div id = 'ddd' style = 'position: absolute'> ... </ div>")

Чомусь Netscape 4 не переварює вказівку стилю для друкованого через document.write тега. Рекомендується винести стилі в зовнішній окремий тег <style>:

document.write ( "<style> #ddd {position: absolute} </ style>") document.write ( "<div id = 'ddd'> ... </ div>")

Також можна скористатися вказівкою на class, а не id тега.

миша

Відстеження подій миші, як основного засобу управління переглядом веб-сторінок, має велике значення.

координати миші

Часто буває потрібно дізнатися поточні координати курсору миші на сторінці, незалежно від того, на якому з елементів документа вона знаходиться. Створимо функцію, яка буде при подію переміщення миші поміщати в глобальні змінні mousex і mousey поточні координати курсору щодо документа.

Ось як це робиться в різних браузерах:

  • Netscape 4: document.captureEvents (Event.MOUSEMOVE) document.onmousemove = function (e) {mousex = e.pageX mousey = e.pageY return true}
  • Mozilla - так само, як і в Netscape 4, але відлов події MOUSEMOVE не потрібно, т. Е. Перший рядок не потрібна: document.onmousemove = function (e) {mousex = e.pageX mousey = e.pageY return true}
  • Opera 5,6: document.onmousemove = function () {mousex = event.clientX mousey = event.clientY return true}
  • MSIE і Opera 7 - так само, як і в Opera, але координати відраховуються не відносно документа, а щодо робочої області вікна, т. Е. До координат треба додати свідчення скроллера: document.onmousemove = function () {mousex = event.clientX + document.body.scrollLeft mousey = event.clientY + document.body.scrollTop return true}

Поєднуючи функції для різних браузерів воєдино, отримуємо:

mousex = 0 mousey = 0 if (isNetscape4) document.captureEvents (Event.MOUSEMOVE) if (isMSIE || isOpera7) {document.onmousemove = function () {mousex = event.clientX + document.body.scrollLeft mousey = event.clientY + document.body.scrollTop return true}} else if (isOpera) {document.onmousemove = function () {mousex = event.clientX mousey = event.clientY return true}} else if (isNetscape4 || isMozilla) {document.onmousemove = function (e) {mousex = e.pageX mousey = e.pageY return true}}

Само собою, не забудьте спочатку визначити браузер .

В Opera подія переміщення миші буде відловлювати тільки тоді, коли воно буде відбуватися над вмістом документа. т. е. якщо, наприклад, документ короткий і займає лише половину вікна браузера, то подія буде відзначатися тільки на верхній половині вікна.

Корисні посилання

(В основному - англомовні, якщо не вказано особливо)

Visibility = isNetscape4?
Quot;?

Новости

Banwar.org
Наша совместная команда Banwar.org. Сайт казино "Пари Матч" теперь доступен для всех желающих, жаждущих волнения и азартных приключений.