Search code examples
javascripthtmliframe

remove the header and footer from the src in iframe

I am having simple issue regarding the iframe, I want to strip the header and footer from the source in the iframe, I tried clipping and pointing to the content but it is not working you have any thoughts?

My code is :

<div style="height:1500px;">
  <iframe src="url/#content" name="iframe_all" scrolling="no"
               frameborder="0" height="100%" width="100%" ></iframe>
</div>

where #content is the content in the source. It works fine one the first page of source but when the user clicks on the second page of the source in iframe again the header appears.

Solution

  • You can access the content of the iframe with javascript:

    var frame = document.querySelector("iframe");
header = frame.contentDocument.querySelector("header");
header.remove();
footer = frame.contentDocument.querySelector("footer");
footer.remove();

    Or adapt the selectors for the elements you need.