Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Porównanie zawartości <div> oraz odtworzenie dzwięku.
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
koxfx
10.08.2015, 11:40:23
Chcę porównać div przed i po zmianie treści a po tym odtworzyć dzwięk. Do dzwięku wystarczy tag <audio>.
Mam taki kod ale nie wiem jak za to się zabrać.

[JAVASCRIPT] pobierz, plaintext 
  1. <script>
  2. new MutationObserver(function (mutations) {
  3.     mutations.some(function(mutation) {
  4.         if (mutation.type === 'attributes' && mutation.attributeName === 'xxx') {
  5.             console.log(mutation);
  6.             console.log('Old src: ', mutation.oldValue);
  7.             console.log('New src: ', mutation.target.xxx);
  8.             return true;
  9.         }
  10.  
  11.         return false;
  12.     });
  13. }).observe(document.body, {
  14.     attributes: true,
  15.     attributeFilter: ['xxx'],
  16.     attributeOldValue: true,
  17.     characterData: false,
  18.     characterDataOldValue: false,
  19.     childList: false,
  20.     subtree: true
  21. });
  22.  
  23. setTimeout(function () {
  24.     document.getElementById('xxx');
  25. }, 3000);
  26. </script>
[JAVASCRIPT] pobierz, plaintext
Comandeer
10.08.2015, 11:58:11
Kod
<!DOCTYPE html>
    <html lang="pl" dir="ltr" class="no-js">
        <head>
            <meta charset="UTF-8">
            <script>(function(H){H.className=H.className.replace(/\bno-js\b/,'js')})(document.documentElement)</script>
            <title>Ehhhh</title>
            <style>
            </style>
        </head>
        <body>
            <div>Tekst</div>
            <button>Zmień treść</button>

            <script>(function(div, button)
            {
                var observer = new MutationObserver(function(mutations)
                {
                    mutations.forEach(function(mutation)
                    {
                        if(mutation.type === 'characterData' || mutation.type === 'childList')
                            console.log('nastąpiła zmiana zawartości', mutation.oldValue, div.innerHTML);
                    });
                });

                observer.observe(div, {
                    childList: true //to wykryje jak zostaną dodane nowe tagi
                    ,characterData: true //to wykryje jak zostanie dodana nowa treść bez tagów
                    ,characterDataOldValue: true //to zwróci starą treść
                    ,subtree: true //a to sprawi, że będzie sprawdzana cała zawartość div
                });

                button.addEventListener('click', function()
                {
                    div.innerHTML = Math.round((Math.random() + 1) * 99999);
                }, false);
            }(document.querySelector('div'), document.querySelector('button')))</script>
        </body>
    </html>
koxfx
10.08.2015, 15:43:22
Działa to dość dobrze w Firefox, w Chrome średnio. Został tylko jeden problem. Kod działa tylko dla karty (przeglądarki) w której została wywołana akcja. Potrzebuję aby działało dla wszystkich a najlepiej dla wszystkich oprócz osoby wywołujące akcję.
[PHP] pobierz, plaintext 
  1.             <script>(function(div, button)
  2.             {
  3.                 var observer = new MutationObserver(function(mutations)
  4.                 {
  5.                     mutations.forEach(function(mutation)
  6.                     {
  7.                         if(mutation.type === 'characterData' || mutation.type === 'childList')
  8.                             console.log('nastąpiła zmiana zawartości', mutation.oldValue, div.innerHTML);
  9.                     });
  10.                 });
  11.  
  12.                 observer.observe(div, {
  13.                     childList: true //to wykryje jak zostaną dodane nowe tagi
  14.                     ,characterData: true //to wykryje jak zostanie dodana nowa treść bez tagów
  15.                     ,characterDataOldValue: true //to zwróci starą treść
  16.                     ,subtree: true //a to sprawi, że będzie sprawdzana cała zawartość div
  17.                 });
  18.  
  19.  
  20.                 button.addEventListener('click', function()
  21.  
  22.                 {
  23. 				var snd = new Audio("pow.mp3"); // buffers automatically when created
  24. 				snd.play();
  25.                 }, false);
  26.             }(document.querySelector('div'), document.querySelector('button')))</script>
[PHP] pobierz, plaintext
Comandeer
10.08.2015, 15:50:06
Dla wszystkich userów? W takim razie musisz propagować akcję przez rozwiązanie typu WebSockets (polecam bibliotekę socket.io, bo jest prawdopodobnie najłatwiejsza do ogarnięcia).
koxfx
11.08.2015, 14:00:56
Czy jest inna możliwość rowiązania tego problemu. (dla wszystkich userów, oprócz websocket)
Skie
11.08.2015, 14:20:47
AJAX polling lub long-polling, ale pod względem wydajności i precyzji jest to znacznie gorsze rozwiązanie.
Comandeer
11.08.2015, 16:02:14
Socket.io rozwiązuje to wewnętrznie wink.gif Przechodzi kolejno przez websockets → flash sockets → long polling → zwykły xhr.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.