iframe加载一个页面,在子页面中使用js 控制父页面的div显示(父页面的div刚开始是隐藏)

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了iframe加载一个页面,在子页面中使用js 控制父页面的div显示(父页面的div刚开始是隐藏)相关的知识,希望对你有一定的参考价值。

参考技术A ======父页面=========
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>父页面</title>
</head>

<body>
<div style="background:red; display:none" id="div.outter">父页面div</div>

<br/>
<iframe id="inner" name="inner" src="child1.html"></iframe>
</body>

</html>
==========子页面====================
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>子页面</title>
<script type="text/javascript">
function getParentEl()
parent.document.getElementById("div.outter").style.display="";

</script>
</head>

<body>
<input type="text" id="text1.inner" value="inner text"/>
<input type="button" value="显示父页面" onclick="getParentEl()" />
</body>
</html>本回答被提问者采纳
参考技术B parentNode

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

【中文标题】使用 Jquery/CSS 进行跨域 iframe 控制/加载【英文标题】:Cross domain iframe control/loading with Jquery/CSS 【发布时间】:2019-11-04 06:29:59 【问题描述】:

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

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" >
</iframe>

基本上,也许最简单的管理方法是,在 iframe 中更改 URL 时,隐藏内容,然后 onload,再次显示它们,但我无法检测到里面的 URL iframe 即将更改/更改,隐藏内容/隐藏 iframe。

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

【问题讨论】:

【参考方案1】:

正如您所说,您无法控制父母,因此我认为您可以执行以下操作:

在文档的head 中添加script 标记,如下所示:

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加载一个页面,在子页面中使用js 控制父页面的div显示(父页面的div刚开始是隐藏)的主要内容,如果未能解决你的问题,请参考以下文章

iframe与父页面中JS执行顺序控制

一个页面可以用多个iframe吗

iframe每个页面加载css js

检测动态加载的 iframe

iframe页面 JS问题.加载了不执行或者没完全加载如何解决

在子jsp页面中调用父jsp中的function或父jsp调用子页面中的function