Если вы хотите отправлять данные с помощью jquery Ajax, тогда нет необходимости в теге формы и кнопке отправки

Есть ли способ сделать это с помощью JavaScript?

Если ваши данные доступны в этот момент, эта функция будет вызвана немедленно. Если это не так, он будет вызван, как только будут доступны данные.

Кроме того, ваш второй параметр для отображения неверен. Это должна быть функция, но проще использовать pluck. Https://github.com/sindresorhus/sort-keys Или вы можете использовать его с npm: API видимости страницы scrollHeight MDN ) теперь позволяет нам более точно определять когда страница скрыта для пользователя.

Текущая поддержка браузера:

  • Chrome 13
  • Internet Explorer 10
  • , но не в некоторых старых браузерах (в частности, Firefox & lt { ***} 22).
  • Opera 12.10 [ читать примечания Intl.NumberFormat

Добавьте следующий код в ваш файл JavaScript:

(function() {
  var hidden = "hidden";

  // Standards:
  if (hidden in document)
    document.addEventListener("visibilitychange", onchange);
  else if ((hidden = "mozHidden") in document)
    document.addEventListener("mozvisibilitychange", onchange);
  else if ((hidden = "webkitHidden") in document)
    document.addEventListener("webkitvisibilitychange", onchange);
  else if ((hidden = "msHidden") in document)
    document.addEventListener("msvisibilitychange", onchange);
  // IE 9 and lower:
  else if ("onfocusin" in document)
    document.onfocusin = document.onfocusout = onchange;
  // All others:
  else
    window.onpageshow = window.onpagehide
    = window.onfocus = window.onblur = onchange;

  function onchange (evt) {
    var v = "visible", h = "hidden",
        evtMap = {
          focus:v, focusin:v, pageshow:v, blur:h, focusout:h, pagehide:h
        };

    evt = evt || window.event;
    if (evt.type in evtMap)
      document.body.className = evtMap[evt.type];
    else
      document.body.className = this[hidden] ? "hidden" : "visible";
  }

  // set the initial state (but only if browser supports the Page Visibility API)
  if( document[hidden] !== undefined )
    onchange({type: document[hidden] ? "blur" : "focus"});
})();

onfocusin и onfocusout are , необходимые для IE 9 и ниже , в то время как все остальные используют onfocus и onblur. Этот код будет выглядеть следующим образом. onpageshow и onpagehide Глядя на вывод

Я бы использовал jQuery, потому что тогда все, что вам нужно сделать, это:

$(window).blur(function(){
  //your code here
});
$(window).focus(function(){
  //your code
});

РЕДАКТИРОВАТЬ 3

к циклу, используя

  • Переменная W3C Page Visibility API (поддерживается: Firefox 10, MSIE 10, Chrome 13). Однако этот API вызывает события только тогда, когда вкладка браузера полностью переопределена (например, когда пользователь переключается с одной вкладки на другую). API не вызывает события, когда видимость не может быть определена с точностью 100 % (например, Alt Tab для переключения на другое приложение).

  • массивов JSON.parse дает вам много ложных срабатываний. Например, если пользователь отображает меньшее окно в верхней части окна браузера, окно браузера теряет фокус (onblur поднято), но пользователь все еще может видеть его (поэтому его все еще нужно обновить). Читайте также определенно работает в Chrome

  • Опираясь на действия пользователя (движение мыши, щелчки, нажатие клавиши) также дает много ложных срабатываний. Подумайте о том же случае, что и выше, или о пользователе, просматривающем видео.

Чтобы улучшить несовершенное поведение, описанное выше, я использую комбинацию из 3 методов: W3C Visibility API, затем методы фокусировки / размытия и пользовательской активности, чтобы уменьшить вероятность ложных срабатываний. Это позволяет управлять следующими событиями:

  • Изменение вкладки браузера на другую (точность 100 %, благодаря API видимости страницы W3C)
  • a = 10
  • внимании пользователя потенциально не сосредоточена на HTML-странице (вероятностный = не 100 % точно)

Вот как это работает: когда документ теряет фокус, пользовательская активность (например, перемещение мыши) в документе отслеживается, чтобы определить, является ли окно видимым или нет. Вероятность видимости страницы обратно пропорциональна времени последнего пользовательского действия на странице: если пользователь долгое время не выполняет никаких действий с документом, скорее всего, страница не видна. Приведенный ниже код имитирует API видимости страницы W3C: он ведет себя так же, но имеет небольшой процент ложных срабатываний. Он имеет преимущество быть мультибраузером (протестирован на Firefox 5, Firefox 10, MSIE 9, MSIE 7, Safari 5, Chrome 9).


    <div id="x"></div>

    <script>
    /**
    Registers the handler to the event for the given object.
    @param obj the object which will raise the event
    @param evType the event type: click, keypress, mouseover, ...
    @param fn the event handler function
    @param isCapturing set the event mode (true = capturing event, false = bubbling event)
    @return true if the event handler has been attached correctly
    */
    function addEvent(obj, evType, fn, isCapturing){
      if (isCapturing==null) isCapturing=false; 
      if (obj.addEventListener){
        // Firefox
        obj.addEventListener(evType, fn, isCapturing);
        return true;
      } else if (obj.attachEvent){
        // MSIE
        var r = obj.attachEvent('on' evType, fn);
        return r;
      } else {
        return false;
      }
    }

    // register to the potential page visibility change
    addEvent(document, "potentialvisilitychange", function(event) {
      document.getElementById("x").innerHTML ="potentialVisilityChange: potentialHidden=" document.potentialHidden ", document.potentiallyHiddenSince=" document.potentiallyHiddenSince " s<br>";
    });

    // register to the W3C Page Visibility API
    var hidden=null;
    var visibilityChange=null;
    if (typeof document.mozHidden !== "undefined") {
      hidden="mozHidden";
      visibilityChange="mozvisibilitychange";
    } else if (typeof document.msHidden !== "undefined") {
      hidden="msHidden";
      visibilityChange="msvisibilitychange";
    } else if (typeof document.webkitHidden!=="undefined") {
      hidden="webkitHidden";
      visibilityChange="webkitvisibilitychange";
    } else if (typeof document.hidden !=="hidden") {
      hidden="hidden";
      visibilityChange="visibilitychange";
    }
    if (hidden!=null && visibilityChange!=null) {
      addEvent(document, visibilityChange, function(event) {
        document.getElementById("x").innerHTML =visibilityChange ": " hidden "=" document[hidden] "<br>";
      });
    }


    var potentialPageVisibility = {
      pageVisibilityChangeThreshold:3*3600, // in seconds
      init:function() {
        function setAsNotHidden() {
          var dispatchEventRequired=document.potentialHidden;
          document.potentialHidden=false;
          document.potentiallyHiddenSince=0;
          if (dispatchEventRequired) dispatchPageVisibilityChangeEvent();
        }

        function initPotentiallyHiddenDetection() {
          if (!hasFocusLocal) {
            // the window does not has the focus => check for  user activity in the window
            lastActionDate=new Date();
            if (timeoutHandler!=null) {
              clearTimeout(timeoutHandler);
            }
            timeoutHandler = setTimeout(checkPageVisibility, potentialPageVisibility.pageVisibilityChangeThreshold*1000 100); //  100 ms to avoid rounding issues under Firefox
          }
        }

        function dispatchPageVisibilityChangeEvent() {
          unifiedVisilityChangeEventDispatchAllowed=false;
          var evt = document.createEvent("Event");
          evt.initEvent("potentialvisilitychange", true, true);
          document.dispatchEvent(evt);
        }

        function checkPageVisibility() {
          var potentialHiddenDuration=(hasFocusLocal || lastActionDate==null?0:Math.floor((new Date().getTime()-lastActionDate.getTime())/1000));
                                        document.potentiallyHiddenSince=potentialHiddenDuration;
          if (potentialHiddenDuration>=potentialPageVisibility.pageVisibilityChangeThreshold && !document.potentialHidden) {
            // page visibility change threshold raiched => raise the even
            document.potentialHidden=true;
            dispatchPageVisibilityChangeEvent();
          }
        }

        var lastActionDate=null;
        var hasFocusLocal=true;
        var hasMouseOver=true;
        document.potentialHidden=false;
        document.potentiallyHiddenSince=0;
        var timeoutHandler = null;

        addEvent(document, "pageshow", function(event) {
          document.getElementById("x").innerHTML ="pageshow/doc:<br>";
        });
        addEvent(document, "pagehide", function(event) {
          document.getElementById("x").innerHTML ="pagehide/doc:<br>";
        });
        addEvent(window, "pageshow", function(event) {
          document.getElementById("x").innerHTML ="pageshow/win:<br>"; // raised when the page first shows
        });
        addEvent(window, "pagehide", function(event) {
          document.getElementById("x").innerHTML ="pagehide/win:<br>"; // not raised
        });
        addEvent(document, "mousemove", function(event) {
          lastActionDate=new Date();
        });
        addEvent(document, "mouseover", function(event) {
          hasMouseOver=true;
          setAsNotHidden();
        });
        addEvent(document, "mouseout", function(event) {
          hasMouseOver=false;
          initPotentiallyHiddenDetection();
        });
        addEvent(window, "blur", function(event) {
          hasFocusLocal=false;
          initPotentiallyHiddenDetection();
        });
        addEvent(window, "focus", function(event) {
          hasFocusLocal=true;
          setAsNotHidden();
        });
        setAsNotHidden();
      }
    }

    potentialPageVisibility.pageVisibilityChangeThreshold=4; // 4 seconds for testing
    potentialPageVisibility.init();
    </script>

Если вопрос научил меня чему-то, то это так: не меняйте то, что уже работает :)

На GitHub есть аккуратная библиотека:

https://github.com/serkanyersen/ifvisible.js

Пример:

// If page is visible right now
if( ifvisible.now() ){
  // Display pop-up
  openPopUp();
}

Я протестировал версию 1.0.1 во всех моих браузерах и могу подтвердить, что она работает с:

  • Этот метод устарел после ECMA 3, поэтому его следует избегать.
  • FF 26.0
  • Chrome 34.0

оценка короткого замыкания

(спасибо

  • для вас, когда вы даете им функцию генератора) что приводит к обещаниям. .now(), всегда возвращает true для меня)

Использование: API видимости страницы

document.addEventListener( 'visibilitychange' , function() {
    if (document.hidden) {
        console.log('bye');
    } else {
        console.log('well back');
    }
}, false );

Могу ли я использовать ? http://caniuse.com/ # feat = pagevisibility

, я хочу получить:

if(new_message){
    if(!document.hasFocus()){
        audio.play();
        document.title="Have new messages";
    }
    else{
        audio.stop();
        document.title="Application Name";
    } 
}

переменные, которые вы можете не нужно.)

все возможные события для изменения фокуса страницы. Вот функция, которую вы можете добавить: немного длиннее (и медленнее), но позволяет переименовывать свойства аналогично ES6.

function onVisibilityChange(callback) {
    var visible = true;

    if (!callback) {
        throw new Error('no callback given');
    }

    function focused() {
        if (!visible) {
            callback(visible = true);
        }
    }

    function unfocused() {
        if (visible) {
            callback(visible = false);
        }
    }

    // Standards:
    if ('hidden' in document) {
        document.addEventListener('visibilitychange',
            function() {(document.hidden ? unfocused : focused)()});
    } else if ('mozHidden' in document) {
        document.addEventListener('mozvisibilitychange',
            function() {(document.mozHidden ? unfocused : focused)()});
    } else if ('webkitHidden' in document) {
        document.addEventListener('webkitvisibilitychange',
            function() {(document.webkitHidden ? unfocused : focused)()});
    } else if ('msHidden' in document) {
        document.addEventListener('msvisibilitychange',
            function() {(document.msHidden ? unfocused : focused)()});
    } else if ('onfocusin' in document) {
        // IE 9 and lower:
        document.onfocusin = focused;
        document.onfocusout = unfocused;
    } else {
        // All others:
        window.onpageshow = window.onfocus = focused;
        window.onpagehide = window.onblur = unfocused;
    }
};

Но если вы хотите сохранить настройки пользователя на его компьютере, вам, вероятно, захочется

onVisibilityChange(function(visible) {
    console.log('the page is now', visible ? 'focused' : 'unfocused');
});

Существует новый синтаксис в

  • Страница включает в себя фреймы, которые вы не можете контролировать
  • большую часть времени

Это происходит потому, что:

  • API видимости страницы может надежно сообщать вам об изменении вкладки (даже с помощью iframes), но не может сообщить вам, когда пользователь меняет окна.
  • Прослушивание событий размытия / фокуса окна может обнаружить вкладки alt и ctrl, если у iframe нет фокуса.

Учитывая эти ограничения, можно реализовать решение, которое сочетает в себе — API-интерфейс видимости страницы — размытие окна / focus- document.activeElement

, который может:

  • 1) вкладку ctrl, когда родительская страница имеет фокус: YES
  • В таких случаях мы можем использовать
  • , выбранный с помощью id
  • 4) alt tab, когда iframe имеет фокус: NO & Lt ; — bummer

Если в фрейме есть фокус, события размытия / фокуса вообще не вызываются, и API видимости страницы не срабатывает на вкладке alt.

Я опирался на решение @ AndyE и реализовал это (почти хорошее) решение здесь: https://dl.dropboxusercontent.com/u/2683925/estante-components/visibility_test1.html Http://jsfiddle.net/adamjford/YNGcm/20/

. Это также доступно на Github: https://github.com/qmagico / estante-components

Это работает на Chrome / Chromium. Это работает на Firefox, за исключением того, что он не загружает содержимое iframe (любая идея, почему?)

В любом случае, чтобы решить последнюю проблему (4), единственный способ сделать это — прослушивать события размытия / фокуса в iframe. Если у вас есть некоторый контроль над iframe, вы можете использовать для этого API postMessage.

https: //dl.dropboxusercontent.com/u/2683925/estante-components/visibility_test2.html

Я до сих пор не проверял это с достаточным количеством браузеров. Если вы можете найти больше информации о том, где это не работает, пожалуйста, дайте мне знать в комментариях ниже.

var visibilityChange = (function (window) {
    var inView = false;
    return function (fn) {
        window.onfocus = window.onblur = window.onpageshow = window.onpagehide = function (e) {
            if ({focus:1, pageshow:1}[e.type]) {
                if (inView) return;
                fn("visible");
                inView = true;
            } else if (inView) {
                fn("hidden");
                inView = false;
            }
        };
    };
}(this));

visibilityChange(function (state) {
    console.log(state);
});

вы можете увидеть свойство конструктора в

Массив

(function () {

    var requiredResolution = 10; // ms
    var checkInterval = 1000; // ms
    var tolerance = 20; // percent


    var counter = 0;
    var expected = checkInterval / requiredResolution;
    //console.log('expected:', expected);

    window.setInterval(function () {
        counter  ;
    }, requiredResolution);

    window.setInterval(function () {
        var deviation = 100 * Math.abs(1 - counter / expected);
        // console.log('is:', counter, '(off by', deviation , '%)');
        if (deviation > tolerance) {
            console.warn('Timer resolution not sufficient!');
        }
        counter = 0;
    }, checkInterval);

})();

В HTML 5 вы также можете использовать:

  • onpageshow: Скрипт запускается, когда окно становится видимым
  • onpagehide: скрипт, который запускается, когда окно скрыто

См .:

это работает для меня на Chrome 67, Firefox 67,

if(!document.hasFocus()) {
    // do stuff
}

Несколько более сложный способ — использовать простой стиль {6} ES6 путь. setInterval()

Это дает дополнительное преимущество, заключающееся в том, что пользователь простаивает, а не только Введите

Некоторые другие вопросы об обещаниях для получения более подробной информации:

Если пользователь фокусирует страницу, он будет обновляться немедленно

, это выполнит задачу, например. обновляйте страницу каждые 30 секунд, но только если страница видна и сфокусирована.

Если видимость не может быть обнаружена, то будет использоваться только фокус.

Страница не будет обновляться снова через 30 секунд после любого вызова ajax

. Основная идея здесь заключается в том, что, добавляя async: false, вы заставляете все ждать, пока данные не будут получены. Затем вы назначаете его статической переменной класса, и все волшебным образом работает :)

var windowFocused = true;
var timeOut2 = null;

$(function(){
  $.ajaxSetup ({
    cache: false
  });
  $("#content").ajaxComplete(function(event,request, settings){
       set_refresh_page(); // ajax call has just been made, so page doesn't need updating again for 30 seconds
   });
  // check visibility and focus of window, so as not to keep updating unnecessarily
  (function() {
      var hidden, change, vis = {
              hidden: "visibilitychange",
              mozHidden: "mozvisibilitychange",
              webkitHidden: "webkitvisibilitychange",
              msHidden: "msvisibilitychange",
              oHidden: "ovisibilitychange" /* not currently supported */
          };
      for (hidden in vis) {
          if (vis.hasOwnProperty(hidden) && hidden in document) {
              change = vis[hidden];
              break;
          }
      }
      document.body.className="visible";
      if (change){     // this will check the tab visibility instead of window focus
          document.addEventListener(change, onchange,false);
      }

      if(navigator.appName == "Microsoft Internet Explorer")
         window.onfocus = document.onfocusin = document.onfocusout = onchangeFocus
      else
         window.onfocus = window.onblur = onchangeFocus;

      function onchangeFocus(evt){
        evt = evt || window.event;
        if (evt.type == "focus" || evt.type == "focusin"){
          windowFocused=true; 
        }
        else if (evt.type == "blur" || evt.type == "focusout"){
          windowFocused=false;
        }
        if (evt.type == "focus"){
          update_page();  // only update using window.onfocus, because document.onfocusin can trigger on every click
        }

      }

      function onchange () {
        document.body.className = this[hidden] ? "hidden" : "visible";
        update_page();
      }

      function update_page(){
        if(windowFocused&&(document.body.className=="visible")){
          set_refresh_page(1000);
        }
      }


  })();
  set_refresh_page();
})

function get_date_time_string(){
  var d = new Date();
  var dT = [];
  dT.push(d.getDate());
  dT.push(d.getMonth())
  dT.push(d.getFullYear());
  dT.push(d.getHours());
  dT.push(d.getMinutes());
  dT.push(d.getSeconds());
  dT.push(d.getMilliseconds());
  return dT.join('_');
}

function do_refresh_page(){

// do tasks here

// e.g. some ajax call to update part of the page.

// (date time parameter will probably force the server not to cache)

//      $.ajax({
//        type: "POST",
//        url: "someUrl.php",
//        data: "t="   get_date_time_string() "&task=update",
//        success: function(html){
//          $('#content').html(html);
//        }
//      });

}

function set_refresh_page(interval){
  interval = typeof interval !== 'undefined' ? interval : 30000; // default time = 30 seconds
  if(timeOut2 != null) clearTimeout(timeOut2);
  timeOut2 = setTimeout(function(){
    if((document.body.className=="visible")&&windowFocused){
      do_refresh_page();
    }
    set_refresh_page();
  }, interval);
}

Есть ли быстрый способ установить ввод текста HTML (& Amp {*) **} lt ; тип ввода = text /ndom*. routampatell*********), чтобы разрешить только числовые нажатия клавиш (плюс ‘.’)? Visibility.js , который предоставляет информацию о трех состояниях страницы

visible    ... page is visible
hidden     ... page is not visible
prerender  ... page is being prerendered by the browser

могут выглядеть (эта версия не поддерживает импорт бетона члены).

/* Perform action every second if visible */
Visibility.every(1000, function () {
    action();
});

/* Perform action every second if visible, every 60 sec if not visible */
Visibility.every(1000, 60*1000, function () {
    action();
});

Та же страница … внизу.

Для angular.js, вот директива (на основе принятого ответа), которая позволит вашему контроллеру реагировать на изменение видимости:

myApp.directive('reactOnWindowFocus', function($parse) {
    return {
        restrict: "A",
        link: function(scope, element, attrs) {
            var hidden = "hidden";
            var currentlyVisible = true;
            var functionOrExpression = $parse(attrs.reactOnWindowFocus);

          // Standards:
          if (hidden in document)
            document.addEventListener("visibilitychange", onchange);
          else if ((hidden = "mozHidden") in document)
            document.addEventListener("mozvisibilitychange", onchange);
          else if ((hidden = "webkitHidden") in document)
            document.addEventListener("webkitvisibilitychange", onchange);
          else if ((hidden = "msHidden") in document)
            document.addEventListener("msvisibilitychange", onchange);
          else if ("onfocusin" in document) {
                // IE 9 and lower:
            document.onfocusin = onshow;
                document.onfocusout = onhide;
          } else {
                // All others:
            window.onpageshow = window.onfocus = onshow;
                window.onpagehide = window.onblur = onhide;
            }

          function onchange (evt) {
                //occurs both on leaving and on returning
                currentlyVisible = !currentlyVisible;
                doSomethingIfAppropriate();
          }

            function onshow(evt) {
                //for older browsers
                currentlyVisible = true;
                doSomethingIfAppropriate();
            }

            function onhide(evt) {
                //for older browsers
                currentlyVisible = false;
                doSomethingIfAppropriate();
            }

            function doSomethingIfAppropriate() {
                if (currentlyVisible) {
                    //trigger angular digest cycle in this scope
                    scope.$apply(function() {
                        functionOrExpression(scope);
                    });
                }
            }
        }
    };

});

свойство события назначается динамически. Я предпочитаю иметь возможность вызывать функцию или назначать ее динамически, без необходимости кодировать функцию специально для того или иного метода вложения. Отсюда мой <div react-on-window-focus="refresh()"> Если вы хотите действовать refresh() Написание функции сна просто и стало еще удобнее с JavaScript Promises:

Если вы хотите действовать О целое blur : как я уже прокомментировал, если браузер потерял фокус ни одно из предложенных событий не сработало. Моя идея состоит в том, чтобы считать в цикле и сбрасывать счетчик в случае возникновения события. Если счетчик достигает предела, я делаю location.href для другой страницы. Это также срабатывает, если вы работаете с dev-tools.

var iput=document.getElementById("hiddenInput");
   ,count=1
   ;
function check(){
         count  ;
         if(count%2===0){
           iput.focus();
         }
         else{
           iput.blur();
         }
         iput.value=count;  
         if(count>3){
           location.href="http://Nirwana.com";
         }              
         setTimeout(function(){check()},1000);
}   
iput.onblur=function(){count=1}
iput.onfocus=function(){count=1}
check();

, подлыми противными способами.

цикла {{}} достаточно ,

Работает очень хорошо для обычных ссылок.

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