javascript - 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

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.