时间戳

首页 > 解决方案 > 使用 Jquery/CSS 进行跨域 iframe 控制/加载

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

问题描述

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

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，这里实际上是否有更简单的解决方案，尽管我无法控制父域？

标签： javascriptjqueryhtmliframecross-domain

解决方案

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

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 与您的每个链接一起发送，并在需要时从服务器端删除页眉和页脚。

推荐阅读