title: Have the child iframe reference itself, not the parent iframe
body: <p>What I have is a nested Iframe like this</p>
  
  <pre><code>&lt;iframe id="is Static"&gt;
     stuff
    &lt;iframe id="Is Dynmic&gt;
       &lt;html&gt;...&lt;/html&gt;
       &lt;body id="This is thebody"&gt; other stuff &lt;/body&gt;
  </code></pre>
  
  <p>and I have this bit of code that listen to on the mouse up event for the body, use for detecting when text is selected. The way I am binding the event listener is like this</p>
  
  <pre><code> $(window).load(function() {
          var listOfEditor = editorIds.split(",");
          for (var i = 0; i &lt; listOfEditor.length; i++) {
              var currentFrame = $("#" + listOfEditor[i] + "_ifr");              
              if (currentFrame.exists()) {                 
                  currentFrame.contents().find("body").each(function () {                            
                          $(this).on("mouseup", function () {
                             console.log(window.frameElement.contentWindow.getSelection());
                              console.log(window.frames);
                              console.log(window.parent);
                              console.log($(this).parent("iframe");
                          });
                      }
                  );
              }               
          };
  </code></pre>
  
  <p>As you can see from above I have a list of Id. The Id name correspond to various iframes on the page, and using that list I find the body of each iframe and bind the event listener to get the selected text depedning which iframe has the selected text. The problem that I am having is that using the <code>window</code> object get's me the parent iframe with the static name, but what I want is the reference to the inner iframe that contains the body element. The complete code would look like this </p>
  
  <pre><code>&lt;iframe id="is Static"&gt;      
  &lt;script&gt;
   $(window).load(function() {
          var listOfEditor = editorIds.split(",");
          for (var i = 0; i &lt; listOfEditor.length; i++) {
              var currentFrame = $("#" + listOfEditor[i] + "_ifr");              
              if (currentFrame.exists()) {                 
                  currentFrame.contents().find("body").each(function () {                            
                          $(this).on("mouseup", function () {
                             console.log(window.frameElement.contentWindow.getSelection());
                              console.log(window.frames);
                              console.log(window.parent);
                              console.log($(this).parent("iframe");
                          });
                      }
                  );
              }               
          };
  &lt;/script&gt;
  stuff
    &lt;iframe id="Is Dynmic&gt;
       &lt;html&gt;...&lt;/html&gt;
       &lt;body id="This is thebody"&gt; other stuff &lt;/body&gt;
  </code></pre>
  
  <p>where the <code>$(window).load</code> is executed from the parent Iframe level. I have seen various questions, but they are about accessing the parent iframe from within the child iframe, or accessing the elements inside the child iframe.  </p>