React как определить браузер
У меня есть сайт на ReactJS. Я хочу получать обратный вызов всякий раз, когда моя вкладка оказывается в фокусе или скрыта. Я наткнулся на API видимости страницы для этого, но не могу понять, как использовать его в ReactJS.
В каком методе жизненного цикла мне зарегистрировать обратный вызов для этого?
Если вы ищете пакет для быстрой интеграции календаря с выбором даты в ваше приложения, то библиотека Flatpickr отлично справится с этой задачей.
Обучение на практике - это проверенная тема для достижения успеха в любой области. Если вы знаете контекст фразы "Практика делает человека.
В 2022 году мы все слышим о трендах фронтенда (React, Vue), но мы не знаем, почему мы должны использовать эти фреймворки, когда их использовать, а.
react-router - это лучшая библиотека для работы с маршрутизацией в reactjs. С помощью react-router вы передаете состояние или данные от одного.
Ответы 6
Это должно работать:
Обновлено: то же самое касается «размытия», и он должен работать, когда вкладка становится скрытой.
Проверьте ответ @ Assaf для использования с крючками.
Вы не должны вызывать функцию при связывании, просто связывайте ее как window.addEventListener("focus", this.onfocus) . то же самое с отвязкой
Я использую window.addEventListener ('focus', method), но когда я нажимаю ссылку, предупреждение не выскакивает, но когда я перехожу на другую вкладку, просто чтобы имитировать «покинуть» и вернуться снова, срабатывает предупреждение, которое не хорошо. Я использую это внутри хука useEffect. У кого-нибудь есть идея?
Просто построил это с помощью хуков, начиная с React 16.8.
Он работает, когда я переключаю вкладки, но это не работает, если я перезагружаю страницу, а окно уже находится в фокусе. Я использовал точно такой же код. Есть ли причина, по которой это происходит?
Я нашел Эта библиотека. Это могло бы помочь.
Вот как я бы использовал его для решения вашей проблемы
Нет надежного метода для проверки, поэтому вам нужно объединить несколько методов вместе. Вот контекст для реагирующих крючков
Этот ответ не удаляет те же функции в removeEventListener , которые были добавлены встроенными.
@fresidue, теперь все в порядке?
Еще пришлось добавить document.addEventListener('visibilitychange', handleActivity) . В противном случае действие не обновляется, если, например, окно размыто, потому что вы открываете консоль, затем уменьшаете вкладку, а затем снова увеличиваете ее.
@AlbertSchilling, я вижу ту же строку в моем примере .
@ZiiMakc Извините, комментарий был задуман как подтверждение и объяснение, почему эта строка также была необходима.
Более полный и оптимизированный хук:
Выглядит интересно, не могли бы вы объяснить, что делает debounce и почему вы его используете?
Ни один из них не работал хорошо для того, что мне было нужно, а именно для определения того, переключался ли пользователь между вкладками или сворачивал ли браузер, дважды щелкнув значок на панели задач.
Они либо срабатывали несколько раз, но сумели зарегистрировать правильное состояние, не работали при сворачивании с помощью значка на панели задач или просто не успевали выполнять несколько действий одно за другим.
Поскольку мне нужно было делать запрос к серверу каждый раз, когда фокус менялся, вышеупомянутые ситуации были немного «нет».
Вот что я сделал:
В настоящее время, похоже, это работает очень хорошо, протестировано как в Chrome, так и в Firefox, все, что вам нужно сделать, это инициализировать его в основном компоненте или где угодно, и он будет отслеживать фокус окна для всех этих сценариев, и он сделает только один запрос сервера на действие.
Is there any way to detect IE browser with React and either redirect to a page or give any helpful message. I found something in JavaScript, but not sure how would I use it with React+TypeScript.
10 Answers 10
You are on the right track you can use these to conditionally render jsx or help with routing.
I have used the following with great success.
Please be aware they each stand a chance to deprecated due to browser changes.
I use them in React like this:
Then by calling in my main component to render the different browser specific elements.
Pseudo code might look something like this. (untested):
You could have this change modal content for instance, or even depending on your router have it call a function and redirect you to a help page. Please just let me know if you need an additional breakdown of where these parts each fit inside of the component.
It might be a good idea to look into a library like the one @Tallboy provided as that stands a better chance of being updated more regularly. Then just use the example I provided for the React integration.
Maybe try this. let isSafari = navigator.userAgent.indexOf("Safari") > -1; these methods are changed fairly often.
As mentioned, isChrome only works upto version 71. But can't use it for current version 95. This is not a solution for chrome then.
Not sure why but nobody mentioned this package: react-device-detect The package have a lot browsers checks, plus versions and some other info related. It's really small and it's updated.
react-device-detect it's also very small bundlephobia link
I don't think it's useful to put down this post. A package is a perfectly reasonable way to approach the issue, and does have several advantages, namely that the creator/contributors may have thought of edge cases that you haven't, and that what works and doesn't with device/browser detection changes frequently; I personally would rather not have to update my code every time it does.
Although I'm a bit late to the discussion, @LucasAndrade was only trying to be helpful. No matter how good one may be in programming, there will almost always be edge cases to miss.
@LucasAndrade Seems like someone deleted my comment, but it was in my question in case you missed it, not sure how would I use it with React+TypeScript . Packages are good until they get bugs and you overturn everything to update a package, only to realize its filled with bugs, then you spend extra time to downgrade. My theory is, write it yourself if you can. And for such a small problem, I don't think anyone should be using a package. And of course there needs to be a balance there, don't go in other direction and try to re-invent the wheel.
В веб-приложении я хочу отображать два разных меню, одно для мобильного устройства, другое для браузера рабочего стола. Я использую приложение Next.js с рендерингом на стороне сервера и библиотеку response-device-detect .
Если вы откроете его в браузере, переключитесь на мобильный вид и посмотрите в консоль, вы получите следующую ошибку:
Предупреждение: текстовое содержимое не соответствует. Сервер: «Отображается только в браузере» Клиент: «Отображается только на мобильных устройствах»
Это происходит потому, что рендеринг сервером определяет браузер, а клиент - мобильное устройство. Единственный обходной путь, который я нашел, - это сгенерировать оба и использовать CSS следующим образом:
Вместо библиотеки, но мне этот метод не очень нравится. Кто-нибудь знает, как правильно обрабатывать типы устройств в приложении SSR непосредственно в коде реакции?
Я думаю, что для этого банкомата нет решения, потому что рендеринг на стороне сервера, тогда информация браузера не зависит, а также относится к времени кеширования вашего ответа html.
ПОСЛЕДНЕЕ ОБНОВЛЕНИЕ:
Так что, если вы не против сделать это на стороне клиента, вы можете использовать динамический импорт, как предложено несколькими людьми ниже. Это будет для случаев использования, когда вы используете генерацию статической страницы.
Я создал компонент, который передает все экспорты react-device-detect как реквизиты (было бы разумно отфильтровать только необходимые экспорты, потому что тогда не будет дрожать деревья)
А затем, когда вы захотите использовать компонент, вы можете просто сделать
Лично я просто использую для этого ловушку, хотя метод начального реквизита лучше.
У меня была проблема в том, что анимация прокрутки раздражала на мобильных устройствах, поэтому я сделал компонент анимации прокрутки, основанный на устройстве;
Поэтому, после дальнейшего спуска в кроличью нору, лучшее решение, которое я придумал, - это использование response-device-detect в useEffect, если вы дополнительно проверите обнаружение устройства, вы заметите, что он экспортирует константы, которые устанавливаются через ua-parser-js lib
Это приводит к тому, что исходное устройство является сервером, что вызывает ложное обнаружение.
Я раздвоил репо, создал и добавил ssr-selector, который требует, чтобы вы пропустили пользовательский агент. что можно было бы сделать, используя исходные реквизиты
Из-за того, что iPad не предоставляет правильный или достаточно хорошо определенный пользовательский агент, см. Эту проблему , Решил создать ловушку, чтобы лучше определять устройство
Поскольку мне нужен пакет каждый раз, когда я вызываю эту ловушку, информация UA обновляется, а также исправляются предупреждения о рассинхронизации SSR.
Я думаю, это следует изменить на if ('ontouchstart' in window || (window?.Document && document instanceof Document)) return true; . Не уверен на 100%, но TS жалуется на это, а также есть это
А, я вижу, это нарушает упаковку. Я временно добавил interface Window < DocumentTouch: any; >в свой global.d.ts . На данный момент это работает: if ('ontouchstart' in window || (window?.DocumentTouch && document instanceof Document)) return true;
Я думаю, вам следует сделать это, используя getInitialProps на своей странице, поскольку он работает как на сервере, так и на клиенте, и получая тип устройства, сначала определяя, получаете ли вы только запрос для веб-страницы (так что вы все еще находитесь на server), или если вы выполняете повторный рендеринг (так что вы находитесь на клиенте).
Теперь вы можете использовать регулярное выражение, чтобы узнать, является ли устройство мобильным или настольным.
Теперь вы можете получить доступ к опоре isMobile, которое вернет либо true, либо false.
ОБНОВЛЕНИЕ
Начиная с версии Next 9.5.0, getInitialProps будет заменен на getStaticProps и getServerSideProps . В то время как getStaticProps предназначен для выборки статических данных, которые будут использоваться для создания html-страницы во время сборки, getServerSideProps генерирует страницу динамически при каждом запросе и получает объект context с req опора точно так же, как getInitialProps . Разница в том, что getServerSideProps не узнает navigator , потому что это только на стороне сервера. Использование также немного отличается, так как вам нужно экспортировать асинхронную функцию, а не объявлять метод в компоненте. Это будет работать так:
Обратите внимание: поскольку getServerSideProps и getStaticProps являются взаимоисключающими, вам необходимо отказаться от преимуществ SSG, предоставляемых getStaticProps , чтобы узнать тип устройства пользователя. Я бы посоветовал не использовать getServerSideProps для этой цели, если вам нужно просто обработать пару деталей стилизации. Если структура страницы сильно отличается в зависимости от типа устройства, возможно, это того стоит.
Итак, вы изучили основы JavaScript и хотите перейти к изучению структур данных. Мотивация для изучения/понимания Структур данных может быть разной.
Прошлая статья была первой из цикла статей о создании системы электронной коммерции с использованием Keystone.js, и она была посвящена главным образом.
Обучение на практике - это проверенная тема для достижения успеха в любой области. Если вы знаете контекст фразы "Практика делает человека.
В 2022 году мы все слышим о трендах фронтенда (React, Vue), но мы не знаем, почему мы должны использовать эти фреймворки, когда их использовать, а.
Сегодня я собираюсь вкратце рассказать о прототипах в JavaScript, а также представить и объяснить вам работу с базой данных MongoDB.
Ответы 8
Не говоря уже о том, что ответ, который вы только что отметили как правильный, идентичен моему ответу без перенаправления, о котором вы изначально просили.
Вы на правильном пути, вы можете использовать их для условного рендеринга jsx или помощи с маршрутизацией .
Я использовал следующее с большим успехом.
Имейте в виду, что каждый из них может быть устаревшим из-за изменений браузера.
Я использую их в React так:
Затем, вызвав в моем основном компоненте, чтобы отобразить различные элементы, специфичные для браузера.
Псевдокод может выглядеть примерно так . (не проверено):
Было бы неплохо заглянуть в библиотеку, подобную той, которую предоставил @Tallboy, поскольку у нее больше шансов на более регулярное обновление. Тогда просто используйте пример, который я предоставил для интеграции React.
Может быть, попробовать это . let isSafari = navigator.userAgent.indexOf ("Safari")> -1; эти методы меняются довольно часто.
Сейчас они устарели
В каждом браузере есть отдельный пользовательский агент, который вы можете проверить.
Конечно, клиент может подделать их, но, на мой взгляд, это более надежное долгосрочное решение.
Вы не можете напрямую использовать это, поскольку навигатор должен запускаться только во время / после рендеринга DOM.
Вы можете написать тест для IE вот так.
Это вся информация, которую вы можете получить из браузера своего клиента (с помощью реакции):
Несмотря на то, что я использую Chrome , он по-прежнему говорит, что Netscape для window.navigator.appName
Тот же результат для Firefox , Edge и IE
правильно .. Я основал хром в: "browserVersion1a": "5.0 (Macintosh; Intel Mac OS X 10_15_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.70 Safari/537.36" и "browserVersion1b": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.70 Safari/537.36"
Спасибо, я знаю, что это информативно, но не думаю, что это будет полезно. Поскольку вам придется много разобрать, чтобы получить имя. Плюс, если решат сменить формат, он перестанет работать. Я собираюсь пока придерживаться ответа @Shawn Matthews.
Это почти сломало меня, но я нашел кое-что, что кажется довольно простым и понятным, используйте имя поставщика. т.е. Google, Apple и т. д. navigator.vendor.includes('Apple') Надеюсь, это кому-то поможет.
Opera теперь использует Chromium, поэтому vendor также отображается как Google Inc. .
Не уверен, почему, но никто не упомянул этот пакет: реагировать-устройство-обнаруживать В пакете есть множество проверок браузеров, а также версии и некоторая другая информация. Он действительно маленький, и он обновлен.
Ты можешь использовать:
реагировать-устройство-обнаруживать это тоже очень маленький Bundlephobia ссылка
Не думаю, что стоит откладывать этот пост. Пакет - это совершенно разумный способ решения проблемы, и у него есть несколько преимуществ, а именно то, что создатель / участники могли подумать о крайних случаях, которых у вас нет, и о том, что работает, а что нет при обнаружении устройства / браузера. часто; Я лично предпочел бы не обновлять свой код каждый раз, когда это происходит.
Хотя я немного опоздал к обсуждению, @LucasAndrade только пытался быть полезным. Независимо от того, насколько хорош человек в программировании, почти всегда будут крайние случаи, которые нужно упустить.
@LucasAndrade Похоже, кто-то удалил мой комментарий, но он был в моем вопросе на случай, если вы его пропустили, not sure how would I use it with React+TypeScript . Пакеты хороши до тех пор, пока в них не появляются ошибки, и вы отменяете все, чтобы обновить пакет, только чтобы понять, что он полон ошибок, а затем вы тратите дополнительное время на откат. Моя теория такова: напишите сами, если можете. И для такой маленькой проблемы я не думаю, что кто-то должен использовать пакет. И, конечно же, здесь должен быть баланс, не идти в другом направлении и пытаться заново изобрести колесо.
Вопрос: как проверить версию браузера до подключения библиотек к проекту?
Заранее спасибо за любые советы!
Как правильно подобрать версию библиотек для MSVC2017
Установил я тут недавно QT5.13.1 и MSVC2017. У меня Windows 7 64 и процессор Intel. При запуске.
Как подключить строку подключения из конфигурационного файла к проекту
Добрый день! Мне нужно подключить строку подключения из файла app.config к приложению базы данных.
Как узнать версию и название браузера?
После нажатия на кнопку «Information» в 2-х текстовых полях появляется: 1 поле- информация о.
ASP, как узнать тип ОС и версию браузера?
Podsajite pojaluista kak uznati tip operationnoi sistemi polizovatelia, tip Internet browsera i.
Решение
объект Map очень нов, совместим только с ие11 и выше, опера 18 того же времени выхода.
Если вам действительно нужен его функционал, вот полифилл
Однако я бы на вашем месте пока отказался от него, заменив все мапы на обычные объекты (ассоциативные массивы). Используйте ассоциативный массив вместо объекта когда тип ключей не известен до момента исполнения, либо тип всех ключей и тип всех значений одинаковый.
Сам код проверки браузера и его версии, нагло взят со стаковерфлоу:
Подключение библиотек к проекту
Доброе времени суток. Перешел с билдера на Visual Studio (VB), создаю Windows Forms, надо работать.
Как проверить на версию?
Делаю апдейтер. Вылезла небольшая проблема, не знаю как решить. Допустим версия приложения: 1 Я.
Подключение своих созданных библиотек к проекту
Хочу создать библиотеку классов и потом ее использовать! как создать понимаю. а вот как ее потом.
Читайте также: