Access parent control from iframe's codebehind

Question

So I'm pretty new to non-mvc web development, and I'm having an issue with iFrames.

In my main page, I have a checkbox which shows and hides an iframe via jQuery. In my iFrame's codebehind, I have a method loadStuff() which I only want to run if the iFrame is visible. That is, I don't want to just stick it in page_load because if I do, it's going to try and run every time the main page gets refreshed.

So I was thinking I'd just do a check to see if the checkbox in the main window is checked and if so, run the loadStuff() method.

The problem is, I can't figure out how to access that checkbox from the iFrame's codebehind. It seems like some variant of this.Parent.FindControls() would work, but I haven't had any luck with that.

Here's a little bit of what I have:

Main page (lets call it mainpage.aspx):

<input type="checkbox" id="showIFrame" onclick="if(this.Clicked) $('#iframe').show(); else $('#iframe').hide();" />

//...

<div id="iframe" style="display:none;">
<iframe runat="server" id="iframeNetSheet" .../></iframe>
</div>

So when that checkbox gets clicked, the iFrame gets shown. That's when I want to invoke the loading function. As of now, it's in the iFrame's page_load, which gets hit every time the parent page is loaded.

Can anyone get me pointed in the right direction?

Answer 1

If you have an IFrame on a page and that page is refreshed the iFrame is also going to be refreshed (every time). So I don't see any reason to check the parent page checkbox value.
Also rather than just setting the visibility of the iframe (if set to visible and src url is blank) set the src and the frame will only be loaded (and loadStuff() called) when the checkbox is checked.
The code would look something like this:

<input type="checkbox" id="showIFrame" onclick="SetFrame(this.checked);" />

function SetFrame(isChecked)
{
   if(isChecked) 
   {
      $('#iframe').show(); 
      var iframeNetSheet = $('#iframeNetSheet');

      if(iframeNetSheet.attr("src") == "")
         iframeNetSheet.attr("src", "SomeUrl"); //This will invoke page_load on iframe.
   }
   else 
      $('#iframe').hide();
}

Leave src url of the frame blank by default in code. (only let it be set by script)

Answer 2

I would suggest that you have your iFrame src set to "about:blank" to start with - then when you click the checkbox you set the correct source. Something like this...

<script type="javascript">
  $(document).ready(function() {
    $("#showIFrame").click(function() {
      var frame = $("#iframeNetSheet");
      if ($("#showIFrame").prop("checked")) {
        frame.show();
        if (frame.prop("src") == "about:blank") {
          frame.attr("src", "newpage.aspx");
        }
      } else {
        frame.hide();
      }
    });
  });
</script>
<input type="checkbox" id="showIFrame" />
<iframe runat="server" id="iframeNetSheet" style="display:none;"/></iframe>

Live JSFiddle Demo

(And after doing all that, because I'm not 100% confident on jQuery - I realise it's pretty much exactly what Magnus was saying from the start as well)

Edit: as Marcus kindly pointed out, there was no need to reset the src back to "about:blank", so have updated the code accordingly (and made slightly more efficient).