I was curious if javascript was still executed by the browser even if it was within an element that is hidden in the DOM. A quick search yielded no conclusive evidence, so I decided to test myself.<\/p>\n
Quick answer: Yes, it does still execute – for both inline and included javascript regardless of how it’s hidden (display:none or visibility:hidden).<\/p>\n
I made a simple test script to see if scripts still run if hidden. Then I tested it on:\u00a0Internet Explorer 7, 8, 9, Chrome, Safari, and Firefox and all work the same way.<\/p>\n
Here’s the test script I used. Within each browser, I got 7 popup windows. In case you’re wondering. I wanted to test to see if including a javascript made any difference, so the ‘testjs.js’ script just makes a simple alert call.<\/p>\n
\n\r\n<!DOCTYPE html PUBLIC \"-\/\/W3C\/\/DTD XHTML 1.0 Transitional\/\/EN\" \"http:\/\/www.w3.org\/TR\/xhtml1\/DTD\/xhtml1-transitional.dtd\">\r\n<html xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\" xml:lang=\"en\">\r\n<head>\r\n <script>\r\n alert('head');\r\n <\/script>\r\n<\/head>\r\n<body>\r\n <div>\r\n visible div\r\n <script>alert('visible div');<\/script>\r\n <\/div>\r\n <div style=\"display:none\">\r\n display:none\r\n <script>alert('displaynone div');<\/script>\r\n <\/div>\r\n <div style=\"visibility:hidden\">\r\n visibility:hidden\r\n <script>alert('invisible div');<\/script>\r\n <\/div>\r\n \r\n \r\n <div>\r\n visible div\r\n <script src=\"testjs.js\"><\/script>\r\n <\/div>\r\n <div style=\"display:none\">\r\n display:none\r\n <script src=\"testjs.js\"><\/script>\r\n <\/div>\r\n <div style=\"visibility:hidden\">\r\n visibility:hidden\r\n <script src=\"testjs.js\"><\/script>\r\n <\/div>\r\n \r\n<\/body>\r\n<\/html>\r\n<\/pre>\n<\/blockquote>\n","protected":false},"excerpt":{"rendered":"I was curious if javascript was still executed by the browser even if it was within an element that is hidden in the DOM. A quick search yielded no conclusive evidence, so I decided to test myself. Quick answer: Yes, it does still execute – for both inline and included javascript regardless of how it’s […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[3,4],"tags":[],"class_list":["post-221","post","type-post","status-publish","format-standard","hentry","category-software","category-web"],"_links":{"self":[{"href":"https:\/\/shanelabs.com\/blog\/wp-json\/wp\/v2\/posts\/221","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/shanelabs.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/shanelabs.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/shanelabs.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/shanelabs.com\/blog\/wp-json\/wp\/v2\/comments?post=221"}],"version-history":[{"count":8,"href":"https:\/\/shanelabs.com\/blog\/wp-json\/wp\/v2\/posts\/221\/revisions"}],"predecessor-version":[{"id":229,"href":"https:\/\/shanelabs.com\/blog\/wp-json\/wp\/v2\/posts\/221\/revisions\/229"}],"wp:attachment":[{"href":"https:\/\/shanelabs.com\/blog\/wp-json\/wp\/v2\/media?parent=221"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/shanelabs.com\/blog\/wp-json\/wp\/v2\/categories?post=221"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/shanelabs.com\/blog\/wp-json\/wp\/v2\/tags?post=221"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}