Layer子iframe传数据到父页面的两种方式【按钮和非按钮】

作者：System 时间：2024年08月21日分类：所有,jquery 字数：1001

这篇文章距离上次修改已过252天，其中的内容可能已经有所变动。

在Layer子iframe中传递数据到父页面有两种常见的方式：使用按钮触发和使用非按钮触发。

使用按钮触发：

在iframe中使用一个表单和一个按钮，当按钮被点击时，使用JavaScript获取表单数据并通过window.parent.postMessage方法发送到父页面。父页面需要监听消息事件来接收数据。

<!-- 子页面 (iframe内) -->
<form id="myForm">
    <input type="text" id="myData" name="data" />
    <button type="button" onclick="sendData()">发送数据</button>
</form>
<script>
function sendData() {
    var form = document.getElementById('myForm');
    var data = form.data.value;
    window.parent.postMessage(data, '*');
}
</script>

在父页面中：

window.addEventListener('message', function(event) {
    console.log('接收到数据:', event.data);
}, false);

使用非按钮触发：

可以在需要的时候（比如数据更新）直接调用发送数据的函数。

<!-- 子页面 (iframe内) -->
<input type="text" id="myData" oninput="sendData()">
<script>
var sendData = function() {
    var data = document.getElementById('myData').value;
    window.parent.postMessage(data, '*');
};
window.onload = sendData; // 页面加载完成后发送数据
</script>

父页面的监听代码与按钮触发的情况相同。

Layer子iframe传数据到父页面的两种方式【按钮和非按钮】

评论已关闭

推荐阅读