Home » Jquery » javascript – Need to remove Header and footer from src url in iframe locally-Exceptionshub

javascript – Need to remove Header and footer from src url in iframe locally-Exceptionshub

Posted by: admin February 24, 2020 Leave a comment

Questions:

First of all, I’m new to JS and Jquery.
I created two .html files in a same folder locally(Desktop), one is home.html with Header, Main content(Two para), and footer. Now in another file(detail.html), i used iframe and give home url in it.

<iframe src="home.html" height="600" width="900" id="myframe"></iframe>

And in script, i gave this,

    $("#myframe").contents().find("#site-header").remove(); 

not only this i tried these too,

var frame = document.querySelector("myframe");
header = frame.contentDocument.querySelector("site-header");
header.remove();

var iframe = document.getElementById("myframe");
var elmnt = iframe.contentWindow.document.getElementById("site-header");
elmnt.style.display = "none";

Tried same for footer also but not working, its not removing the header and footer in iframe.
Please help me in this, Thanks in advance…

How to&Answer:

Try using window on load

detail.html code below:

<html>
<body>
<iframe src="home.html" height="600" width="900" id="myframe"></iframe>

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>

    <script>
        $(window).on("load",function(){
            $('#myframe').contents().find("#site-header").remove();
            $('#myframe').contents().find("#site-footer").remove();
        })
    </script>

</body>
</html>

home.html code below:

<html>
<body>
    <div id="site-header">
        <h1>Header</h1>
    </div>

    <div class="body">
        <h1>My Body content goes here</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi consequuntur est fugiat itaque maxime quia. Aspernatur consequuntur, dolore earum est facilis in laborum numquam pariatur placeat quas, ut voluptatibus! Cupiditate deleniti excepturi quos. Atque incidunt iure quasi tempora? Accusamus accusantium delectus.</p>
    </div>

    <div id="site-footer">
        <h1>Footer</h1>
    </div>

</body>
</html>