title: document visibilitychange event when visibility changes programmatically
body: <p>I minimized my real world case to a tiny example.</p>
  
  <p>What I want to achieve is to catch document visibility change event.</p>
  
  <p>I see that it works, when I change visibility by switching between browser tabs, but when I change visibility programmatically it does not work.</p>
  
  <p>So here is a <a href="https://fiddle.sencha.com/#view/editor&amp;fiddle/24ra" rel="nofollow noreferrer">demo</a> - to check it just go to another browser tab and you will see some message in the console, if however, you click on <code>hide</code> button, which also changes visibility - it does not work.</p>
  
  <p>And by the way, I really need to deal with visibility event.</p>
  
  <p>In my real world case visibility is changed by some external framework (when switching between html tabs).</p>
  
  <p>I'm not able to catch tab clicks, because tabs may be nested.</p>
  
  <p>So, the only thing that I need is document visibility event.</p>
  
  <p>Here is a minimized code, in case demo is not available</p>
  
  <pre><code>&lt;button onclick="hideIt()"&gt;Hide&lt;/button&gt;
  &lt;iframe id="one"&gt;&lt;/iframe&gt;
  &lt;script&gt;
      var doc = document.getElementById('one').contentWindow.document;
      doc.open();
      doc.write('&lt;html&gt;&lt;head&gt;&lt;title&gt;&lt;/title&gt;&lt;/head&gt;&lt;body&gt;'+
      'One.' +
      '&lt;/body&gt;&lt;/html&gt;');
  
      doc.addEventListener('visibilitychange', function(e) {
          console.log('hidden:' + doc.hidden,
                      'state:' + doc.visibilityState)
      }, false);
  
      doc.close();
  
      function hideIt() {
           var iframe1 = document.getElementById("one");
           iframe1.style.display = "none";
           //iframe is not visible and its internal document as well, but
           //visibilitychange event is not fired
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>So, how can I fix it?</p>