jQuery - iframe inside iframe - ready vs load
<p>Lets say I have the following: </p>

<p>default.asp:</p>

<pre><code>&lt;iframe src="frameOne.asp" id="myframeOne"&gt;&lt;/iframe&gt;
</code></pre>

<p>frameOne.asp:</p>

<pre><code>&lt;iframe src="frameTwo.asp" id="myframe"&gt;&lt;/iframe&gt;
</code></pre>

<p>frameTwo.asp:</p>

<pre><code>&lt;div id="hello"&gt;Test text&lt;/div&gt;
</code></pre>

<p>Why does the following doesn't work (#1):</p>

<pre><code>$("#myframeOne").load(function () {
         $('#myframeOne').contents().find('#myframeTwo').load(function(){
             $('#myframeOne').contents().find('#myframeTwo').contents().find('#hello').css('background-color','blue');
         });
    });
</code></pre>

<p>And this does apply the CSS?(#2):</p>

<pre><code> $("#myframeOne").load(function () {
             $('#myframeOne').contents().find('#myframeTwo').ready(function(){
                 $('#myframeOne').contents().find('#myframeTwo').contents().find('#hello').css('background-color','blue');
             });
        });
</code></pre>

<p>And this one doesn't(#3):</p>

<pre><code>$("#myframeOne").ready(function () {
                 $('#myframeOne').contents().find('#myframeTwo').ready(function(){
                     $('#myframeOne').contents().find('#myframeTwo').contents().find('#hello').css('background-color','blue');
                 });
            });
</code></pre>

<p>As I understand the .load waits until the content of the iframe is loaded, so I don't quite understand why it behaves differently on the frames (why it works when apply on the outer frame, but not in the inner frame).</p>