需要从本地 iframe 中的 src url 中删除页眉和页脚答案

【问题标题】：Need to remove Header and footer from src url in iframe locally需要从本地 iframe 中的 src url 中删除页眉和页脚
【发布时间】：2020-05-30 03:28:37
【问题描述】：

首先，我是 JS 和 Jquery 的新手。我在本地（桌面）的同一个文件夹中创建了两个 .html 文件，一个是带有页眉、主要内容（两个段落）和页脚的 home.html。现在在另一个文件（detail.html）中，我使用了 iframe 并在其中提供了主页 url。

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

在脚本中，我给出了这个，

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

不仅这个我也试过这些，

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";

对页脚也进行了同样的尝试，但不起作用，它没有删除 iframe 中的页眉和页脚。请帮助我，在此先感谢...

【问题讨论】：

标签： javascript jquery html iframe

【解决方案1】：

尝试在加载时使用窗口

detail.html 代码如下：

<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 代码如下：

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

【讨论】：

不，仍然没有发生任何事情。 home.html 在 iframe 中带有页眉、正文和页脚。