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=".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>

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>

• javascript
• jquery
• html
• iframe

5 Answers 5

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.

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();
});

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();
}

NOTE : This demo was tested on chrome 88 so it is not warrantied to work on each browser

Absolutely yes you can hide iframe elements using plain js no need to use jquery for that.
This is the function that would do us the magic

function myFunction() {
  var iframe = document.getElementById("myFrame");
  var elmnt = iframe.contentWindow.document.getElementsByTagName("tagYouWantFromIframe")[position];
  elmnt.style.display = "none";
}

and here is how we use it

• load the script in the html footer of your file
• insert onload="myFunction()" on your iframe, body tag, or a parent element of the iframe. but better if you just use the body or the iframe tag directly and we are done.

practically see this link https://www.w3schools.com/code/tryit.asp?filename=GOYQTYNRBFVH

because you have a problem in script you should remove this sign" < "in the last of this script

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

it should be like this

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