is there a way hide elements in IFRAME src page?

Question

I have a very simple code. I like to hide some DIV's in my IFRAMe. So my index.html page looks like this, so the whole idea is hide the top and the leftpanel of from the Calendar.aspx page.

any idea what's wrong with my code or how should I do this?

<script src="https://code.jquery.com/jquery-1.11.1.min.js"></<script>

<script type="text/javascript">
$( document ).ready(function() {
$("#leftpanel").hide();
$("#toppanel").hide
});
();
</script>
<iframe height="800px" width="800px"  src="https://domain/Calendar/Calendar%20Color%20Overview.aspx" >
</iframe>

Answer 1

I achieved this by creating a hidden form that posts data to the iframe src then deletes itself onpageload. Left with a iframe with src(unknown).

I used post to send data to url. Need full control of target domain to receive request. Have not tried code with a GET request.

//html
<div id='deleteForm'>
<form style='display: none;' class='fakeForm' id='fakeForm' target="target_iframe" action="(iframe url)" method="post">
    //(optional) can send data to iframe src as a post request
    <input type="hidden" name='data' value="data you may want to send"/>
    <input type="submit" style='display: none;'>
</form>
</div>

<iframe id='target_iframe' src=''></iframe>

//js
window.onload = function () {
  var form = document.getElementById("fakeForm");
  form.submit();
  var deleteParent = document.getElementById("deleteForm");
  deleteParent.remove();
}

Answer 2

You can try this:

$('#iframeID').load(function(){
    $('#iframeID').contents().find('#leftpanel').hide();
    $('#iframeID').contents().find('#toppanel').hide();
});

Or:

$(document).ready(function(){
    $('#iframeID').contents().find('#leftpanel').hide();
    $('#iframeID').contents().find('#toppanel').hide();
});

This method is not possible if you want to work with different domains.

Answer 3

The document focuses on the current document and not the <iframe>. You need to go through its contents and find the elements before hiding them.

$('iframe').load(function() {
    $('iframe').contents().find('#leftpanel,#toppanel').hide();
});