iframe与父容器交互,iframe与iframe交互

本文介绍如何实现iframe与其父容器及兄弟iframe间的交互。包括通过JavaScript调用父容器的方法、父容器调用iframe内的方法以及iframe之间的直接通信。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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();
}

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值