Ett snabbt tips för att dölja webbläsartilläggsöverlägg

Enligt min erfarenhet använder de flesta webbläsartilläggsöverlagringar en bakgrund med typen av data:image/svg+xml. Dessutom använder var och en av dessa överlägg inline-stilar (snarare än externa stilmallar) för att rendera sina knappar (eller vilka kontroller de väljer att rendera).

Det betyder att vi kan använda vissa JavaScript-tekniker för att hitta element som har dessa attribut och sedan växla deras synlighet.

Men först, varför skulle vi ens bry oss om att gömma dem?

Döljer webbläsartilläggsöverlägg

Generellt sett, närhelst dessa överlägg visas, är det för att spara till någon bokmärkestjänst, vare sig det är Pinterest, Buffer, Pocket eller något annat.

Relevanta användningsfall

Dessutom, åtminstone i det fall jag pratar om, återges de närhelst markören passerar över en bild. Men tänk om vi inte vill att det ska hända.

Typexempel:

• Kanske arbetar vi på ett plugin som kommer att utlösa dess överlagring, och vi vill dölja andra popup-fönster.
• Eller så kanske vi utlöser ett annat popup-fönster som innehåller bilder, och vi vill inte att överläggen ska visas på dessa bilder.

Hur som helst, här är ett sätt att dölja överläggen beroende på dina behov.

Processen

Eftersom WordPress inkluderar jQuery som standard, kommer jag att använda det som valfritt bibliotek. Men detta kan lika gärna användas genom att hitta alla element med ett specificerat klassnamn och iterera genom dem (om du väljer att använda vanilla JavaScript).

Först vill vi börja med kroppselementet och sedan titta på, säg, alla spännelementen (eftersom de tenderar att vara de mest populära elementen – återigen, bara enligt min erfarenhet – och förbereda oss på att iterera igenom dem ):

var hideExtensions = function() {
    $('body')
      .children('span')
      .each(function() {
      });
};

Därefter vill vi kontrollera förekomsten av data:image/svg+xml i inline style-attributet. Och, om det hittas, ändra sedan synligheten för elementet :

if (-1 !== $(this).attr('style').indexOf('data:image/svg+xml;')) {
  if ('hidden' !== $(this).css('visibility')) {
    $(this).css('visibility', 'hidden');
  }
}

Om du vill ändra synligheten för elementet måste du ställa in en andra klausul som tar bort det dolda värdet när det behövs. Om du vill göra det kan du enkelt lägga till detta :

if (-1 !== $(this).attr('style').indexOf('data:image/svg+xml;')) {
    if ('hidden' !== $(this).css('visibility')) {
        $(this).css('visibility', 'hidden');
    }
} else {
    $(this).css('visibility', 'visible');
}

Den slutliga funktionen kan se ut ungefär så här :

var hideExtensions = function() {

  $('body')
      .children('span')
      .each(function() {
          if (-1 !== $(this).attr('style').indexOf('data:image/svg+xml;')) {
              if ('hidden' !== $(this).css('visibility')) {
                  $(this).css('visibility', 'hidden');
              }
          } else {
              $(this).css('visibility', 'visible');
          }
      });
};

Då behöver du bara ringa hideExtensions();när det behövs.

Ett ord om prestanda

Eftersom vi skannar en delmängd av element i DOM, kan detta bli lite av ett prestandaproblem, särskilt om det finns många element av en enda typ.