title: how to change iframe html within a bootstrap 2 modal
body: <p>I have access to change a JS file that is on the same domain as the iframes src but not served within the iframe content itself. I presume i have to wait until the iframe has loaded to change html but everything i try seems to fail.</p>
  
  <p>The modal is opened when a button with an ID of "body_btnrewardsmodal" is clicked.</p>
  
  <p>Here is my failed attempt.</p>
  
  <p>HTML : </p>
  
  <pre><code>&lt;div id="ajax-rewards-modal" class="modal hide fade in" tabindex="-1" role="dialog" aria-labelledby="h3RewardsTitle" aria-hidden="false" style="display: block;"&gt;
      &lt;div class="modal-header"&gt;
          &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;×&lt;/button&gt;
          &lt;h3 id="h3RewardsTitle"&gt;donut&lt;/h3&gt;
      &lt;/div&gt;
      &lt;div class="modal-body"&gt;
          &lt;div id="divgiveafew"&gt;
              &lt;iframe&gt;
                 &lt;!DOCTYPE html&gt;
                 &lt;html class="phone desktop-device firefox"&gt;
                 &lt;head&gt;&lt;/head&gt;
                 &lt;body class="PopupWindow" onload="window.focus();"&gt;
                 &lt;div class="row"&gt;
                   &lt;div class="span02"&gt;
                     text
                   &lt;/div&gt;
                 &lt;/div&gt;
               &lt;/body&gt;
               &lt;/html&gt;
              &lt;/iframe&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JS : </p>
  
  <pre><code>$(document).on('click', '#body_btnrewardsmodal', function() {
      $('#divgiveafew iframe').load(function(){
          if ($('#divgiveafew iframe').contents().find('body').children().length &gt; 0) {
              console.log('loaded');
              $('this').contents().find('.span02').prepend('&lt;div class="alert alert-info" class="padding:8px;"&gt;&lt;p style="margin:0"&gt;Some text&lt;/p&gt; &lt;ul class="unstyled inline"&gt;&lt;li&gt;#courageous&lt;/li&gt;&lt;li&gt;#innovative&lt;/li&gt;&lt;li&gt;#passionate&lt;/li&gt;&lt;li&gt;#adaptable&lt;/li&gt;&lt;li&gt;#honest&lt;/li&gt;&lt;li&gt;#thinkbig&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;');
          } else {
              console.log('not loaded');
          }
      });
  });
  </code></pre>