{"id":229799,"date":"2022-11-20T19:43:00","date_gmt":"2022-11-20T16:43:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=229799"},"modified":"2022-11-09T16:25:35","modified_gmt":"2022-11-09T13:25:35","slug":"un-consejo-rapido-para-ocultar-las-superposiciones-de-extensiones-del-navegador","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/es\/un-consejo-rapido-para-ocultar-las-superposiciones-de-extensiones-del-navegador\/","title":{"rendered":"Un consejo r\u00e1pido para ocultar las superposiciones de extensiones del navegador"},"content":{"rendered":"\n<p>En mi experiencia, la mayor\u00eda de las superposiciones de extensiones de navegador usan un fondo con el tipo de <strong>datos: imagen\/svg+xml<\/strong>. Adem\u00e1s, cada una de estas superposiciones utiliza estilos en l\u00ednea (en lugar de hojas de estilo externas) para representar sus botones (o cualquier control que opten por representar).<\/p>\n<p>Esto significa que podemos usar algunas t\u00e9cnicas de JavaScript para encontrar elementos que tengan estos atributos y luego alternar su visibilidad.<\/p>\n<p>Pero primero, \u00bfpor qu\u00e9 nos importar\u00eda siquiera esconderlos?<\/p>\n<h2>Ocultar superposiciones de extensiones del navegador<\/h2>\n<p>En t\u00e9rminos generales, cada vez que se muestran estas superposiciones, es para guardarlas en alg\u00fan servicio de marcadores, ya sea Pinterest, Buffer, Pocket o cualquier otro.<\/p>\n<h3>Casos de uso relevantes<\/h3>\n<p>Adem\u00e1s, al menos en el caso del que estoy hablando, se procesan cada vez que el cursor pasa sobre una imagen. Pero, \u00bfy si no queremos que eso suceda?<\/p>\n<p>Caso en punto:<\/p>\n<ul>\n<li>Tal vez estemos trabajando en un complemento que activar\u00e1 su superposici\u00f3n y queremos ocultar otras ventanas emergentes.<\/li>\n<li>O tal vez activamos otra ventana emergente que contiene im\u00e1genes y no queremos que las superposiciones aparezcan en esas im\u00e1genes.<\/li>\n<\/ul>\n<p>Cualquiera que sea el caso, aqu\u00ed hay una forma de ocultar las superposiciones seg\u00fan sus necesidades.<\/p>\n<h3>El proceso<\/h3>\n<p>Dado que WordPress incluye jQuery de forma predeterminada, lo usar\u00e9 como la biblioteca de elecci\u00f3n. Pero esto podr\u00eda usarse f\u00e1cilmente encontrando todos los elementos por un nombre de clase espec\u00edfico e iter\u00e1ndolos (si opta por usar JavaScript est\u00e1ndar).<\/p>\n<p>Primero, queremos comenzar con el\u00a0 elemento <strong>body<\/strong> y luego mirar, digamos, todos los\u00a0 elementos <strong>span<\/strong> (dado que esos tienden a ser los elementos m\u00e1s populares, nuevamente, solo en mi experiencia, y <a href=\"https:\/\/gist.github.com\/tommcfarlin\/7102c06915c5c55421d42778be7954e1#file-00-function-setup-js\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">prepararnos para iterar a trav\u00e9s de ellos<\/a> ):<\/p>\n<pre><code>var hideExtensions = function() {\n    $('body')\n      .children('span')\n      .each(function() {\n      });\n};<\/code><\/pre>\n<p>A continuaci\u00f3n, queremos verificar la presencia de <strong>data:image\/svg+xml<\/strong> en el atributo de estilo en l\u00ednea. Y, si se encuentra, <a href=\"https:\/\/gist.github.com\/tommcfarlin\/7102c06915c5c55421d42778be7954e1#file-01-check-for-inline-styles-js\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">cambie la visibilidad del 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>Si desea alternar la visibilidad del elemento, deber\u00e1 configurar una segunda cl\u00e1usula que eliminar\u00e1 el\u00a0 valor <strong>oculto<\/strong> cuando sea necesario. Si quieres hacer eso, puedes <a href=\"https:\/\/gist.github.com\/tommcfarlin\/7102c06915c5c55421d42778be7954e1#file-02-toggle-visibility-js\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">agregar f\u00e1cilmente esto<\/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 funci\u00f3n final puede ser algo <a href=\"https:\/\/gist.github.com\/tommcfarlin\/7102c06915c5c55421d42778be7954e1#file-03-hideextensions-js\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">como esto<\/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>Entonces solo necesita llamar <code>hideExtensions();<\/code>cuando sea necesario.<\/p>\n<h2>Una palabra sobre el rendimiento<\/h2>\n<p>Debido a que estamos escaneando un subconjunto de elementos en el DOM, esto puede convertirse en un problema de rendimiento, especialmente si hay muchos elementos de un solo tipo.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Fuente de grabaci\u00f3n:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/tommcfarlin.com\" class=\"external external_icon\">tommcfarlin.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Aqu\u00ed hay un consejo r\u00e1pido para ocultar superposiciones de extensiones de navegador como Pinterest, Buffer y otras que usan 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":[892,831,727,840],"tags":[1172],"class_list":["post-229799","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-codigo","category-guia-para-principiantes","category-javascript-2","category-tutoriales","tag-affiai-es"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/posts\/229799","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/comments?post=229799"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/posts\/229799\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/media\/165108"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/media?parent=229799"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/categories?post=229799"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/tags?post=229799"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}