jQuery change height on dynamically written iframe
<p>I am writing a widget: loaded with JavaScript then embed an iframe, so i can get jQuery support without problems and no CSS problems in the widget. </p>

<p>The widget is embedded onto sites like this:</p>

<pre><code>&lt;script type="text/javascript"&gt;
var _sid = '1';
  (function() {
    var se = document.createElement('script'); se.type = 'text/javascript'; se.async = true;
    se.src = '//xxxxxxx.com/loader.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(se, s);
  })();
&lt;/script&gt;
</code></pre>

<p>Inside the <code>loader.js</code> i am writing an the following code to the page:</p>

<pre><code>&lt;div id="lHB" style="margin: 0px; padding: 0px; border: 0px; background-color: transparent; overflow: hidden; position: fixed; z-index: 10000001; display: block; right: 0px; bottom: 0px; height: 28px; width: 240px; background-position: initial initial; background-repeat: initial initial;" class="_FloatingButton"&gt;
    &lt;iframe id="_iframe" src="http://www.xxxxxxx.com/index.php" frameborder="0" style="background-color: #eee; vertical-align: text-bottom; overflow: hidden; position: relative; width: 100%; height: 100%; margin: 0px; z-index: 999999;"&gt;
    &lt;/iframe&gt;
&lt;/div&gt;
</code></pre>

<p>Inside my <code>index.php</code> is where i am filling the widget content, i do this with jQuery. The reason i am loading this from an iframe is to make sure that i do not get CSS problems and jQuery conflicts.</p>

<p>The index.php contains:</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;&lt;meta charset="UTF-8"&gt;&lt;/head&gt;
&lt;body&gt;
&lt;script type="text/javascript"&gt;
var _sid = '1';
  (function() {
    var se = document.createElement('script'); se.type = 'text/javascript'; se.async = true;
    se.src = '//xxxxxxxxxx.com/hello.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(se, s);
  })();
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>The <code>hello.js</code> dynamically loads the widget content onto the <code>index.php</code> page. Everything works great the only problem is:</p>

<p>I want to change the <code>height: 28px;</code> (loaded in <code>loader.js</code>) from <code>hello.js</code>. I have tried to find the </p>

<pre><code>$('#_iframe', window.parent.document).css('height', 220);
</code></pre>

<p>But it wont find the <code>_iframe</code> :/</p>

<p>Any ideas what i am doing wrong?</p>
