Écouteur d'événements pour quand l'élément devient visible?

Je construis une barre d'outils qui sera incluse dans une page. le div dans lequel il va être inclus s'affichera par défaut : aucun . Existe-t-il un moyen de placer un écouteur d'événements sur ma barre d'outils pour écouter quand il devient visible afin qu'il puisse s'initialiser? ou vais-je devoir lui passer une variable de la page contenant?

Merci

Les événements Javascript traitent de l'interaction utilisateur , si votre code est suffisamment organisé, vous devriez pouvoir appeler la fonction d'initialisation au même endroit où la visibilité change (c'est-à-dire que vous ne devriez pas changer myElement.style.displayà de nombreux endroits, à la place, appelez une fonction / méthode qui le fait ceci et tout ce que vous pourriez souhaiter).

À l'avenir, la nouvelle API HTML Intersection Observer est ce que vous recherchez. Il vous permet de configurer un rappel qui est appelé chaque fois qu'un élément, appelé la cible, croise la fenêtre de l'appareil ou un élément spécifié. Il est disponible dans les dernières versions de Chrome, Firefox et Edge. Voir https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API pour plus d'informations.

Exemple de code simple pour observer l'affichage: aucune commutation:

// 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);
}

En action: 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 });

Je suis peut-être un peu en retard, mais vous pouvez simplement utiliser le MutationObserver pour observer les changements sur l'élément souhaité. En cas de changement, il vous suffira de vérifier si l'élément est affiché.

Il y a au moins un moyen, mais ce n'est pas très bon. Vous pouvez simplement interroger l'élément pour des changements comme celui-ci:

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);

La norme DOM spécifie également les événements de mutation , mais je n'ai jamais eu la chance de les utiliser, et je ne suis pas sûr de leur compatibilité. Vous les utiliseriez comme ceci:

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

Ce code me vient à l'esprit, donc je ne suis pas sûr qu'il fonctionnerait.

La solution la meilleure et la plus simple serait d'avoir un rappel dans la fonction affichant votre cible.

J'ai eu ce même problème et j'ai créé un plugin jQuery pour le résoudre pour notre site.

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

Voici comment vous l'utiliseriez en fonction de votre exemple:

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

Comme le dit @figha, s'il s'agit de votre propre page Web , vous devez simplement exécuter tout ce dont vous avez besoin après avoir rendu l'élément visible.

Cependant, dans le but de répondre à la question (et à quiconque crée des extensions Chrome ou Firefox , où il s'agit d'un cas d'utilisation courant), Mutation Summary et Mutation Observer permettront aux modifications DOM de déclencher des événements.

Par exemple, déclencher un événement pour un élément avec un data-widgetattribut ajouté au DOM. Empruntant cet excellent exemple au blog de 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);

Les réponses comprennent added, removed, valueChangedet plus . valueChangedinclut tous les attributs, y compris displayetc.

Vous pouvez également essayer ce plugin jQuery: https://github.com/morr/jquery.appear

Juste pour commenter la prise en charge du navigateur d'écouteur d'événements DOMAttrModified:

Prise en charge de plusieurs navigateurs

Ces événements ne sont pas implémentés de manière cohérente dans différents navigateurs, par exemple:

• IE avant la version 9 ne prenait pas du tout en charge les événements de mutation et n'en implémentait pas certains correctement dans la version 9 (par exemple, DOMNodeInserted)

• WebKit ne prend pas en charge DOMAttrModified (voir le bogue Webkit 8191 et la solution de contournement)

• Les "événements de nom de mutation", c'est-à-dire DOMElementNameChanged et DOMAttributeNameChanged ne sont pas pris en charge dans Firefox (à partir de la version 11), et probablement aussi dans d'autres navigateurs.

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

ma solution:

; (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);

par exemple:

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

function processMoreLessButton(){
//some logic
}