title: IFrame OnReadyStateChange function
body: <p>I have an asp.webforms application and on page a i have a hidden div with progressbar and iframe. To iframe i try loaded form from another application on same domain.</p>
  
  <pre><code>&lt;div id="pagePreview" style="display: none;"&gt;
              &lt;div class="progressBarWrapper" id="waitDialog" style="opacity:1;filter:alpha(opacity=100);display:none;"&gt;
                  &lt;div class="progressBarDetail" style="margin-top:25%;"&gt;
                      &lt;asp:Image ID="imgLoading" runat="server" ImageUrl="~/Images/wait.gif" /&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;iframe id="previewContent" onreadystatechange="iframeLoaded(this);"&gt;&lt;/iframe&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>On a click event i call a function to show this div in jqueryUI dialog and i Want show progressbar until the page in Iframe is not loaded.</p>
  
  <pre><code>var isClickedForDialog = false;
  
  function iframeLoaded(args) {
              if (args.readyState == "complete" &amp;&amp; isClickedForDialog) {
                  var pagePreview = $('#pagePreview'); // dialog
                  var waitDialog = $('#waitDialog'); // progress
  
                  waitDialog.hide();
  
                  isClickedForDialog = false;
              }
          }
  
  function showModalWindow(url, hideCloseButton) {
              isClickedForDialog = true;
  
              var previewContent = $('#previewContent'); // Iframe
              var pagePreview = $('#pagePreview'); // dialog
              var waitDialog = $('#waitDialog'); // progresss
  
              waitDialog.show();
  
              previewContent.attr('src', url); 
  
              pagePreview.dialog(
                      {
                          draggable: false,
                          resizable: false,
                          height: 764,
                          width: 1020,
                          modal: true,
                          close: function (event, ui) {
                              previewContent.attr('src', '');
                          },
                          open: function (event, ui) {
                              if (hideCloseButton) {
                                  $(this).parent().children().children('.ui-dialog-titlebar-close').hide();
                              }
                          }
                      });
          }
  </code></pre>
  
  <p>In IE everything works fine. The dialog box and progressbar displays and when the URL is loaded in an iframe, progressbar disappears and i see only webforms in IFrame.</p>
  
  <p>But in FireFox and Chrome this does not work.</p>
  
  <p>The browser ignores the onreadystatechange event. I tried to handle an event as following:</p>
  
  <pre><code>$('#previewContent').bind('onreadystatechange', iframeLoaded, false); 
  $('#previewContent').on('onreadystatechange', iframeLoaded);
  </code></pre>
  
  <p>but without success.</p>
  
  <p>know how to solve this? thanks</p>