title: How to access the variable in iframe which contain another html?
body: <p>I'm using iframe <code>test</code> in my <code>test.html</code>. Another <code>test2.html</code> file is loaded in that iframe <code>test</code>, i need to access the variable's which is used in the <code>test2.html</code>. Is there any way to access that in the <code>test.html</code>.</p>
  
  <p>Here is my Samples</p>
  
  <p><strong>test.html</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
      &lt;title&gt;&lt;/title&gt;
      &lt;link href="Styles/redmond/jquery-ui-1.10.3.custom.css" rel="stylesheet" /&gt;
      &lt;script src="Js/jquery-1.9.1.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="Js/jquery-ui-1.10.3.custom.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
          $(document).ready(function(){
             //this code is doesn't work
             var data1= document.getElementById('test').contentWindow.document.data;
          });
      &lt;/script&gt;
      &lt;style type="text/css"&gt;
          body,html{
              height:100%;
              width:100%;
              top:0;
              left:0;
              overflow:auto;
          }
          #test{
              height:250px;
              width:250px;
              border:1px solid gray;
          }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;iframe id="test" src="test2.html"&gt;&lt;/iframe&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>test2.html</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
      &lt;title&gt;&lt;/title&gt;
      &lt;link href="Styles/redmond/jquery-ui-1.10.3.custom.css" rel="stylesheet" /&gt;
      &lt;script src="Js/jquery-1.9.1.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="Js/jquery-ui-1.10.3.custom.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
          var data = 'This data is retrived from test2.html';
          $(document).ready(function () {
              $('#div')[0].textContent = data;
          });
      &lt;/script&gt;
      &lt;style type="text/css"&gt;
          body,html{
              height:100%;
              width:100%;
              top:0;
              left:0;
              overflow:auto;
          }
          #div{
              height:50px;
              width:200px;
              border:1px solid gray;
              margin:10px;
          }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="div"&gt;Hello&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Any suggestions should be appreciated...!</p>