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

正如您提到的，您无法控制父母，所以我认为您可以执行以下操作：

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

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

然后在您的身体底部，为就绪函数添加以下脚本：

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

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

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

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

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

1 个答案: