Ereignis-Listener, wenn das Element sichtbar wird?

Ich erstelle eine Symbolleiste, die in eine Seite aufgenommen wird. Das Div, in das es aufgenommen werden soll, wird standardmäßig angezeigt: none . Gibt es eine Möglichkeit, einen Ereignis-Listener in meine Symbolleiste einzufügen, um zu warten, wann er sichtbar wird, damit er initialisiert werden kann? oder muss ich ihm eine Variable von der enthaltenden Seite übergeben?

Vielen Dank

Javascript- Ereignisse befassen sich mit Benutzerinteraktion . Wenn Ihr Code ausreichend organisiert ist, sollten Sie in der Lage sein, die Initialisierungsfunktion an derselben Stelle aufzurufen, an der sich die Sichtbarkeit ändert (dh Sie sollten sich nicht myElement.style.displayan vielen Stellen ändern , sondern eine Funktion / Methode aufrufen, die dies tut dies und alles andere, was Sie vielleicht wollen).

In Zukunft ist die neue HTML Intersection Observer-API genau das, wonach Sie suchen. Sie können einen Rückruf konfigurieren, der immer dann aufgerufen wird, wenn ein Element, das als Ziel bezeichnet wird, entweder das Geräteansichtsfenster oder ein bestimmtes Element schneidet. Es ist in den neuesten Versionen von Chrome, Firefox und Edge verfügbar. Weitere Informationen finden Sie unter https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API .

Einfaches Codebeispiel zur Beobachtung der Anzeige: keine Umschaltung:

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

Ich bin vielleicht etwas spät dran, aber Sie können einfach den MutationObserver verwenden, um Änderungen am gewünschten Element zu beobachten. Wenn sich etwas ändert, müssen Sie nur überprüfen, ob das Element angezeigt wird.

Es gibt mindestens einen Weg, aber keinen sehr guten. Sie können das Element einfach nach folgenden Änderungen abfragen:

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

Der DOM-Standard spezifiziert auch Mutationsereignisse , aber ich hatte nie die Möglichkeit, sie zu verwenden, und ich bin mir nicht sicher, wie gut sie unterstützt werden. Sie würden sie so verwenden:

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

Dieser Code ist mir ein Rätsel, daher bin ich mir nicht sicher, ob er funktionieren würde.

Die beste und einfachste Lösung wäre ein Rückruf in der Funktion zur Anzeige Ihres Ziels.

Ich hatte das gleiche Problem und habe ein jQuery-Plugin erstellt, um es für unsere Site zu lösen.

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

So würden Sie es anhand Ihres Beispiels verwenden:

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

Wie @figha sagt, sollten Sie , wenn dies Ihre eigene Webseite ist , einfach alles ausführen, was Sie ausführen müssen, nachdem Sie das Element sichtbar gemacht haben.

Für die Beantwortung der Frage (und für alle, die Chrome- oder Firefox-Erweiterungen erstellen , sofern dies ein häufiger Anwendungsfall ist) ermöglichen Mutation Summary und Mutation Observer jedoch, dass DOM-Änderungen Ereignisse auslösen.

Auslösen eines Ereignisses für ein Element mit data-widgetAttribut, das dem DOM hinzugefügt wird. Ausleihen dieses hervorragenden Beispiels aus David Walshs Blog :

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

Antworten umfassen added, removed, valueChangedund mehr . valueChangedenthält alle Attribute, einschließlich displayusw.

Sie können auch dieses jQuery-Plugin ausprobieren: https://github.com/morr/jquery.appear

Nur um die Unterstützung des DOMAttrModified Event Listener-Browsers zu kommentieren:

Browserübergreifende Unterstützung

Diese Ereignisse werden in verschiedenen Browsern nicht konsistent implementiert. Beispiel:

• IE vor Version 9 hat die Mutationsereignisse überhaupt nicht unterstützt und einige davon in Version 9 nicht korrekt implementiert (z. B. DOMNodeInserted).

• WebKit unterstützt DOMAttrModified nicht (siehe Webkit-Fehler 8191 und die Problemumgehung).

• "Mutationsnamenereignisse", dh DOMElementNameChanged und DOMAttributeNameChanged, werden in Firefox (ab Version 11) und wahrscheinlich auch in anderen Browsern nicht unterstützt.

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

meine Lösung:

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

beispielsweise:

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

function processMoreLessButton(){
//some logic
}