跨域 iframe 控制/加载 Jquery/CSS

Question

我需要将我的网站嵌入到另一个网站上，但从我的网站上删除页眉和页脚，基本上只显示内容。

iframe构建得很好，并将内容加载到页面中，并使用onload event，我设置了可见性，以便在加载时删除"flashing"。在JS文件中，我分别删除了文档就绪上的页眉和页脚，这似乎在可见性开始之前删除了它们。在第一次加载时，一切正常。当您在 iframe 中导航时，单击链接(例如)，window reloads包含正确信息(除了几秒钟)之外，它会加载页眉和页脚并删除它们。

理想情况下，页眉和页脚根本不应显示。

onload事件与 iframe 一起内联 JS，而文档就绪在加载 iframe 时加载。

文档就绪代码(外部 Js)

if (window.location !== window.parent.location) {
setTimeout(function () {
$('.header').remove();
$('.footer').remove();
}, 500);
}

以及要嵌入到单独域/网站的代码：

<script>
function loadIframe() {
var ifr = document.getElementById("mySite"); 
ifr.style.height = '75vh'; 
}
</script>
<iframe style="visibility:hidden;" id="mySite" onload="loadIframe()" class="catalog-frame" src="http://xxxxxxx.com/about" width="100%">
</iframe>

从本质上讲，也许最简单的管理方法是，在更改 iframe 内的 URL 时，隐藏内容，然后onload，再次显示它们，但我无法检测 iframe 内的 URL 是否即将更改/更改，隐藏内容/隐藏 iframe。

由于我可以访问加载到iframe中的实际内容，尽管我无法控制父域，但这里实际上是否有更简单的解决方案？

Answer 1

正如你提到的，你无法控制父级，所以在我看来你可以做到以下几点：

在文档head中添加script标签，如下所示：

if (window.location !== window.parent.location) {
$("body").css("display", "none");
//$("loading-pic").css("display", "block");
}

然后在正文底部，为 ready 函数添加以下脚本：

$( document ).ready(function() {
$('.header').remove();
$('.footer').remove();
//$("loading-pic").css("display", "none");
$("body").css("display", "block");
});

应该以这种方式发生的情况是：每当您单击 iFrame 上的任何链接时，都不会显示任何内容，当文档准备就绪时，我们的最后一个脚本将删除页眉和页脚，然后显示正文。

您还可以在加载内容时显示加载图片。

或者，您可以使用变量来存储当前会话是在 iFrame 中还是在单独的窗口中，并将其作为 GET 或 POST 与每个链接一起发送，并在需要时从服务器端删除页眉和页脚。