关于JS和jquery如何跨框架取值的问题

最新推荐文章于 2026-06-18 12:46:34 发布

原创最新推荐文章于 2026-06-18 12:46:34 发布 · 158 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#javascript #jquery #开发语言 #前端

本文介绍了如何使用window.frames属性和postMessage方法在JavaScript和jQuery中实现不同框架间的值传递，包括通过对象属性获取元素值和通过message事件进行双向通信的示例。

JS和jQuery如何跨框架取值的问题可以通过以下两种方法解决：

使用window.frames属性获取框架对象，然后通过对象属性或方法访问框架内的元素或数据。

例如，在一个包含两个框架的页面中，其中一个框架有一个输入框，我们可以使用以下代码从另一个框架中获取该输入框的值：

var frame = window.frames[0]; // 获取第一个框架对象
var input = frame.document.getElementById('inputId'); // 获取输入框元素对象
var value = input.value; // 获取输入框的值

使用postMessage方法实现框架之间的通信。这种方法需要在页面中为每个框架添加一个message事件监听器，并在其中处理来自其他框架的消息并返回结果。

例如，在一个包含两个框架的页面中，其中一个框架有一个输入框，我们可以使用以下代码向另一个框架发送消息并获取该输入框的值：

在发送方框架：

var frame = window.frames[0]; // 获取第一个框架对象
frame.postMessage({action: 'getValue', elementId: 'inputId'}, '*'); // 向第一个框架发送获取值的请求

在接收方框架：

window.addEventListener('message', function(event) { // 添加message事件监听器
  if (event.data.action === 'getValue') { // 处理来自发送方框架的请求
    var input = document.getElementById(event.data.elementId); // 获取输入框元素对象
    var value = input.value; // 获取输入框的值
    event.source.postMessage(value, '*'); // 向发送方框架返回结果
  }
});

.modal('show');