Блог

Главная - Вопросы по программированию - Определение позиции: исправлено с помощью javascript

Определение позиции: исправлено с помощью javascript

#javascript #jquery #mobile

#javascript #jquery #Мобильный

Вопрос:

Я пытаюсь использовать скрипт Kangax отсюда: http://kangax.github.com/cft для обнаружения тех браузеров, которые «правильно» реализуют позицию: исправлено, как это делают настольные браузеры, по сравнению с мобильными браузерами, чтобы я мог использовать jQuery для подделки в мобильных браузерах.

Код из Kangax работает нормально. Однако, когда я включаю его на свою страницу, этого не происходит. Я думаю, что это должно быть какой-то очевидной ошибкой. Любая помощь была бы действительно оценена!

 ////Detect whether position:fixed works (mobile browsers). Use JS to position #navwrap if not.
  //Kangax's script - begins at "function" on the next line.
function detected() {
    var container = document.body;
    if (document.createElement amp;amp;
    container amp;amp; container.appendChild amp;amp; container.removeChild) {
        var el = document.createElement("div");
        if (!el.getBoundingClientRect) {
            return null;
        }
        el.innerHTML = "x";
        el.style.cssText = "position:fixed;top:100px;";
        container.appendChild(el);
        var originalHeight = container.style.height, originalScrollTop = container.scrollTop;
        container.style.height = "3000px";
        container.scrollTop = 500;
        var elementTop = el.getBoundingClientRect().top;
        container.style.height = originalHeight;
        var isSupported = elementTop === 100;
        container.removeChild(el);
        container.scrollTop = originalScrollTop;
        return isSupported;
    }
    return null;
};
if (detected()) {
    alert ('non-mobile');
}
    else {
        alert ('mobile');
    }

В случае, если это поможет, исходный код (максимально урезанный):

 <body>
<h2>Position Fixed Test</h2>    

<script>    
(function(__global){
// make sure `window` resolves to a global object
var window = this;
var features = { };
features.IS_POSITION_FIXED_SUPPORTED = (features.__IS_POSITION_FIXED_SUPPORTED = function () {
var container = document.body;
if (document.createElement amp;amp;
  container amp;amp; container.appendChild amp;amp; container.removeChild) {
  var el = document.createElement("div");
  if (!el.getBoundingClientRect) {
      return null;
  }
  el.innerHTML = "x";
  el.style.cssText = "position:fixed;top:100px;";
  container.appendChild(el);
  var originalHeight = container.style.height, originalScrollTop = container.scrollTop;
  container.style.height = "3000px";
  container.scrollTop = 500;
  var elementTop = el.getBoundingClientRect().top;
  container.style.height = originalHeight;
  var isSupported = elementTop === 100;
  container.removeChild(el);
  container.scrollTop = originalScrollTop;
  return isSupported;
}
return null;
})();
__global.__features = features;
})(this);

(function(){
function detect() {
 for (var i=0; i<1; i  ) {
  var testResult = __features['IS_POSITION_FIXED_SUPPORTED'];
  alert ( testResult );
  i  ;
 }
};
detect(); 
})();
</script>

</body>

Комментарии:

1. Оригинальный пример на kangax.github.com/cft успешно различает настольные и мобильные браузеры, но мой этого не делает. Я предполагаю, что я неправильно тестирую значение null против ISSU supported??

2. что вы видите и когда

3. Я всегда получаю предупреждение «не поддерживается». Я добавил исходный код выше. Этот код может определять, является ли браузер мобильным или нет. Мой не может. Приветствия.

Ответ №1:

Я предполагаю, что вы всегда получаете non-mobile . Вы проверяете, что detected существует, не выполняя функцию. Измените конец вашего JavaScript на

 if (detected()) {
  alert ('non-mobile');
}
else {
    alert ('mobile');
}

Есть ли причина, по которой вы создаете функцию как анонимную функцию, назначенную переменной, а не как именованную функцию, например

 function detected(){
  // Function content.
}

Комментарии:

1. Спасибо за ответ. Я включил это, но без изменений : (Я также исправил именованную функцию против var — просто noob-ness.

2. Какой результат вы получаете? Код, который вы предоставили, отлично работает для меня http://jsfiddle.net/seRr3 / . Какое предупреждение вы получаете?

3. @phil — нет ничего плохого в объявлении функции как переменной, просто вы можете вызывать функцию только тогда, когда она находится в пределах области видимости.

4. Вы абсолютно правы в том, что он запускается и выдает предупреждение, но не то, которое я ожидаю.. Независимо от того, тестирую ли я на мобильном устройстве или на настольном компьютере, я получаю «not-mobile». Однако, когда я запускаю исходный скрипт на kangax.github.com/cft это успешно различает их — см. stickmanphotography.co.uk/box/ipad.png и stickmanphotography.co.uk/box/desktop.png для вывода оригинала.

Ответ №2:

Отсортировано. Спасибо за информацию.

Оказывается, моя версия кода работает нормально, но ее нужно поместить в тело страницы. Если это находится в Head, даже в вызове DOM Ready этого не происходит.

Просто нужно выяснить, почему сейчас! Но, по крайней мере, код работает.