Listener di eventi per quando l'elemento diventa visibile?

Sto costruendo una barra degli strumenti che verrà inclusa in una pagina. il div in cui verrà incluso verrà visualizzato per impostazione predefinita : nessuno . C'è un modo per mettere un listener di eventi sulla mia barra degli strumenti per ascoltare quando diventa visibile in modo che possa inizializzarsi? o dovrò passargli una variabile dalla pagina che lo contiene?

Grazie

Gli eventi Javascript riguardano l' interazione utente , se il tuo codice è organizzato abbastanza dovresti essere in grado di chiamare la funzione di inizializzazione nello stesso punto in cui cambia la visibilità (cioè non dovresti cambiare myElement.style.displayin molti posti, invece, chiama una funzione / metodo che lo fa questo e qualsiasi altra cosa tu possa desiderare).

In futuro, la nuova API HTML Intersection Observer è ciò che stai cercando. Ti consente di configurare un callback che viene chiamato ogni volta che un elemento, chiamato target, interseca il viewport del dispositivo o un elemento specificato. È disponibile nelle ultime versioni di Chrome, Firefox e Edge. Vedi https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API per maggiori informazioni.

Semplice esempio di codice per l'osservazione del display: nessuna commutazione:

// Start observing visbility of element. On change, the
//   the callback is called with Boolean visibility as
//   argument:

respondToVisibility(element, callback) {
  var options = {
    root: document.documentElement
  }

  var observer = new IntersectionObserver((entries, observer) => {
    entries.forEach(entry => {
      callback(entry.intersectionRatio > 0);
    });
  }, options);

  observer.observe(element);
}

In azione: https://jsfiddle.net/elmarj/u35tez5n/5/

var targetNode = document.getElementById('elementId');
var observer = new MutationObserver(function(){
    if(targetNode.style.display != 'none'){
        // doSomething
    }
});
observer.observe(targetNode, { attributes: true, childList: true });

Potrei essere un po 'in ritardo, ma potresti semplicemente usare MutationObserver per osservare eventuali modifiche sull'elemento desiderato. In caso di modifiche, dovrai solo controllare se l'elemento è visualizzato.

C'è almeno un modo, ma non è molto buono. Potresti semplicemente eseguire il polling dell'elemento per modifiche come questa:

var previous_style,
    poll = window.setInterval(function()
{
    var current_style = document.getElementById('target').style.display;
    if (previous_style != current_style) {
        alert('style changed');
        window.clearInterval(poll);
    } else {
        previous_style = current_style;
    }
}, 100);

Lo standard DOM specifica anche gli eventi di mutazione , ma non ho mai avuto la possibilità di usarli e non sono sicuro di quanto siano supportati. Li useresti in questo modo:

target.addEventListener('DOMAttrModified', function()
{
    if (e.attrName == 'style') {
        alert('style changed');
    }
}, false);

Questo codice è fuori dalla mia testa, quindi non sono sicuro che funzionerebbe.

La soluzione migliore e più semplice sarebbe quella di avere una richiamata nella funzione che mostra il tuo obiettivo.

Ho avuto lo stesso problema e ho creato un plugin jQuery per risolverlo per il nostro sito.

https://github.com/shaunbowe/jquery.visibilityChanged

Ecco come lo useresti in base al tuo esempio:

$('#contentDiv').visibilityChanged(function(element, visible) {
    alert("do something");
});

Come dice @figha, se questa è la tua pagina web , dovresti semplicemente eseguire tutto ciò di cui hai bisogno per eseguire dopo aver reso visibile l'elemento.

Tuttavia, ai fini della risposta alla domanda (e chiunque crei estensioni per Chrome o Firefox , dove questo è un caso d'uso comune), Riepilogo delle mutazioni e Osservatore delle mutazioni consentiranno alle modifiche DOM di attivare eventi.

Ad esempio, l'attivazione di un evento per un elemento con un data-widgetattributo aggiunto al DOM. Prendendo in prestito questo eccellente esempio dal blog di David Walsh :

var observer = new MutationObserver(function(mutations) {
    // For the sake of...observation...let's output the mutation to console to see how this all works
    mutations.forEach(function(mutation) {
        console.log(mutation.type);
    });    
});

// Notify me of everything!
var observerConfig = {
    attributes: true, 
    childList: true, 
    characterData: true 
};

// Node, config
// In this case we'll listen to all changes to body and child nodes
var targetNode = document.body;
observer.observe(targetNode, observerConfig);

Le risposte sono added, removed, valueChangede altro ancora . valueChangedinclude tutti gli attributi, inclusi displayecc.

Puoi anche provare questo plugin jQuery: https://github.com/morr/jquery.appear

Solo per commentare il supporto del browser del listener di eventi DOMAttrModified:

Supporto cross-browser

Questi eventi non vengono implementati in modo coerente nei diversi browser, ad esempio:

• IE prima della versione 9 non supportava affatto gli eventi di mutazione e non ne implementava alcuni correttamente nella versione 9 (ad esempio, DOMNodeInserted)

• WebKit non supporta DOMAttrModified (vedere il bug del webkit 8191 e la soluzione alternativa)

• Gli "eventi del nome di mutazione", ovvero DOMElementNameChanged e DOMAttributeNameChanged non sono supportati in Firefox (a partire dalla versione 11) e probabilmente anche in altri browser.

Fonte: https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Mutation_events

la mia soluzione:

; (function ($) {
$.each([ "toggle", "show", "hide" ], function( i, name ) {
    var cssFn = $.fn[ name ];
    $.fn[ name ] = function( speed, easing, callback ) {
        if(speed == null || typeof speed === "boolean"){
            var ret=cssFn.apply( this, arguments )
            $.fn.triggerVisibleEvent.apply(this,arguments)
            return ret
        }else{
            var that=this
            var new_callback=function(){
                callback.call(this)
                $.fn.triggerVisibleEvent.apply(that,arguments)
            }
            var ret=this.animate( genFx( name, true ), speed, easing, new_callback )
            return ret
        }
    };
});

$.fn.triggerVisibleEvent=function(){
    this.each(function(){
        if($(this).is(':visible')){
            $(this).trigger('visible')
            $(this).find('[data-trigger-visible-event]').triggerVisibleEvent()
        }
    })
}
})(jQuery);

per esempio:

if(!$info_center.is(':visible')){
    $info_center.attr('data-trigger-visible-event','true').one('visible',processMoreLessButton)
}else{
    processMoreLessButton()
}

function processMoreLessButton(){
//some logic
}