{"id":230374,"date":"2022-11-20T20:07:00","date_gmt":"2022-11-20T17:07:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=230374"},"modified":"2022-11-09T22:05:03","modified_gmt":"2022-11-09T19:05:03","slug":"una-punta-rapida-per-nascondere-le-estensioni-del-browser","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/it\/una-punta-rapida-per-nascondere-le-estensioni-del-browser\/","title":{"rendered":"Una punta rapida per nascondere le estensioni del browser"},"content":{"rendered":"\n<p>Nella mia esperienza, la maggior parte delle sovrapposizioni di estensione del browser utilizza uno sfondo con il tipo di <strong>dati: Image\/SVG+XML<\/strong>. Inoltre, ciascuna di queste sovrapposizioni utilizza stili in linea (piuttosto che fogli di stile esterni) per eseguire il rendering dei pulsanti (o di qualsiasi controllo stiano optando per il rendering).<\/p>\n<p>Ci\u00f2 significa che possiamo usare alcune tecniche JavaScript per trovare elementi con che hanno questi attributi e quindi alternare la loro visibilit\u00e0.<\/p>\n<p>Ma prima, perch\u00e9 dovremmo nemmeno nasconderli?<\/p>\n<h2>Nascondere le sovrapposizioni di estensione del browser<\/h2>\n<p>In generale, ogni volta che questi overlay sono in mostra, \u00e8 per salvarli in qualche servizio di bookmarking che si tratti di Pinterest, Buffer, Pocket o qualcos&#8217;altro.<\/p>\n<h3>Caso d&#8217;uso pertinenti<\/h3>\n<p>Inoltre, almeno nel caso di cui sto parlando, rendono ogni volta che il cursore passa sopra un&#8217;immagine. Ma cosa succede se non vogliamo che ci\u00f2 accada.<\/p>\n<p>Caso in questione:<\/p>\n<ul>\n<li>Forse stiamo lavorando su un plug-in che attiver\u00e0 la sua sovrapposizione e vogliamo nascondere altri pop-up.<\/li>\n<li>O forse attiviamo un altro pop-up che contiene immagini e non vogliamo che le sovrapposizioni appaiano su quelle immagini.<\/li>\n<\/ul>\n<p>In ogni caso, ecco un modo per nascondere le sovrapposizioni a seconda delle tue esigenze.<\/p>\n<h3>Il processo<\/h3>\n<p>Poich\u00e9 WordPress include jQuery per impostazione predefinita, lo user\u00f2 come libreria preferita. Ma questo potrebbe essere utilizzato altrettanto facilmente trovando tutti gli elementi in base a un nome di classe specificato e scorrendoli (se si sceglie di utilizzare JavaScript vanilla).<\/p>\n<p>Per prima cosa, vogliamo iniziare con l&#8217; elemento <strong>body e poi guardare, diciamo, tutti gli elementi<\/strong> <strong>span<\/strong> (poich\u00e9 quelli tendono ad essere gli elementi pi\u00f9 popolari \u2013 di nuovo, solo nella mia esperienza \u2013 e ci <a href=\"https:\/\/gist.github.com\/tommcfarlin\/7102c06915c5c55421d42778be7954e1#file-00-function-setup-js\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">prepariamo a scorrerli<\/a> ):<\/p>\n<pre><code>var hideExtensions = function() {\n    $('body')\n      .children('span')\n      .each(function() {\n      });\n};<\/code><\/pre>\n<p>Successivamente, vogliamo verificare la presenza di <strong>data:image\/svg+xml<\/strong> nell&#8217;attributo di stile inline. E, se viene trovato, <a href=\"https:\/\/gist.github.com\/tommcfarlin\/7102c06915c5c55421d42778be7954e1#file-01-check-for-inline-styles-js\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">cambia la visibilit\u00e0 dell&#8217;elemento<\/a> :<\/p>\n<pre><code>if (-1 !== $(this).attr('style').indexOf('data:image\/svg+xml;')) {\n  if ('hidden' !== $(this).css('visibility')) {\n    $(this).css('visibility', 'hidden');\n  }\n}<\/code><\/pre>\n<p>Se vuoi attivare o disattivare la visibilit\u00e0 dell&#8217;elemento, dovrai impostare una seconda clausola che rimuover\u00e0 il\u00a0 valore <strong>nascosto<\/strong> quando necessario. Se vuoi farlo, puoi facilmente <a href=\"https:\/\/gist.github.com\/tommcfarlin\/7102c06915c5c55421d42778be7954e1#file-02-toggle-visibility-js\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">aggiungere questo<\/a> :<\/p>\n<pre><code>if (-1 !== $(this).attr('style').indexOf('data:image\/svg+xml;')) {\n    if ('hidden' !== $(this).css('visibility')) {\n        $(this).css('visibility', 'hidden');\n    }\n} else {\n    $(this).css('visibility', 'visible');\n}<\/code><\/pre>\n<p>La funzione finale potrebbe assomigliare <a href=\"https:\/\/gist.github.com\/tommcfarlin\/7102c06915c5c55421d42778be7954e1#file-03-hideextensions-js\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">a questa<\/a> :<\/p>\n<pre><code>var hideExtensions = function() {\n\n  $('body')\n      .children('span')\n      .each(function() {\n          if (-1 !== $(this).attr('style').indexOf('data:image\/svg+xml;')) {\n              if ('hidden' !== $(this).css('visibility')) {\n                  $(this).css('visibility', 'hidden');\n              }\n          } else {\n              $(this).css('visibility', 'visible');\n          }\n      });\n};\n<\/code><\/pre>\n<p>Quindi devi solo chiamare <code>hideExtensions();<\/code>quando necessario.<\/p>\n<h2>Una parola sulle prestazioni<\/h2>\n<p>Poich\u00e9 stiamo eseguendo la scansione di un sottoinsieme di elementi nel DOM, questo pu\u00f2 diventare un po&#8217; un problema di prestazioni, soprattutto se sono presenti molti elementi di un unico tipo.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Fonte di registrazione:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/tommcfarlin.com\" class=\"external external_icon\">tommcfarlin.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Ecco una punta rapida per nascondere le estensioni del browser come Pinterest, Buffer e altri che utilizzano JavaScript.<\/p>\n","protected":false},"author":1,"featured_media":165108,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[896,835,731,844],"tags":[1168],"class_list":["post-230374","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-codice","category-guida-per-principianti","category-javascript-6","category-tutorial","tag-affiai-it"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/posts\/230374","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/comments?post=230374"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/posts\/230374\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/media\/165108"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/media?parent=230374"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/categories?post=230374"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/tags?post=230374"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}