Is There A Way Hide Elements In Iframe Src Page?

January 31, 2024 Post a Comment

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.a

Solution 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.

Solution 2:

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

Solution 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'>
<formstyle='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
    <inputtype="hidden"name='data'value="data you may want to send"/><inputtype="submit"style='display: none;'></form></div><iframeid='target_iframe'src=''></iframe>//jswindow.onload = function () {
  var form = document.getElementById("fakeForm");
  form.submit();
  var deleteParent = document.getElementById("deleteForm");
  deleteParent.remove();
}

Solution 4:

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

functionmyFunction() {
  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

Solution 5:

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

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

it should be like this

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

Html5 Website