如何隐藏显示iframe

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何隐藏显示iframe相关的知识，希望对你有一定的参考价值。

参考技术A

下面是隐藏显示的代码：

index.

<>

<head>

<meta HTTP-EQUIV="Content-Type" CONTENT="text/; charset=gb2312">

<meta name=GENERATOR content="Microsoft FrontPage 4.0">

<meta name=ProgId content="FrontPage.Editor.Document">

<title>frame框架的显示隐藏操作 - 51windows</title>

</head>

<frameset name=full rows="64,*,64">

<frame name=top scrolling="no" xnoresize target="contents" src=top.>

<frameset cols="25%,*" name=cen>

<frame name=contents target="main" src=left.>

<frame name=main src=main.>

</frameset>

<frame name=bottom scrolling="no" xnoresize target="contents" src=bottom.>

<noframes>

<body>

<p>此网页使用了框架，但您的浏览器不支持框架。

</p>

</body>

</noframes>

</frameset>

</>

main.

<>

<head>

<meta -equiv="Content-Type" content="text/; charset=gb2312">

<meta name=GENERATOR content="Microsoft FrontPage 4.0">

<meta name=ProgId content="FrontPage.Editor.Document">

<title>main - 51windows</title>

</head>

<body>

<SCRIPT LANGUAGE="javascript">

<!--

function shtop

if (parent.full.rows.indexOf("0,*,")!=-1)

parent.full.rows="64,*,"+parent.full.rows.split(",")[2]

document.getElementById("shtop").value="隐藏上部";

else

parent.full.rows="0,*,"+parent.full.rows.split(",")[2]

document.getElementById("shtop").value="显示上部";

function shleft

if (parent.cen.cols=="0,*")

parent.cen.cols="25%,*,"

document.getElementById("shleft").value="隐藏左部";

else

parent.cen.cols="0,*"

document.getElementById("shleft").value="显示左部";

function shbottom

if (parent.full.rows.indexOf(",*,0")!=-1)

parent.full.rows=parent.full.rows.split(",")[0]+",*,64"

document.getElementById("shbottom").value="隐藏下部";

else

parent.full.rows=parent.full.rows.split(",")[0]+",*,0"

document.getElementById("shbottom").value="显示下部";

function maxmain

if (parent.full.rows=="0,*,0")

parent.full.rows="64,*,64"

parent.cen.cols="25%,*"

document.getElementById("maxmain").value="隐藏左上下";

document.getElementById("shtop").value="隐藏上部";

document.getElementById("shleft").value="隐藏左部";

document.getElementById("shbottom").value="隐藏下部";

else

parent.full.rows="0,*,0";

parent.cen.cols="0,*";

document.getElementById("maxmain").value="显示左上下";

document.getElementById("shtop").value="显示上部";

document.getElementById("shleft").value="显示左部";

document.getElementById("shbottom").value="显示下部";

//-->

</SCRIPT>

<input type=button name=maxmain id="maxmain" onclick="maxmain;" value="隐藏左上下">

<input type=button name=shtop id="shtop" onclick="shtop;" value="隐藏上部">

<input type=button name=shleft id="shleft" onclick="shleft;" value="隐藏左部">

<input type=button name=shbottom id="shbottom" onclick="shbottom;" value="隐藏下部">

</body>

</>

框架的嵌套:

<>

<head>

</head>

<body>

<iframe width=468 height=60 src=abc.aspx></iframe>

<iframe width=468 height=60 src=cde.aspx></iframe>

</body>

</>

#################################################

<>

<head>

<meta -equiv="content-type" content="text/; charset=gb2312">

<title>无标题文档</title>

</head>

<frameset rows="77,181" cols="*" framespacing="0" border=0>

<frame src=abc.aspx>

<frame src=cde.aspx>

</frameset>

<noframes><body>

</body></noframes>

</>

//*****************说明************************：

frameset是框架，一个网页被划分成几个块， 每个块为不同的网页文件。

iframe是内嵌网页，可以被嵌在一个页页的任何地方。

一般iframe使用灵活些。

当使用框架时页面中不应该有body标签。

frameset标签是成对出现的,以<frameset>开始,</frameset>结束，里面用frame。

frameset里面还能嵌入frameset。

嵌套框架,框架可以进行多层嵌套。

frameset里面的id,为了方便后面用Javascript来访问这个对象.

如下：

<frameset rows="58,*" frameborder="NO" border=0 framespacing="0">

<frame src=top. name=topFrame scrolling="NO" noresize ><!--页头-->

<frameset rows="*,20" cols="*" framespacing="0" frameborder="NO" border=0>

<frameset rows="*" cols="120,15,*" framespacing="0" frameborder="NO" border=0 id="leftFrameSet">

<frame src=menu. name=leftFrame scrolling="NO" noresize><!--菜单-->

<frame src=mid. name=midFrame scrolling="NO" noresize><!--菜单收缩条-->

<frameset rows="35,*" framespacing="0" frameborder="NO" border=0>

<frame src=navi. name=righttop scrolling="NO" noresize><!--导航-->

<frameset cols="*,200" framespacing="0" frameborder="NO" border=0>

<frame src= name=mainFrame>

<frame src= name=rightFrame scrolling="NO">

</frameset>

</frameset>

</frameset>

<frame src=bottom. name=bottomFrame scrolling="NO" noresize><!--页尾-->

</frameset>

</frameset>

Javascript 显示/隐藏带有 iframe 的 div 可在除 IE 之外的所有应用程序中使用

【中文标题】Javascript 显示/隐藏带有 iframe 的 div 可在除 IE 之外的所有应用程序中使用【英文标题】：Javascript show/hide div with iframe inside works in everything but IE 【发布时间】：2012-12-30 12:06:26 【问题描述】：

这是我目前使用的javascript 代码：

     function toggleContainer(containerID, hideContainerIDs) 
            if(hideContainerIDs) 
                for(var i=0; i<hideContainerIDs.length; i++) 
                    ajaxChat.showHide(hideContainerIDs[i], 'none'); 
                
                   
            ajaxChat.showHide(containerID);
            if(typeof arguments.callee.styleProperty == 'undefined') 
                if(typeof isIElt7 != 'undefined') 
                    arguments.callee.styleProperty = 'marginRight';
                 else 
                    arguments.callee.styleProperty = 'right';
                
            
            var containerWidth = document.getElementById(containerID).offsetWidth;
            if(containerWidth) 
                document.getElementById('chatList').style[arguments.callee.styleProperty] = (containerWidth+28)+'px';
                document.getElementById('chatBooth').style[arguments.callee.styleProperty] = (containerWidth+28)+'px';  
             else 
                document.getElementById('chatList').style[arguments.callee.styleProperty] = '20px';
                document.getElementById('chatBooth').style[arguments.callee.styleProperty] = '20px';

DIV 和 IFrame 代码：

<div id="chatBooth" style="display:none; overflow: hidden;"> 
        <iframe style="overflow:hidden;height:100%;width:100%"   frameborder="0" scrolling="no" name="booth" id="booth" src="about:blank">
        </iframe>
    </div>

我已经尝试了我能想到的一切，这段代码在每个浏览器中都有效，但IE 除外。它所做的是，当您单击当前可见窗口内的链接时，它会在隐藏的IFrame 内加载一个新页面，并且您可以通过单击按钮使所述IFrame 可见。这是显示和隐藏隐藏的DIV 和IFrame 的按钮。

<input type="button" value="[LANG]toggleChat[/LANG]" title="[LANG]toggleTitleChat[/LANG]"  onclick="ajaxChat.showHide('chatBooth', null);"/>

这里是Link 的代码，它改变了IFrame 中的内容，除了IE 之外的所有浏览器都可以使用！

alert(this.channelName);
            document.getElementById('booth').contentWindow.location.reload(true);
            document.getElementById('booth').src = 'http://www.cnn.com';

上面的代码适用于除IE 之外的所有内容。我完全不知所措。我花了几个小时搜索Google，但似乎找不到解决方案，甚至找不到导致问题的原因。任何帮助将不胜感激。

这里是请求的 showHide 代码：

showHide: function(id, styleDisplay, displayInline) 
    var node = document.getElementById(id);
    if(node) 
        if(styleDisplay) 
            node.style.display = styleDisplay;
         else 
            if(node.style.display == 'none') 
                node.style.display = (displayInline ? 'inline' : 'block'); 
             else 
                node.style.display = 'none';

用于重新加载 iframe 和更改 iframe SRC 的代码

document.getElementById('booth').contentWindow.location.reload(true);
document.getElementById('booth').src = 'http://www.WEBSITE.com'+ ajaxChatConfig.loginChannelName +'/index.html';

上述内容似乎不允许 IE 在 IFrame 中加载任何内容，即使它被告知这样做也是如此。

【问题讨论】：

你有调试的工作示例吗？例如在 jsfiddle.net 上？ 你能发布你的 ajaxChat.showHide 代码吗？ “不工作”是指 iframe 未加载或出现错误？ 没有错误，它根本不显示 iframe，如果你想看一下，我有一个完整的工作示例，但我不想显示。跨度> 什么是ajaxChat？它是 div 还是 iFrame 还是什么？ 【参考方案1】：

我复制了您提供的代码，并通过简单地更改您的一个函数来使其工作。但是，因为我没有您的代码的实际工作副本，所以我不能确定这是否适合您...

我从这里更改了 showHide 函数 decleration... 

showHide: function(id, styleDisplay, displayInline)

到这个...

function showHide(id, styleDisplay, displayInline)

我使用的 HTML：

<body>
    <div id="chatBooth" style="display:none; overflow: hidden;width:100%;">
        <iframe style="overflow:hidden;height:100%;width:90%;border:1px solid red;" scrolling="no" name="booth" id="booth" src="http://www.ebay.com"></iframe>
    </div>

    <input type="button" value="toggleChat" title="toggleTitleChat" onclick="showHide('chatBooth', null);"/>
</body>

更新::

你可以使用这个函数来替换 document.getElementById('booth').contentWindow.location.reload(true); 

function loadContent(passedInURL)
    if(!passedInURL)
        passedInURL = "http://www.ebay.com";
    
    var theIFrame = "<iframe style='overflow:hidden;height:200px;width:90%;border:1px solid red;' scrolling='no' name='booth' id='booth' src='";
    theIFrame += passedInURL + "'></iframe>";
            document.getElementById('chatBooth').innerHTML= theIFrame;

并将此按钮添加到页面..

<input type="button" value="reLoad" title="reLoadFrame" onclick="loadContent();"/>

【讨论】：

我知道你在那里做什么，问题是我认为它与 document.getElementById('booth').contentWindow.location.reload(true); document.getElementById('booth').src = 'http://www.WEBSITE.com'+ajaxChatConfig.loginChannelName +'/index.html'; 我在代码上方添加了正确的格式，它似乎不想让我在这里做。但它所做的是不允许 IE 重新加载 IFrame 的 SRC，即使页面首次加载也是如此。 一个似乎可行的破解方法是替换 document.getElementById('booth').contentWindow.location.reload(true)。 您可以使用... document.getElementById('chatBooth').innerHTML= " 那么使用变量作为 src 应该很简单......看看你怎么做。

以上是关于如何隐藏显示iframe的主要内容，如果未能解决你的问题，请参考以下文章

动态 iframe 高度取决于隐藏/显示

如何在 Wordpress 的 iFrame 中隐藏源 URL

ios上网页iframe里，把页面下拉，进行元素的隐藏显示和增删节点的dom操作页面会瞬间回到顶部

将鼠标悬停在 iframe 上时如何显示文本

如何在地址栏打开一个网页指定IFRAME进行显示

隐藏外部提供的 iframe