title: Pass jquery variables between iframe and parent
body: <p>How can I work with jQuery and <code>iframe</code>. Get and pass <code>var</code> from <code>iframe</code> to <code>body</code> and from <code>body</code> to <code>iframe</code>. I have the following example. How can I click the button in <code>iframe</code> and make it take effect on the the <code>body</code> <code>#test</code>. How about ready var x in iframe.  </p>
  
  <pre><code>&lt;body&gt;
  var x = "whatever";
  &lt;div id"test"&gt;&lt;/div&gt;
  &lt;iframe width="200px" height="200px" src="page.html"&gt;&lt;/iframe&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>Inside page.html i have </p>
  
  <pre><code>&lt;button&gt;clickme&lt;/button&gt;
  &lt;script&gt;
  var elm = $('&lt;span&gt;content&lt;/span&gt;');
      elm.appendTo('#test')
  &lt;/script&gt;
  </code></pre>