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

Posted

技术标签:

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

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

<iframe src="home.html"   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 中的页眉和页脚。 请帮助我,在此先感谢...

【问题讨论】:

【参考方案1】:

尝试在加载时使用窗口

detail.html 代码如下:

<html>
<body>
<iframe src="home.html"   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 中带有页眉、正文和页脚。

以上是关于需要从本地 iframe 中的 src url 中删除页眉和页脚的主要内容,如果未能解决你的问题,请参考以下文章

是否可以在没有 js 的情况下跟踪主 url 中的 iFrame src?

怎么获取 iframe转跳的网址

如何从 iframe 获取当前页面加载的 url [重复]

从嵌入按钮复制的 iframe 中未显示正确的 url

仅当从下拉列表中选择选项时才附加到 iframe src

如何使用 Javascript 从 iframe 实现跨域 URL 访问?