本文介绍如何实现iframe与其父容器及兄弟iframe间的交互。包括通过JavaScript调用父容器的方法、父容器调用iframe内的方法以及iframe之间的直接通信。
iframe与父容器交互
iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。
iframe元素有其优势，在开发中，不少情况会使用到iframe元素。因此，iframe元素与父容器的交互尤为重要。
开发者可参考以下代码：
<!-- iframe调用父容器的方法 -->
<script>
function init() { window.parent.setUpFrame(); return true; }
function yourMethod(arg) { ... }
</script>
<body onload="init();">...</body>
<!-- 父容器调用iframe的方法 -->
<script>
function setUpFrame() {
var frame = window.frames['frame-id'];
frame.yourMethod('hello');
}
</script>
<body><iframe name="frame-id" src="..."></iframe></body>
iframe与iframe交互
我在工作中遇到一个父容器有多个iframe的开发情况，iframe之间会存在交互。可参考以下代码：
var tempIframe = parent.window.frames[frame-id];
if (typeof(tempIframe) != 'undefined') {
tempIframe.yourMethod();
}
扫一扫
405
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
