Javascript 使用Jquery/CSS进行跨域iframe控制/加载

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

iframe构建得很好，并将内容加载到页面中，使用

onload事件

，我设置了可见性，以便在加载时删除“

闪烁的

”。在一个JS文件中，我分别删除了DocumentReady上的页眉和页脚，这似乎是在可见性进入之前删除它们的。在第一次加载时，一切正常。例如，当您在iframe中导航时，单击链接，

窗口会重新加载带有正确信息的

，除了几秒钟之外，它会加载页眉和页脚并删除它们

理想情况下，永远不要显示页眉和页脚

onload

事件是与iframe内联的JS，而文档就绪是在iframe加载时加载的

文档就绪代码（外部Js）

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

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

函数loadIframe（）{
var ifr=document.getElementById（“mySite”）；
ifr.style.height='75vh'；
}

从本质上讲，也许最简单的管理方法是，在iframe内的URL发生更改时，隐藏内容，然后

onload

，再次显示它们，但我无法检测iframe内的URL是否将要更改/更改，以隐藏内容/隐藏iframe

---

由于我可以访问加载到

iframe

中的实际内容，尽管我无法控制父域，但这里是否有更简单的解决方案？

正如您所述，您无法控制父域，因此我认为您可以执行以下操作：

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

在文档的

标题中添加
脚本
标记，如下所示：

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

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

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

这样做的结果是：无论何时单击iFrame上的任何链接，都不会显示任何内容，当文档准备就绪时，我们的最后一个脚本将删除页眉和页脚，然后显示正文

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

或者，您可以使用一个变量来存储当前会话是在iFrame中还是在单独的窗口中，并将其作为GET或POST与每个链接一起发送，必要时从服务器端删除页眉和页脚。
如您所述，您对父级没有控制权，因此我认为您可以执行以下操作：

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

在文档的
标题中添加
脚本
标记，如下所示：

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

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

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

这样做的结果是：无论何时单击iFrame上的任何链接，都不会显示任何内容，当文档准备就绪时，我们的最后一个脚本将删除页眉和页脚，然后显示正文

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

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