Ошибка в скрипте? на safari и ie - display: none не срабатывает

154

22 марта 2019, 12:30

Не могу скрыть в указанных браузерах один параграф. Мне нужно убрать предложение о бесплатном звонке именно из safari и ie, т.к. виджет "Позвонить с сайта бесплатно" в этих браузерах не работает.

С помощью одного из участников этого форума у меня теперь есть скрипт, которым я получаю данные о браузере пользователя. И в зависимости от браузера подгружаю соответствующие стили.

function get_name_browser(){ 
    // получаем данные userAgent 
    var ua = navigator.userAgent;     
    // с помощью регулярного выражения 
    // ищем упоминание названия браузера 
    if (ua.search(/Chrome/) > 0) return false; 
    if (ua.search(/Firefox/) > 0) return  false; 
    if (ua.search(/Opera/) > 0) return  false; 
    if (ua.search(/Safari/) > 0) return 'Safari'; 
    if (ua.search(/MSIE/) > 0) return 'IE'; 
    if (ua.search(/msedge/) > 0) return 'IE'; 
    return false; 
} 
 
 
// сравниваем название и подключаем нужный css 
 
if (get_name_browser() == "Safari") { 
 document.write('<link rel="stylesheet" href="safari.css">'); 
} 
if (get_name_browser() == "IE") { 
 document.write('<link rel="stylesheet" href="IE.css">'); 
}

@media (max-width : 800px) 
{  
    .show-on-mobile { display: inline; } 
    .hide-on-mobile { display: none; } 
    .except-ie-safari { display: none;} 
} 
  
@media (min-width: 801px)    
{    
    .show-on-mobile { display: none; } 
    .hide-on-mobile { display: inline; } 
    .except-ie-safari { display: none; } 
}

<p class="except-ie-safari" style="text-align: center;"> бесплатным 
            звонком с сайта </p>

Но в ie и safari p class="except-ie-safari" не убирается.

display: none не срабатывает в этих браузерах.

Как победить? Спасибо.

Пробовала еще так:

if (get_name_browser() === "Safari" || get_name_browser() === "IE") { 
  document.getElementByClass("except-ie-safari").classList.add("hide-ie-safari"); 
}

.except-ie-safari.hide-ie-safari { display: none; }

<p class="except-ie-safari" style="text-align: center;"> бесплатным звонком с сайта </p>

Но, видимо, что-то напутала. Я js не владею, к сожалению.

Пробовала индекс добавлять: ...

[0].style.display = 'none';

Пробовала класс добавлять (по совету из комментариев):

if (get_name_browser() === "Safari" || get_name_browser() === "IE") { 
  document.getElementsByClassName("except-ie-safari").classList.add("hide-ie-safari"); 
}

Результат нулевой

Answer 1

В Вашем скрипте было несколько синтаксических ошибок. В таких случаях полезно открыть консоль браузера и посмотреть там сообщения об ошибках.

Не знаю, где Вы взяли скрипт для определения браузера, но у меня ни Edge, ни IE, ни Opera им не определяются.

https://stackoverflow.com/questions/9847580/how-to-detect-safari-chrome-ie-firefox-and-opera-browser

function get_name_browser() { 
  // �������� ������ userAgent 
  var ua = navigator.userAgent; 
  // � ������� ����������� ��������� 
  // ���� ���������� �������� �������� 
  if (ua.search(/chrome/i) > 0) return 'Chrome'; 
  if (ua.search(/firefox/i) > 0) return 'Firefox'; 
  if (ua.search(/opera/i) > 0) return 'Opera'; 
  if (ua.search(/safari/i) > 0) return 'Safari'; 
  if (ua.search(/MSIE/i) > 0) return 'IE'; 
  if (ua.search(/msedge/i) > 0) return 'IE'; 
 
  return 'unknown'; 
} 
 
// ���������� �������� � ���������� ������ css 
 
if (get_name_browser() === "Safari") { 
  console.log("adding Safari css"); 
  document.write('<link rel="stylesheet" href="safari.css">'); 
} 
if (get_name_browser() === "IE") { 
  console.log("adding IE css"); 
  document.write('<link rel="stylesheet" href="IE.css">'); 
} 
 
window.addEventListener("load", function() { 
  console.log(navigator.userAgent); 
  console.log(get_name_browser()); 
 
  var excepts = document.getElementsByClassName('except-' + get_name_browser().toLowerCase()); 
  for (var i = 0; i < excepts.length; i++) { 
    //excepts[i].style.display = 'none'; // !!! uncomment this line 
    excepts[i].style.color = 'red'; 
  } 
});

.ua { 
  background: lightGreen; 
  border: 1px solid black; 
  padding: 5px; 
  margin-bottom: 5px; 
}

<div class="ua except-chrome">Chrome</div> 
<div class="ua except-firefox">Firefox</div> 
<div class="ua except-opera">Opera</div> 
<div class="ua except-safari">Safari</div> 
<div class="ua except-ie">IE</div> 
<div class="ua except-safari except-ie">Safari & IE</div>

Answer 2

Если определяется ie или safari, то просто добавлять элементу который нужно скрыть display: none. Зачем тянуть css?

if (get_name_browser() === "Safari" || get_name_browser() === "IE") {
  document.getElementById('paragraph').style.display = "none";
}

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Проверять input поле на ввод чисел, если число начинается с 2, отображать одну картинку, если с 52 то другую картину

Есть инпут

142

javascript

Две функции в одном javascript

Есть строчка

145

javascript

Как мне реализовать select в react?

Пытаюсь понять как работает select вместе с react+reduxНе пойму как мне изменять state по событию handleChange, тоесть записать выбранный параметр, так как...

146

javascript

Поиск и замена в таблице

Как в таблице найти строку и в этой строке заменить одно значение?

153