我正在尝试从另一个包含框架集的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: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>
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>
或plunkr演示:Click
最佳答案
是否所有三个页面(父文档和两个iframe)都来自同一域和子域?
如果没有,您唯一的实际选择是使用window.postmessage
而且,即使它们来自同一域,与直接访问另一个页面的DOM相比,发布消息也是一种好方法。
无论采用哪种方式,无论是否带有后消息,都需要引用要定位的iframe的窗口对象。
一种方法是让框架A通知父页面(通过引发事件或调用父页面js中的函数),然后让父页面通知帧B。
如果您提供示例页面,我可以为您创建一个有效的示例。
编辑:下面的代码示例从解决方案到您提供的示例。
注意框架如何调用函数父文档。然后,父文档会处理其他iframe的DOM。
plunkr
在框架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');
}
关于javascript - 从框架中的其他iframe隐藏iframe或div,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/25302094/