title: Making script wait until iframe has loaded before running
body: <p>The site I'm working on has a Live Chat plugin on an iframe. I'm trying to change an image if there are no agents available. My code works on the console, but nothing on the site.</p>
  
  <pre><code>var LiveChatStatus = $("iframe").contents().find(".agentStatus").html();
  if (LiveChatStatus =="Offline"){
      $('#liveChat').html('&lt;img src="%%GLOBAL_ShopPath%%/product_images/theme_images/liveoffline.png"&gt;');
  }
  </code></pre>
  
  <p>I tried this:</p>
  
  <pre><code>$('iframe').ready(function(){
      var LiveChatStatus = $("iframe").contents().find(".agentStatus").html();
      if (LiveChatStatus =="Offline"){
          $('#liveChat').html('&lt;img src="%%GLOBAL_ShopPath%%/product_images/theme_images/liveoffline.png"&gt;');
      }
  });
  </code></pre>
  
  <p>And this:</p>
  
  <pre><code>$(document).ready(function(){
     var LiveChatStatus = $("iframe").contents().find(".agentStatus").html();
     if (LiveChatStatus =="Offline"){
         $('#liveChat').html('&lt;img src="%%GLOBAL_ShopPath%%/product_images/theme_images/liveoffline.png"&gt;');
     }
  });
  </code></pre>
  
  <p>But neither worked</p>