Javascript 从帧中的其他iframe隐藏iframe或div
我试图从另一个包含帧集的iframe显示或隐藏包含iframe的div 因此,如果您正在查看代码;我试图用shades.html中的函数显示或隐藏div“dd”。Shades.html是index2.html中框架集的一部分,该框架集显示在index.html中的iframe“UBERFRAME”中 一些代码:Javascript 从帧中的其他iframe隐藏iframe或div,javascript,html,css,iframe,frames,Javascript,Html,Css,Iframe,Frames,我试图从另一个包含帧集的iframe显示或隐藏包含iframe的div 因此,如果您正在查看代码;我试图用shades.html中的函数显示或隐藏div“dd”。Shades.html是index2.html中框架集的一部分,该框架集显示在index.html中的iframe“UBERFRAME”中 一些代码: Index.html: <HTML> <BODY> <div style="display:block;position:absolute;top:
Index.html:
<HTML>
<BODY>
<div style="display:block;position:absolute;top:20px;left:20px;z-index:997;">
<iframe name="UBERFRAME" src="index2.html" frameborder="0" allowtransparency="yes" scrolling="no" style="width:800; height:480; position:relative; left:0px;top:0px;margin:0;padding:0;" ></iframe>
</div>
<div id="dd" name="dd" style="position:absolute;top:20px;left:20px;z-index:998;">
<iframe id = "overlayframe" name = "OVERLAY" src="dd.png" frameborder="0" allowtransparency="yes" scrolling="no" style="width:800px; height:480px; position:relative; left:0px;top:0px;margin:0;padding:0;" ></iframe>
</div>
</BODY>
<HTML>
<HEAD>
<script data-require="jquery@2.1.1" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
function showDuck(){
$('#dd').show();
$('#overlayframe').show;
}
function hideDuck(){
$('#dd').hide();
}
</script>
</HEAD>
<BODY>
<div style="display:block;position:absolute;top:20px;left:20px;z-index:997;">
<iframe name="UBERFRAME" src="index2.html" frameborder="0" allowtransparency="yes" scrolling="no" style="width:800; height:480; position:relative; left:0px;top:0px;margin:0;padding:0;" ></iframe>
</div>
<div id="dd" name="dd" style="display:none;position:absolute;top:20px;left:20px;z-index:998;">
<iframe id="overlayframe" name="OVERLAY" src="testframe.html" frameborder="0" allowtransparency="yes" scrolling="no" style="width:800px; height:428px; position:relative; left:0px;top:0px;margin:0;padding:0;" ></iframe>
</div>
</BODY>
</HTML>
index2.html:
<HTML>
<FRAMESET ROWS="51,376,53,*" FRAMEBORDER="0" FRAMESPACING="0">
<FRAMESET COLS="70,335,324,71,*" FRAMEBORDER="0" FRAMESPACING="0">
<FRAME SRC="HEADER/home.html" NAME="homeheader" NORESIZE SCROLLING="no">
<FRAME SRC="HEADER/name.html" NAME="nameheader" NORESIZE SCROLLING="no">
<FRAME SRC="HEADER/datetime.html" NAME="datetimeheader" NORESIZE SCROLLING="no">
<FRAME SRC="HEADER/help.html" NAME="helpheader" NORESIZE SCROLLING="no">
</FRAMESET>
<FRAME SRC="mainempty.html" NAME="mainframe2" NORESIZE SCROLLING="no" BORDER="0">
<FRAMESET COLS="69,142,70,316,100,103,*" FRAMEBORDER="0" FRAMESPACING="0">
<FRAME SRC="FOOTER/so.html" NAME="so" NORESIZE SCROLLING="no">
<FRAME SRC="FOOTER/shades.html" NAME="shades" NORESIZE SCROLLING="no">
<FRAME SRC="FOOTER/sendsource.html" NAME="sendsource" NORESIZE SCROLLING="no">
<FRAME SRC="FOOTER/volume.html" NAME="volume" NORESIZE SCROLLING="no">
<FRAME SRC="FOOTER/micmute.html" NAME="micmute" NORESIZE SCROLLING="no">
<FRAME SRC="FOOTER/outmute.html" NAME="outmute" NORESIZE SCROLLING="no">
</FRAMESET>
</FRAMESET>
shades.html:
<HTML>
<HEAD>
<script type="text/javascript">
function showdd() {
window.frames['overlayframe'].style.display = "none";
}
</script>
</HEAD>
<BODY>
<a href="#" onclick="showdd(); return false;" >
<img src="foo.png">
</a>
</BODY>
</HTML>
<HTML>
<BODY>
<a href="#" onclick="javascript:window.parent.parent.showDuck(); return false;">
show Donald Duck
</a>
</BODY>
</HTML>
函数showdd(){
window.frames['overlayframe'].style.display=“无”;
}
或plunkr demo:这三个页面(父文档和两个iFrame)是否都来自同一个域和子域
如果不是,你唯一的选择就是使用
即使它们来自同一个域,与直接访问另一个页面的DOM相比,post消息也是一种很好的方法
无论采用哪种方式,无论是否使用postmessage,您都需要一个对iframe的窗口对象的引用
一种方法是让框架A通知父页面(通过引发事件或调用父页面js中的函数),然后让父页面通知框架B
如果您提供一个示例页面,我可以为您创建一个工作示例
编辑:下面是从解决方案到您提供的示例的代码示例。
请注意框架是如何调用函数父文档的。父文档然后操纵另一个iframe的DOM
在框架A中:
$('#show').click(window.parent.showDuck);
$('#hide').click(window.parent.hideDuck);
在父文档中:
function showDuck(){
$('#overlayframe')[0].contentWindow.document.getElementById('duck').style.setProperty('visibility', 'visible');
}
function hideDuck(){
$('#overlayframe')[0].contentWindow.document.getElementById('duck').style.setProperty('visibility', 'hidden');
}
一位同事帮我解决了这个问题: Index.html:
<HTML>
<BODY>
<div style="display:block;position:absolute;top:20px;left:20px;z-index:997;">
<iframe name="UBERFRAME" src="index2.html" frameborder="0" allowtransparency="yes" scrolling="no" style="width:800; height:480; position:relative; left:0px;top:0px;margin:0;padding:0;" ></iframe>
</div>
<div id="dd" name="dd" style="position:absolute;top:20px;left:20px;z-index:998;">
<iframe id = "overlayframe" name = "OVERLAY" src="dd.png" frameborder="0" allowtransparency="yes" scrolling="no" style="width:800px; height:480px; position:relative; left:0px;top:0px;margin:0;padding:0;" ></iframe>
</div>
</BODY>
<HTML>
<HEAD>
<script data-require="jquery@2.1.1" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
function showDuck(){
$('#dd').show();
$('#overlayframe').show;
}
function hideDuck(){
$('#dd').hide();
}
</script>
</HEAD>
<BODY>
<div style="display:block;position:absolute;top:20px;left:20px;z-index:997;">
<iframe name="UBERFRAME" src="index2.html" frameborder="0" allowtransparency="yes" scrolling="no" style="width:800; height:480; position:relative; left:0px;top:0px;margin:0;padding:0;" ></iframe>
</div>
<div id="dd" name="dd" style="display:none;position:absolute;top:20px;left:20px;z-index:998;">
<iframe id="overlayframe" name="OVERLAY" src="testframe.html" frameborder="0" allowtransparency="yes" scrolling="no" style="width:800px; height:428px; position:relative; left:0px;top:0px;margin:0;padding:0;" ></iframe>
</div>
</BODY>
</HTML>
函数showDuck(){
$('#dd').show();
$(“#覆盖框架”).show;
}
函数hideDuck(){
$('#dd').hide();
}
安然无恙
shades.html:
<HTML>
<HEAD>
<script type="text/javascript">
function showdd() {
window.frames['overlayframe'].style.display = "none";
}
</script>
</HEAD>
<BODY>
<a href="#" onclick="showdd(); return false;" >
<img src="foo.png">
</a>
</BODY>
</HTML>
<HTML>
<BODY>
<a href="#" onclick="javascript:window.parent.parent.showDuck(); return false;">
show Donald Duck
</a>
</BODY>
</HTML>
testframe.html:
<HTML>
<BODY>
<IMG SRC="http://img3.wikia.nocookie.net/__cb20130203061323/disney/images/6/6b/Donald_Duck_transparent.png" onclick="javascript:window.parent.hideDuck(); return false;">
</BODY>
</HTML>
或者您能提供一个JSFIDLE或plunkr演示吗?如果您试图从iframe访问父元素,您将遇到一些问题。iframe如何知道父窗口包含的内容?在页面中加载html而不是iframe。然后,您将能够访问每个“html文件”DOM元素。(例如,您可以使用jquery加载页面,或者如果不使用jquery,则只加载XMLHttpRequest)嗨,Larta,我很抱歉,我不知道您的意思,我的网络编程技能来自我只能描述的内容,请参见页面底部;)我刚刚在plunkrOh创建了一个,是的,它都是一个域的一部分,没有页面位于另一个域上,或者你可以把它集成到我的代码中吗?所以它可以在shades.html和name.html中工作?您正在隐藏图像,但我需要iframe或iframe所在的div来隐藏更新plnkr以隐藏整个iframe。请研究它,并在代码中列出解决方案