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 Ca

Answer 1

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

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

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 4

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>