Совместимость JavaScript уже давно стала серьезной проблемой для веб -разработчиков. Различия между формальными спецификациями, фактическими стандартами и различными реализациями заставили многих разработчиков страдать днем и ночью. С этой целью совместимость с JavaScript IE и Firefox в основном суммирована из следующих различий:
Кода -копия выглядит следующим образом:
1. Различия между функциями и методами;
2. Стиль доступ и настройки;
3. DOM Метод и ссылка на объект;
4. Обработка событий;
5. Лечение совместимости для других различий.
1. Различия между функциями и методами
1. Метод getyear ()
[Инструкции по анализу] Давайте посмотрим на следующий код:
Кода -копия выглядит следующим образом:
var Year = new Date (). getyear ();
document.write (год);
Дата, которую вы получаете в IE,-«2010», а дата, которую вы видите в Firefox,-«110», главным образом потому, что в Firefox Getyear возвращает значение «текущий год-1900».
【Обработка совместимости】 Добавьте к суду года, например:
Кода -копия выглядит следующим образом:
var Year = new Date (). getyear ();
Год = (год <1900? (1900+Год): Год);
document.write (год);
Вы также можете позвонить в это через
Кода -копия выглядит следующим образом:
var Year = new Date (). electiear ();
document.write (год);
2. eval () функция
[Примечание анализа] В т.е. вы можете использовать Eval ("iDname") или getElementById ("idName"), чтобы получить HTML -объекты с iDname; В Firefox вы можете использовать только GetElementById («idName»), чтобы получить HTML -объекты с idName.
[Обработка совместимости] Используйте GetElementById ("iDname"), чтобы получить объект HTML с iDname с iDname.
3. const ratport
[Анализ примечание] Ключевое слово const не может быть использовано в IE. нравиться:
Кода -копия выглядит следующим образом:
const constvar = 32;
В т.е. это синтаксическая ошибка.
【Совместимая обработка】 Не используйте const, используйте VAR вместо этого.
4. var
[Инструкции по анализу] См. Следующий код:
Кода -копия выглядит следующим образом:
echo = function (str) {
document.write (str);
}
Эта функция работает нормально по т.е., но в Firefox сообщалась об ошибке.
[Совместимая обработка] Нормально добавлять VAR перед эхо, и это является целью нашего упоминания о VAR.
5. const ange
[Анализ примечание] Ключевое слово const не может быть использовано в IE. Например, const constvar = 32; В т.е. это синтаксическая ошибка.
【Решение】 Не используйте const, используйте var вместо этого.
2. доступ к стилю и настройки
1. Атрибут "float" CSS
[Примечание анализа] Самым основным синтаксисом для JavaScript для доступа к данному значению CSS является: object.style.property, но некоторые свойства CSS такие же, как и названия слов в JavaScript, такие как «float», «для», «класс» и т. Д., А методы написания отличаются от разных браузеров.
В т.е. напишите это:
Кода -копия выглядит следующим образом:
document.getElementbyId ("заголовок"). style.stylefloat = "Left";
В Firefox напишите это:
Кода -копия выглядит следующим образом:
document.getElementbyId ("заголовок"). style.cssfloat = "Left";
[Обработка совместимости] Добавьте суждение перед написанием, чтобы определить, является ли браузер IE:
Кода -копия выглядит следующим образом:
if (document.all) {//
document.getElementbyId ("заголовок"). style.stylefloat = "Left";
}
else {// неопределенное, когда не т.е.
document.getElementbyId ("заголовок"). style.cssfloat = "Left";
}
2. Доступ «для» в тег <babel>
[Анализ примечание] Как и атрибут «float», он также требует использования невидимого синтаксического различия для доступа «для» в теге <babel>.
В т.е. напишите это:
Кода -копия выглядит следующим образом:
var myObject = document.getElementbyId ("mylabel");
var myattribute = myObject.getAttribute ("htmlfor");
В Firefox напишите это:
Кода -копия выглядит следующим образом:
var myObject = document.getElementbyId ("mylabel");
var myattribute = myObject.getAttribute ("for");
[Обработка совместимости] Решение состоит в том, чтобы сначала определить тип браузера.
3. Доступ и установите свойства класса
[Анализ примечание] Также потому, что класс - это слова JavaScript, эти два браузера используют различные методы JavaScript для получения этого свойства.
Как написать все версии IE до IE8.0:
Кода -копия выглядит следующим образом:
var myObject = document.getElementById ("заголовок");
var myattribute = myObject.getAttribute ("className");
Применимо к IE8.0 и написанию Firefox:
Кода -копия выглядит следующим образом:
var myObject = document.getElementById ("заголовок");
var myattribute = myObject.getAttribute ("class");
Кроме того, при настройке атрибута класса с использованием setattribute () два браузера также имеют одинаковую разницу.
Кода -копия выглядит следующим образом:
SetAttribute ("className", значение);
Этот метод написания применим ко всем версиям IE до IE8.0. Примечание: IE8.0 не поддерживает атрибут "classname".
SetAttribute ("class", значение); подходит для IE8.0 и Firefox.
【Совместимая обработка】
Метод 1, напишите оба:
Кода -копия выглядит следующим образом:
var myObject = document.getElementById ("заголовок");
myobject.setattribute ("class", "classvalue");
myobject.setattribute ("classname", "classvalue");
// Установить класс заголовка в ClassValue
Метод 2: IE и FF поддержка объекта.
Кода -копия выглядит следующим образом:
var myObject = document.getElementById ("заголовок");
myobject.classname = "classvalue"; // Установить класс заголовка в ClassValue
Метод 3: Сначала судите тип браузера, а затем используйте соответствующий метод написания в соответствии с типом браузера.
4. Проблема распределения объекта и назначения высоты
[Примечание] Заявление, подобное obj.style.height = imgobj.height в Firefox, является недействительным.
【Совместимая обработка】 Использовать obj.style.height = imgobj.height + 'px';
5. Добавить стили
[Анализ примечание] В т.е. используйте метод addrule () для добавления стилей, таких как: styleSheet.Addrule («p», «Цвет: #CCC», styleSheet.length). Однако этот метод не совместим с FF и использует метод insetrule (), чтобы заменить его в FF. Например, styleSheet.InserTrule ("p {color: #ccc}", stylesheet.length).
【Совместимая обработка】
Кода -копия выглядит следующим образом:
if (stylesheet.insertrule) {
// insertrule () Метод
}еще{
// метод addrule ()
}
6. Финальный стиль
[Анализ Примечание] Иногда наши пользовательские стили потерпят неудачу, потому что происходит перекрытие стиля, например, стиль, определяемый селектором класса, и стиль, определяемый селектором метки, а в настоящее время последний недопустим. Затем необходимо использовать окончательный стиль. Окончательный стиль в IE написан как Ele.currentStyle. Имя атрибута. Стандартный метод написания в DOM заключается в использовании объекта Document.DefaultView, такого как Document.DefaultView.getComputEdStyle (Elel, NULL), который совместим с FF.
[Обработка совместимости] Сначала судите браузер (document.all), а затем выполните приведенный выше метод.
3. Метод DOM и ссылка на объект
1. getElementbyId
[Инструкции по анализу] Давайте посмотрим на набор кодов:
<!-доступ к объекту ввода 1->
Кода -копия выглядит следующим образом:
<input id = "id" type = "кнопка"
value = "Нажмите меня" ōnclick = "alert (id.value)"/>
В Firefox кнопка не отвечает, в т.е., это нормально, потому что для т.е. идентификатор элемента HTML может использоваться непосредственно в качестве имени переменной в сценарии, но не в Firefox.
[Обработка совместимости] Попробуйте использовать W3C DOM Writing. При доступе к объектам используйте Document.getElementById («ID»), чтобы получить доступ к объекту с помощью идентификатора, и идентификатор должен быть уникальным на странице. Кроме того, при доступе к объектам с именем тега используйте document.getElementsbytagname ("div") [0]. Этот метод поддерживается большим количеством браузеров.
<!-Доступ к объекту ввода 2->
Кода -копия выглядит следующим образом:
<input id = "id" type = "cutting" value = "Нажмите меня"
onclick = "alert (document.getElementById ('id'). Value)" />
2. Доступ к объекту класса коллекции
[Анализ примечание] Под т.е. вы можете использовать () или [], чтобы получить объект класса коллекции; Под Firefox вы можете использовать только [], чтобы получить объект класса коллекции. нравиться:
document.write (document.forms ("formname"). src);
// этот метод написания может получить доступ к атрибуту SCRC объекта формы в соответствии с IE
【Обработка совместимости】 Изменение document.forms ("formname") на Document.forms ["formname"]. Используйте [], чтобы получить объекты класса сбора в едином порядке.
3. Ссылка на кадр
[Анализ примечание] IE может получить доступ к объекту окна, соответствующего этому кадру с помощью идентификатора или имени, в то время как Firefox может получить доступ к объекту окна, соответствующего этому кадру с помощью имени.
Например, если указанный выше тег кадра записан в HTM в самом верхнем окне, вы можете получить к нему доступ
Т.е. window.top.frameid или window.top.frameName для доступа к этому объекту окна;
Firefox: только window.top.frameName можно использовать для доступа к этому объекту окна.
【Совместимая обработка】 Используйте имя кадра для доступа к объектам кадра. Кроме того, как IE, так и Firefox могут быть использованы для
window.document.getElementbyId ("frameId") для доступа к этому объекту кадра.
4. ParentElement
[Анализ Описание] IE поддерживает с использованием ParentElement и ParentNode для получения родительских узлов. Firefox может использовать только ParentNode.
[Обработка совместимости] Поскольку как Firefox, так и IE поддерживают DOM, ParentNode используется для доступа к родительскому узлу.
5. Операция таблицы
[Анализ примечание] В таблице в соответствии с т.е., независимо от того, вставляется ли она с innerhtml или appendchild, он не имеет никакого эффекта, но другие браузеры отображают его обычно.
[Совместимая обработка] Решение состоит в том, чтобы добавить <tr> к элементу <Tbody> таблицы, как показано ниже:
Кода -копия выглядит следующим образом:
var row = document.createElement ("tr");
var cell = document.createElement ("td");
var cell_text = document.createTextNode ("вставлено контент");
cell.AppendChild (cell_text);
row.appendchild (cell);
document.getElementsbytagname ("tbody") [0] .appendchild (row);
6. Удалить узлы removenode () и removechild ()
[Анализ примечание] AppendNode может использоваться обычно в IE и Firefox, но Removenode может использоваться только в IE.
Функция метода Removenode состоит в том, чтобы удалить узел, причем синтаксис является Node.Removenode (false) или Node.Removenode (true), а возвращаемое значение - удаленный узел.
Removenode (false) означает, что только указанный узел удаляется, а затем исходный дочерний узел этого узла продвигается до дочернего узла исходного родительского узла.
Removenode (true) означает удаление указанного узла и всех его подчиненных узлов. Удаленный узел становится узел -сиротой и больше не имеет дочернего узла и родительского узла.
[Обработка совместимости] Узлы в Firefox не имеют метода Removenode, поэтому их можно заменить только методом RemoveChild. Сначала вернитесь в родительский узел и удалите узел, который будет удален из родительского узла.
node.parentnode.removechild (node);
// Для того, чтобы использовать как IE, так и Firefox обычно, возьмите родительский узел предыдущего слоя, а затем удалите.
7. Узлы, полученные детьми
[Анализ Примечание] Значение подростка ChildNodes отличается в IE и Firefox. Давайте посмотрим на следующий код:
Кода -копия выглядит следующим образом:
<ul id = "main">
<li> 1 </li>
<li> 2 </li>
<li> 3 </li>
</ul>
<input type = кнопка значение = "Нажмите меня!" onclick =
"Alert (document.getElementById ('main'). Childnodes.length)">
Работая с IE и Firefox соответственно, результат IE составляет 3, в то время как Firefox - 7. Firefox использует спецификацию DOM, а «#Text» означает текст (фактически бессмысленные пространства и разрывы линий и т. Д.) Также будет проанализировано в узел в Firefox. В т.е. только текст с практическим значением будет проанализирован в «#Text».
【Совместимая обработка】
Метод 1: При получении детских узлов вы можете избежать этой проблемы с помощью node.getelementsbytagname (). Тем не менее, getElementsbytagname, очевидно, не так хорош, как использование детей для прохождения сложных структур DOM, потому что дети могут лучше справиться с иерархией DOM.
Метод 2. В фактическом использовании, когда Firefox пересекает детские узлы, вы можете также добавить его в цикл:
if (childnode.nodename == "#text") продолжить; // или использовать nodetype == 1.
Это позволяет пропустить несколько текстовых узлов.
Дальнейшее чтение
«Разница между детьми в IE и Firefox»
8. Firefox не может поддержать внутренний текст
[Анализ примечание] Firefox не поддерживает внутренний текст, он поддерживает TextContent для реализации внутреннего текста, но TextContent не рассматривает такие элементы, как внутренний текст, поэтому он не полностью совместим с IE. Если вы не используете TextContent, строка не содержит HTML -код, который также может быть заменен Innerhtml. Вы также можете написать метод для его реализации, пожалуйста, обратитесь к статье «Реализация внутреннего текста для Firefox».
【Сравните обработку】 Сравните, оценивая тип браузера:
Кода -копия выглядит следующим образом:
if (document.all) {
document.getElementById ('element'). innerText = "my Text";
} еще{
document.getElementById ('element'). TextContent = "My Text";
}
4. Обработка событий
Если обработка событий участвует при использовании JavaScript, вам необходимо знать различия между событиями в разных браузерах. Существует три основные модели событий JavaScript (см. «Поддержка трех моделей событий одновременно», которые являются NN4, IE4+ и W3C/Safar.
1. Window.event
【Инструкции по анализу】 сначала посмотрите на кусок кода
Кода -копия выглядит следующим образом:
Функция et ()
{
Alert (Event); // IE: [объект]
}
Результатом приведенного выше кода, работающего в IE, является [объект], но его нельзя запустить в Firefox.
Поскольку событие может использоваться непосредственно в качестве свойства оконного объекта в IE, но в Firefox используется модель W3C, которая распространяет события с помощью метода передачи параметров, то есть вам необходимо предоставить интерфейс ответа на событие для вашей функции.
[Обработка совместимости] Добавьте суждение о событии и получите правильное событие в соответствии с браузером:
Кода -копия выглядит следующим образом:
Функция et ()
{
evt = evt? evt: (window.event? window.event: null);
// Совместим с IE и Firefox
предупреждение (EVT);
}
2. Приобретение значения клавиатуры
[Анализ примечание] Методы получения значений клавиатуры от IE и Firefox различны. Можно понимать, что событие. Который под Firefox эквивалентно событию. Keycode под IE. Для различий друг друга, пожалуйста, обратитесь к «тесту совместимости для KeyCode, который и Charcode в событиях клавиатуры»
【Совместимая обработка】
Кода -копия выглядит следующим образом:
Функция mykeypress (evt) {
// Совместим с IE и Firefox для получения объекта QueyboardEvent
evt = (evt)? evt: ((window.event)? window.event: "")
// Совместим с IE и Firefox для получения значения ключа объекта KeyboardEvent
var key = evt.keycode? evt.keycode: evt.which;
if (evt.ctrlkey && (key == 13 || key == 10)) {
// ctrl и enter были нажаты одновременно
// что -то делать;
}
}
3. Получение источника события
[Примечание анализа] При использовании делегатов событий мы можем определить, какой элемент происходит через получение источника событий. Однако в IE объект события имеет свойство Srcelement, но нет целевого свойства; В Firefox ровный объект имеет целевое свойство, но нет свойства Srcelement.
【Совместимая обработка】
Кода -копия выглядит следующим образом:
ele = function (evt) {// захватить объект, который действует текущее событие
evt = evt || window.event;
Возвращаться
(obj = event.srcelement? Event.srcelement: event.target;);
}
4. Мониторинг событий
[Анализ Примечание] С точки зрения прослушивания и обработки событий, IE предоставляет два интерфейса: AttactEvent и DepachEvent, в то время как Firefox предоставляет addEventListener и RemoveEventListener.
[Обработка совместимости] Простая обработка совместимости состоит в том, чтобы инкапсулировать эти два набора интерфейсов:
Кода -копия выглядит следующим образом:
Функция addEvent (elem, eventname, andler) {
if (elem.attachevent) {
elem.attachevent ("on" + eventname, function () {
handler.call (elem)});
// Использовать функцию обратного вызова () здесь, пусть это пункт Elem
} else if (elem.addeventListener) {
elem.addeventlistener (EventName, Handler, False);
}
}
функция RemoveEvent (elem, EventName, Handler) {
if (elem.detachevent) {
elem.detachevent ("on" + eventname, function () {
handler.call (elem)});
// Использовать функцию обратного вызова () здесь, пусть это пункт Elem
} else if (elem.removeeventlistener) {
elem.removeeventListener (EventName, Handler, False);
}
}
Следует отметить, что при Firefox это в функции обработки событий указывает на сам слушанный элемент, но в IE вы можете использовать вызов функции обратного вызова, чтобы дать текущий контекст указывать на прослушанный элемент.
5. Положение мыши
[Анализ примечание] В соответствии с т.е. ровным объектом есть атрибуты x и y, но нет атрибутов Pagex и Pagey; Под Firefox у ровного объекта есть атрибуты Pagex и Pagey, но нет атрибутов x и y.
[Обработка совместимости] Используйте mx (mx = event.x? Абсолютная позиция должна рассматриваться в сложных точках
Кода -копия выглядит следующим образом:
функция getabspoint (e) {
var x = e.offsetleft, y = e.offsettop;
while (e = e.offsetparent) {
x += e.offsetleft;
y += e.offsettop;
}
Alert ("x:" + x + "," + "y:" + y);
}
5. Совместимость лечения других различий
1. Xmlhttprequest
[Анализ примечание] new ActivexObject ("microsoft.xmlhttp"); работает только в IE. Firefox не поддерживает его, но поддерживает Xmlhttprequest.
【Совместимая обработка】
Кода -копия выглядит следующим образом:
function createxhr () {
var xhr = null;
if (window.xmlhttprequest) {
xhr = new ActivexObject ("msxml2.xmlhttp");
}еще{
пытаться {
xhr = new ActivexObject ("microsoft.xmlhttp");
}
ловить() {
xhr = null;
}
}
if (! xhr) возврат;
вернуть XHR;
}
2. Модальные и не модальные окна
[Примечание анализа] В IE модальные и немодальные окна могут быть открыты через Showmodaldialog и ShowmodelessDialog, но Firefox не поддерживает их.
[Решение] Используйте window.open (pageurl, имя, параметры), чтобы открыть новое окно. Если вам нужно пройти параметры, вы можете использовать кадр или iframe.
3. Проблема атрибута input.type
Свойство input.type в соответствии с т.е. только для чтения, но оно может быть изменено в Firefox.
4. Операция опции на Select Element
Установки вариантов, т.е. и Firefox написаны по -разному:
Firefox: может быть установлен напрямую
Кода -копия выглядит следующим образом:
Option.Text = 'fooooooooo';
Т.е. только установлен
Кода -копия выглядит следующим образом:
option.innerhtml = 'fooooooo';
Метод удаления параметра выбора:
Firefox: Да
Кода -копия выглядит следующим образом:
select.options.remove (selectedIndex);
IE7: можно использовать
Кода -копия выглядит следующим образом:
select.options [i] = null;
IE6: нужно написать
Кода -копия выглядит следующим образом:
select.options [i] .outerhtml = null;
5. Анализ объектов IMG Alt и Title
[Анализ примечание] Объект IMG имеет два атрибута: ALT и заголовок. Разница в том, что Alt: подсказка, когда фотография не существует или нагрузка неверна.
Название: Описание кончика фото. Если заголовок не определен в IE, ALT также может использоваться в качестве кончика IMG, но в Firefox оба используются точно в соответствии с определением в стандарте.
При определении объекта IMG.
[Совместимая обработка] Лучше всего писать все объекты ALT и заголовок, чтобы гарантировать, что их можно обычно использовать в различных браузерах.
6. Проблема обновления IMG SRC
[Инструкции по анализу] Давайте сначала посмотрим на код:
Кода -копия выглядит следующим образом:
<img id = "pic" onclick = "this.src = 'a.jpg'" src = "aa.jpg" style = "cursor: pointer"/>
В соответствии с IE этот код может использоваться для обновления изображений, но не под Firefox. В основном это проблема кэширования.
[Обработка совместимости] Добавление случайного числа после его решения:
Кода -копия выглядит следующим образом:
<img id = "pic" onclick = "javascript: this.src = this.src+'?'+math.random ()" src = "a.jpg" style = "cursor: pointer"/>
Суммировать
Есть много различий в JavaScript между IE и Firefox. Чтобы быть совместимым, я думаю, что необходимо организовать некоторые общие в библиотеку JS, таких как операции DOM, обработка событий, запросы xmlhttprequest и т. Д., Или также вы можете использовать некоторые существующие библиотеки (такие как jQuery, Yui, Extjs и т. Д.). Тем не менее, я думаю, что все еще необходимо понять эти различия, что очень полезно для участия в совместимости и коде удобства использования.
Всегда есть больше решений, чем проблем. Независимо от того, как браузер совместим, всегда можно решить фронтальную разработку!