Проблемы совместимости браузера легко игнорировать, но наиболее важная часть фактического развития. Прежде чем мы поговорим о проблемах совместимости старых версий браузеров, мы должны сначала понять, что такое обнаружение возможностей. Для определения того, есть ли у браузера такие возможности, есть ли у браузера, то есть определить, поддерживает ли текущий браузер атрибуты или методы, которые будут вызваны. Вот несколько кратких представлений.
1. Внутренний текст и внутренний
1) Функции внутреннего текста и внутреннего контента одинаковы
2) Поддержка Innertext Browser перед IE8
3) Внутренняя старая версия поддержки Firefox
4) Новая версия браузера поддерживает оба метода
1 // Старая версия браузеров совместима с InnerText и InnerContent2 if (element.textContent) {3 return element.textContent; 4} else {5 return element.innerText; 6}2. Получите вопросы совместимости братских узлов/элементов
1) Братские узлы, все браузеры поддерживают
①nexting следующего узела брата, который может быть неэлементным узлом; Будет получен текстовый узел
② Предыдущий текстовый узел будет получен
2) Элементы брата, IE8 не поддерживал раньше
① Предыдущие изделия
②nextelementsIbl
// Совместимый браузер // Получить следующую следующую функцию сестра getNextElement (element) {// обнаружение возможностей if (element.nextelementsibling) {return element.nextelementsibling; } else {var node = element.nextibling; while (node && node.nodetype! == 1) {node = node.nextibling; } return node; }} /*** вернуть предыдущий элемент*@param element*@returns {*}*/function getPreviouselement (element) {if (element.previouselementsibling) {return element.previouselementementsibling; } else {var el = element.previoussibling; while (el && el.nodeType! == 1) {el = el.previousSibling; } return el; }} /*** Браузер, совместимый с первым элементом FirstElementchild*@param parent*@returns {*}*/function getFirstelement (parent) {if (parent.firstelementchild) {return parent.firstelementchild; } else {var el = parent.firstchild; while (el && el.nodetype! == 1) {el = el.nextibling; } return el; }} /*** вернуть последний элемент*@param parent*@returns {*}*/function getLastelement (parent) {if (parent.lastelementchild) {return parent.lastelementchild; } else {var el = parent.lastchild; while (el && el.nodeType! == 1) {el = el.previousSibling; } return el; }} /*** Получить все элементы сестра текущего элемента*@param element*@returns {array}*/function сестры (элемент) {if (! Element) return; var elements = []; var el = element.previoussibling; while (el) {if (el.nodeType === 1) {elements.push (el); } el = el.previousSibling; } el = element.previousSibling; while (el) {if (el.nodeType === 1) {elements.push (el); } el = el.nextibling; } el = element.previousSibling; } return Elements;}3. array.filter ();
// Проверьте все элементы с указанной функцией и создать новый массив, содержащий все элементы, которые прошли тест
// совместим со старой средой if (! Array.prototype.filter) {array.prototype.filter = function (fun/ *, thisarg */) {"strict"; if (this === void 0 || this === null) бросить новый TypeError (); var t = object (это); var len = t.length >>> 0; if (typeof Fun! == "функция") бросить новый TypeError (); var res = []; var thisArg = arguments.length> = 2? Аргументы [1]: void 0; for (var i = 0; i <len; i ++) {if (i in t) {var val = t [i]; // Примечание. Технически это должно быть объективно. DefineProperty AT // Следующий индекс, так как PUSH может зависеть // свойства на Object.Prototype и Array.prototype. // но этот метод новый, и столкновения должны быть // редкими, поэтому используйте более совместимую альтернативу. if (fun.call (thisarg, val, i, t)) res.push (val); }} return res; };}4. array.foreach ();
// Traverse Array
// Совместим со старыми средами // производственные этапы ECMA-262, издание 5, 15.4.4.18// Справочник: http://es5.github.io/#x15.4.4.18if (! Arrray.prototype.foreach) {array.prototype.foreach = function (callback, thisArg) {var t, k; if (this == null) {бросить новый тип иерр ('это NULL или не определено'); } // 1. Пусть o будет результатом вызова toObject () передачи // | Это | ценность как аргумент. var O = Object (this); // 2. Пусть Lenvalue будет результатом вызова внутреннего // метода o с аргументом «длина». // 3. Пусть Лен будет touint32 (Lenvalue). var len = o.length >>> 0; // 4. Если iScallable (обратный вызов) является ложным, добавьте исключение TypeError. // См.: Http://es5.github.com/#x9.11 if (typeof обратный вызов! == "function") {Throw New TypeError (обратный вызов + 'не является функцией'); } // 5. Если этот АРГ был поставлен, пусть t thisArg; иначе пусть // не будет неопределенным. if (arguments.length> 1) {t = thisArg; } // 6. Пусть k будет 0 k = 0; // 7. Повторите, пока k <len while (k <len) {var kvalue; // а. Пусть PK будет ToString (k). // это неявно для операторов LHS оператора в операторе // b. Пусть Kpresent будет результатом вызова HasProperty // внутренний метод O с аргументом PK. // Этот шаг можно объединить с C // c. Если kpresent это правда, то if (k in o) {// i. Пусть kvalue будет результатом вызова GET внутреннего // метода O с аргументом PK. kvalue = o [k]; // ii. Вызовите внутренний метод вызова обратного вызова с // Список этого значения и аргументов, содержащих Kvalue, K и O. callback.call (t, kvalue, k, o); } // d. Увеличить k на 1. K ++; } // 8. вернуть неопределенные};}5. Регистрационное мероприятие
.AdDeventListener = function (тип, слушатель, useCapture) {};
// Имя первого параметра
// функция обработчика событий второго параметра (слушатель)
// Третий параметр True захватывает ложный пузырь
// это будет поддерживаться только после IE9
// Совместим со старой средой
var eventTools = {addEventListener: function (element, eventName, слушатель) {// обнаружение способности if (element.addeventListener) {element.AddeventListener (eventName, слушатель, false); } else if (element.attachevent) {element.attachevent ("on" + eventname, слушатель); } else {element ["on" + eventName] = слушатель; }}, // Если вы хотите удалить события, вы не можете использовать анонимную функцию remoadEventListener: function (element, eventName, alluster) {if (element.removeeventListener) {element.RemoveEventListener (eventName, слушатель, false); } else if (element.detachevent) {// ie8 перед регистрацией.attachevent и удаление событий.detachevent element.detachevent ("on"+eventname, слушатель); } else {element ["on" + eventName] = null; }}};6. Объект события
1) Параметр события E - это объект события, стандартный метод сбора
btn.onclick = function (e) {}
2) e.eventphase Stage Event, IE8 не поддерживал его раньше
3) E.Target всегда является объектом, который запускает событие (кнопка нажала)
i) перед IE8 Srcelement
ii) Совместимый с браузером
var target = e.target || window.event.srcelement;
// Получить объект события, совместимый с браузером Getevent: function (e) {return e || window.event; // стандартный способ получения объекта E события; Window.Event Путь получения объекта события до IE8} // Совместимо с Target GetTarget: function (e) {return e.Target || E.srcelement; }7. Получите позицию мыши на странице
① Положение в визуальной области: e.clientx e.clienty
② Расположение в документе:
i) E.Pagex E.Pagey
ii) Совместимый с браузером
var scrolltop = document.documentelement.scrolltop || document.body.scrolltop; var Pagey = e.clienty + scrolltop;
8. Получите расстояние до прокрутки
// Совместимый браузер var scrolltop = document.documentelement.scrolltop || document.body.scrolltop;
9. Отменить выбор текста
// Совместим с Windows Browser Window.getSelection? window.getSelection (). RemovealLranges (): document.selection.empty ();
[Сводка] Это всего лишь частичное резюме, и вы также столкнетесь с различными проблемами совместимости браузера во время фактической разработки. Различные браузеры также будут столкнуться с различными проблемами адаптации на ПК и мобильных телефонах. Они ждут, когда детская обувь открывает и суммирует ~~ Я надеюсь, что это может вам помочь. Пожалуйста, дайте мне советы по недостаткам ~~~
Приведенный выше краткий анализ вопросов совместимости браузеров в JavaScript - это весь контент, которым я делюсь с вами. Я надеюсь, что вы можете дать вам ссылку, и я надеюсь, что вы сможете поддержать Wulin.com больше.