Javascript 显示/隐藏带有 iframe 的 div 可在除 IE 之外的所有应用程序中使用
Posted
技术标签:
【中文标题】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 应该很简单......看看你怎么做。以上是关于Javascript 显示/隐藏带有 iframe 的 div 可在除 IE 之外的所有应用程序中使用的主要内容，如果未能解决你的问题，请参考以下文章