当前位置：首页 > news >正文

使用 jQuery 实现子窗口获取父窗口的值，或者父窗口获取子窗口的值时

news 来源：原创 2025/8/12 5:03:54

HTML 父子窗口通信指南

一、基础概念

在Web开发中，父子窗口通信是一个常见的需求。这通常发生在以下场景：

主页面（父窗口）打开新窗口（子窗口）
弹出窗口需要与主页面交互
多窗口之间需要数据传递

二、jQuery实现方案

1. 子窗口获取父窗口的值

// 在子窗口中获取父窗口的jQuery对象
var $parent = $(window.parent.document);// 获取父窗口中的元素值
var parentValue = $parent.find("#parentElement").val();// 获取父窗口中的变量
var parentVariable = window.parent.someVariable;// 调用父窗口的函数
window.parent.parentFunction();

2. 父窗口获取子窗口的值

// 获取iframe中的子窗口jQuery对象
var $child = $("#childFrame").contents();// 获取子窗口中的元素值
var childValue = $child.find("#childElement").val();// 获取子窗口中的变量
var childVariable = window.frames["childFrame"].someVariable;// 调用子窗口的函数
window.frames["childFrame"].childFunction();

3. 实际应用示例

3.1 父窗口代码示例

<!DOCTYPE html>
<html>
<head><title>父窗口示例</title><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body><!-- 父窗口中的输入框 --><input type="text" id="parentInput" value="父窗口的值"><!-- 嵌入子窗口的iframe --><iframe id="childFrame" src="child.html" width="500" height="300"></iframe><script>// 父窗口中的函数function getChildValue() {var $child = $("#childFrame").contents();var childValue = $child.find("#childInput").val();alert("子窗口的值是：" + childValue);}// 供子窗口调用的函数function updateFromChild(value) {$("#parentInput").val(value);}</script>
</body>
</html>

3.2 子窗口代码示例

<!DOCTYPE html>
<html>
<head><title>子窗口示例</title><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body><!-- 子窗口中的输入框 --><input type="text" id="childInput" value="子窗口的值"><script>// 获取父窗口的值function getParentValue() {var $parent = $(window.parent.document);var parentValue = $parent.find("#parentInput").val();alert("父窗口的值是：" + parentValue);}// 更新父窗口的值function updateParent() {var value = $("#childInput").val();window.parent.updateFromChild(value);}</script>
</body>
</html>

三、注意事项和最佳实践

1. 同源策略限制

父子窗口必须满足同源策略（相同的协议、域名和端口）
跨域通信需要使用postMessage等其他方式

2. 加载时序

确保子窗口完全加载后再进行操作
可以使用load事件来确保安全操作

$("#childFrame").on("load", function() {// 此时可以安全地操作子窗口var $child = $(this).contents();
});

3. 错误处理

try {var $child = $("#childFrame").contents();// 进行操作
} catch (e) {console.error("访问子窗口失败：", e);
}

4. 性能优化

缓存jQuery对象避免重复查询
减少不必要的跨窗口操作
适当使用事件委托

四、常见问题解决方案

1. 子窗口无法获取父窗口值

检查是否满足同源策略
确保父窗口对象存在
验证jQuery是否正确加载

2. 父窗口无法获取子窗口值

确保iframe的src已正确设置
检查子窗口是否完全加载
验证子窗口中的元素ID是否正确

3. 跨域通信解决方案

// 发送消息
window.parent.postMessage({type: "getValue",data: "some data"
}, "http://允许的域名");// 接收消息
window.addEventListener("message", function(event) {if (event.origin === "http://允许的域名") {console.log("收到消息：", event.data);}
});

五、调试技巧

使用console.log()输出关键信息
检查浏览器控制台的错误信息
使用断点调试跟踪数据流
验证DOM元素是否正确加载

六、参考资源

jQuery官方文档：https://api.jquery.com/
MDN Web文档：https://developer.mozilla.org/
同源策略说明：https://developer.mozilla.org/zh-CN/docs/Web/Security/Same-origin_policy

使用 jQuery 实现子窗口获取父窗口的值，或者父窗口获取子窗口的值时

HTML 父子窗口通信指南一、基础概念在Web开发中，父子窗口通信是一个常见的需求。这通常发生在以下场景： 主页面（父窗口）打开新窗口（子窗口）弹出窗口需要与主页面交互多窗口之间需要数据传递二、jQue…...

编程日记 2025/8/12 5:03:54

AndroidStudio下载安装，环境部署以及常见问题解决教程（亲测）

AndroidStudio下载安装，环境部署以及常见问题解决！！！ 文章目录前言一、Android Studio 下载与安装 1.1 系统要求 1.2 下载 Android Studio 1.3 安装 Android Studio Windows 系统 1.4 初始配置二、环境部署 2.1 安装 …...

编程日记 2025/8/12 5:01:56

ruoyi-vue部署2

3.Node.js 3.1.什么是Node.js 在 Node.js 之前，JavaScript 只能运行在浏览器中，作为网页脚本使用，为网页添加一些特效，或者和服务器进行通信。有了 Node.js 以后，JavaScript 就可以脱离浏览器，像其它编程…...

编程日记 2025/8/8 18:05:30

Flutter项目升级Xcode 16.2之后编译问题

最近好久没升级Xcode了，升级了一下最新的16.2之后。发现Flutter项目在iOS设备上运行不起来了。报错： 查了许多网友也遇到了，其中一个解决方案：https://stackoverflow.com/questions/79118572/xcode-16-and-ios-18-project-not-com…...

编程日记 2025/8/11 12:03:12

Mermaid 子图 + 拖拽缩放：让流程图支持无限细节展示

在技术文档、项目管理和可视化分析中，流程图是传递复杂逻辑的核心工具。传统流程图往往静态且难以适应细节展示，而 Mermaid 与 svg-pan-zoom 的结合，则为这一痛点提供了完美解决方案。本文将深入解析如何通过 Mermaid 的子图（subg…...

编程日记 2025/8/11 11:11:08

前沿科技一览未来发展趋势

生物技术能帮环境。比如用它处理污染物。科学家发现一些细菌能吃掉油污。这些细菌能被用来清理漏油事故。比如1989年埃克森瓦尔迪兹号漏油事件中人们就用类似方法减少污染。还有些植物能吸收土壤里的重金属。种植这种植物能让受污染的土地变干净。这种方法在矿区周围特别有用…...

编程日记 2025/8/8 23:23:19

Linux---sqlite3数据库

一、数据库分类 1. 按数据关系分类类型特点代表产品关系型数据库- 使用 SQL（结构化查询语言）<br>- 数据以行列形式存储，支持事务和复杂查询MySQL、Oracle、SQLite非关系型数据库- 无固定表结构（如键值对、文档、图&#…...

编程日记 2025/8/8 11:04:39

侯捷 C++ 课程学习笔记：进阶语法之lambda表达式（二）

侯捷 C 课程学习笔记：进阶语法之lambda表达式（二） 一、捕获范围界定 1. 局部变量与函数参数非静态局部变量：Lambda 所在作用域内定义的局部变量（如函数内部的 int x）会被完整复制其当前值。捕获后外部变…...

编程日记 2025/7/14 2:51:08

python爬虫Scrapy(6)之增量式

增量式爬虫应用场景分类通用爬虫聚焦爬虫功能爬虫分布式爬虫增量式： 用来监测网站数据更新的情况（爬取网站最新更新出来的数据）。只是一种程序设计的思路，使用什么技术都是可以实现的。核心： 去重。使用一个记录表来…...

编程日记 2025/8/11 3:46:12

oracle删除表中重复数据

需求： 删除wfd_procs_nodes_rwk表中，huser_id、dnode_id、rwk_name字段值相同的记录，如果有多条，只保留一条。 SQL： DELETE FROM wfd_procs_nodes_rwk t WHERE t.rowid > (SELECT MIN(t1.rowid)FROM wfd_procs_n…...

编程日记 2025/7/24 1:07:00

动作捕捉手套如何让虚拟现实人机交互 “触手可及”？

在虚拟与现实逐渐交融的当下，动作捕捉技术正以前所未有的速度革新着多个领域。动作捕捉技术，简称“动捕”，已经从早期的影视特效制作，逐步拓展到游戏开发、虚拟现实、机器人控制等多个领域。而mHandPrO数据手套作为这一领域的…...

编程日记 2025/8/11 2:39:32

【大模型基础_毛玉仁】2.3 基于 Encoder-only 架构的大语言模型

更多内容：XiaoJ的知识星球目录 2.3 基于Encoder-only 架构的大语言模型2.3.1 Encoder-only 架构2.3.2 BERT 语言模型1）BERT 模型结构2）BERT 预训练方式3）BERT 下游任务 2.3.3 BERT 衍生语言模型1）RoBERTa 语言模型2&a…...

编程日记 2025/8/7 8:58:52

C# ManualResetEvent‌的高级用法

一、ManualResetEvent 的核心作用‌ ManualResetEvent 是 C# 中用于 ‌线程同步‌ 的类（位于 System.Threading 命名空间），通过信号机制控制线程的等待与执行。其核心功能包括： 阻塞线程‌：调用 WaitOne() 的线程会等…...

编程日记 2025/8/1 20:35:07

Language Models are Few-Shot Learners，GPT-3详细讲解

GPT的训练范式：预训练Fine-Tuning GPT2的训练范式：预训练Prompt predict （zero-shot learning） GPT3的训练范式：预训练Prompt predict （few-shot learning） GPT2的性能太差，新意高&…...

编程日记 2025/8/8 1:26:42

js 给元素添加点击事件的方法

在 JavaScript 里，为元素添加点击事件有多种方法，下面为你介绍三种常见的方式。 1. 使用内联事件处理程序你可以在 HTML 标签里直接使用 onclick 属性添加点击事件。示例如下： <!DOCTYPE html> <html lang"en"><…...

编程日记 2025/8/10 12:15:34

一、安装JDK，版本jdk1.8 1、下载压缩包到/jdk目录下解压 cd /jdk tar -zxvf jdk-8u241-linux-64.tar.gz 2、配置环境变量在profile文件中末尾新增信息如下所示 vim /etc/profile export JAVA_HOME/usr/local/java/jdk/jdk1.8.0_221 export PATH$PATH:$JAVA_HOM…...

编程日记 2025/8/7 15:14:56

联想台式电脑启动项没有U盘

开机按F12，进入启动设备菜单，发现这里没有识别到插在主机的U盘？ 解决方法 1、选上图的Enter Setup或者开机按F2，进入BIOS设置选择Startup -> Primary Boot Sequence 2、选中“Excludeed from boot order”中U盘所在的一行 …...

编程日记 2025/8/6 16:09:23

单片机开发资源分析的实战——以STM32F103C8T6为例子的单片机资源分析

目录第一点：为什么叫STM32F103C8T6 从资源手册拿到我们的对STM32F103C8T6的资源描述第二件事情，关心我们的GPIO引脚输出第三件事情：去找对应外设的说明部分前言本文章隶属于项目： Charliechen114514/BetterATK: This is…...

编程日记 2025/8/8 20:38:09

Error response from daemon: Get “https://registry-1.docker.io/v2/“: net/http: request canceled while

英俊潇洒很有才,美丽端庄又大方的人已经点赞收藏＋关注了文章目录 1.ubuntu解决方案2.Windows的解决办法（有威劈恩好搞）3.其他报错json格式错误下载的镜像有问题最后 1.ubuntu解决方案报错如图：timeout Error response from da…...

编程日记 2025/8/7 12:43:19

yolo模型学习笔记——1——物体检测评估指标

1.置信度表示模型预测的边界框中存在目标物体的概率以及反应预测框和真实框的定位质量 2.阈值 (1)定义决定一个预测框是否被视为为正类的关键参数，通过调整不同的阈值，获得不同的精度和召回率。yolo模型会为每个预测框生成一个置信度分数&#xff0c…...

编程日记 2025/8/9 10:28:04

Elasticsearch 滚动索引（Rollover Index）详解

文章目录 1、滚动索引的作用2、滚动索引的用法2.1 核心概念2.2 实现步骤 3、适用场景4、与其他技术的结合使用5、案例：日志数据的滚动索引5.1 场景描述5.2 实现步骤 6、示例：结合索引生命周期管理（ILM）6.1 场景描述6.2 实现步骤 7…...

编程日记 2025/8/7 12:40:53

保持docker内容器一直运行

首先：确保Docker服务配置为开机自启，这样当虚拟机启动时，Docker也会启动，并按照设定的重启策略自动启动相关容器。 sudo systemctl enable docker 创建容器时： 当你使用docker run命令启动容器时，可以添…...

编程日记 2025/8/5 23:03:39

ChatBI 的技术演进与实践挑战：衡石科技如何通过 DeepSeek 实现商业落地

随着人工智能技术的快速发展，ChatBI（基于自然语言交互的商业智能）逐渐成为企业数据分析领域的热门话题。作为 BI（商业智能）领域的新形态，ChatBI 通过自然语言处理（NLP）技术&#xff…...

编程日记 2025/8/8 16:52:32

python-leetcode 55.子集

题目： 给定一个数组nums,数组中的元素互不相同，返回该数组所有可能子集（幂集） 解集不能包含重复的子集，可以按任意顺序返回解集方法一：迭代法实现子集枚举记原序列中元素的总数为 n，原序列…...

编程日记 2025/8/8 23:55:50

在LORA训练中，LORA模型的矩阵的行列是多少

在LORA训练中，LORA模型的矩阵的行列是多少: W n e w = W + α r B A W_{new}=W + \frac{\alpha}{r}BA...

编程日记 2025/8/9 12:47:39

冒泡排序：古老算法中的智慧启示

在计算机科学浩瀚的星空中，排序算法犹如璀璨的星辰，而冒泡排序恰似其中最朴实无华的一颗。这个诞生于计算机发展初期的经典算法，以其简单直观的逻辑原理，成为每个程序员启蒙阶段必经的试炼场。当我们凝视这个看似笨拙的排序方法时…...

编程日记 2025/8/11 6:32:55

基于ssm的电子病历系统(全套)

编程日记 2025/8/10 12:41:57

V2X验证

1. 标准和规范验证欧洲对 DSRC 和 V2X 系统有一系列的标准和规范，主要由 ETSI (European Telecommunications Standards Institute) 和 IEEE 等组织制定。验证通常包括以下标准和规范： ETSI EN 302 571：这是DSRC在欧洲的主要标准，规定了DSRC系统的技术要求和操作条件。ET…...

编程日记 2025/8/10 20:10:02

SpringBoot美发门店管理系统开发与设计

在幽络源，我们致力于为开发者提供优质的技术资源和项目源码。今天，我们为大家分享一款基于SpringBoot开发的美发门店管理系统。该系统功能全面，操作便捷，适合中小型美发门店的管理需求。以下是系统的详细介绍。系统功能模块 1.…...

编程日记 2025/8/7 21:32:57

Linux内核实时机制28 - RT调度器11 - RT 组调度

Linux内核实时机制28 - RT调度器11 - RT 组调度相关数据结构内核中通过static int sched_rt_runtime_exceeded(struct rt_rq *rt_rq)函数来判断实时任务运行时间是否超出带宽限制，判断这个运行队列rt_rq的运行时间是否超过了额定的运行时间。而“运行时间”和“额定时间”都…...

编程日记 2025/7/13 5:49:15

R语言——变量

参考资料：学习R 1、类 R中所有变量都有一个类，表明此变量属于什么类型。例如，大部分的数字是numeric类，逻辑值是logical类。其实，因为R没有标量类型（scalar type），所以更严格地我说…...

编程日记 2025/8/6 23:51:25

Appium使用文档

Appium旨在支持许多不同平台（移动端、网页端、桌面端等）的UI自动化。不仅如此，它还旨在支持用不同语言（JS、Java、Python等）编写的自动化代码。 Appium移动端自动化要求如下： 安装Appium安装UiAutomator2…...

编程日记 2025/8/10 1:11:55

Houdini :《哪吒2》神话与科技碰撞的创新之旅

《哪吒2》（即《哪吒之魔童闹海》）截止至今日，荣登全球票房榜第五。根据猫眼专业版数据，截至2025年3月15日，《哪吒2》全球累计票房（含预售及海外）超过150.19亿元，超越《星球大战&…...

编程日记 2025/8/4 14:46:46

单台openEuler24.03 LTS下的开源大数据环境搭建

目录概述准备虚拟机基本设置关闭及禁用防火墙修改主机名静态ip 映射主机名创建普通用户 SSH免密登录目录准备安装Java 下载Java 解压设置环境变量安装Hadoop 下载hadoop 解压设置环境变量查看版本配置hadoop 配置hadoop_env.sh 配置core-s…...

编程日记 2025/8/7 11:07:33

HarmonyOS开发，深拷贝、浅拷贝的封装和调用

在 HarmonyOS 开发中，实现深拷贝和浅拷贝可以通过封装工具类来完成。下面分别介绍浅拷贝和深拷贝的实现方式，并将它们封装成一个工具类。浅拷贝和深拷贝的区别浅拷贝：创建一个新对象，新对象的属性引用原始对象的属性。也就是说…...

编程日记 2025/8/4 13:01:52

C 环境设置指南

C 环境设置指南引言 C语言作为一种历史悠久且功能强大的编程语言，在软件开发和系统编程领域占有举足轻重的地位。C语言环境设置是进行C语言编程的第一步，也是确保编程顺利进行的关键。本文将详细介绍C语言环境的设置过程，包括系统要求、开发工具的选择、环境变量的配置等…...

编程日记 2025/8/8 4:33:59

2018年全国职业院校技能大赛高职组-计算机网络应用竞赛竞赛样题E卷

目录总体规划模块二：设备基础信息配置模块三：网络搭建与网络冗余备份方案部署模块四：移动互联网搭建与网优模块五：出口安全防护与远程接入总体规划医院在进行网络部分信息化建设方案设计过程中，需要保证医院、血液中心通过社保网进行互连互通，同时满足献血中心与医…...

编程日记 2025/8/9 1:18:55

大华HTTP协议在智联视频超融合平台中的接入方法

一. 大华HTTP协议介绍大华HTTP协议是大华股份（Dahua Technology）为其安防监控设备开发的一套基于HTTP/HTTPS的通信协议，主要用于设备与客户端（如PC、手机、服务器）之间的数据交互。该协议支持设备管理、视频流获取、…...

编程日记 2025/8/5 10:58:29

Dify Docker 私有化部署遇到的问题

Dify 版本为1.01，本地使用 docker desktop，版本为4.38.0 (181591)，以下是Dify部署及使用过程中遇到的问题，后续持续更新... db无法启动，一直提示：Permissions should be urwx (0700) or urwx,grx (0750).具…...

编程日记 2025/8/8 1:09:20

Python学习第十九天

Django-分页后端分页 Django提供了Paginator类来实现后端分页。Paginator类可以将一个查询集（QuerySet）分成多个页面，每个页面包含指定数量的对象。 from django.shortcuts import render, redirect, get_object_or_404 from .models impo…...

编程日记 2025/8/11 3:46:20

大数据技术链路详解

随着大数据技术的不断发展，各种新兴技术层出不穷，今天我们就来详细拆解一条完整的大数据链路，看看每个环节都有哪些最新技术参与，以及它们如何发挥作用。一、数据采集层在大数据处理的第一步，数据采集至关重要。现代…...

编程日记 2025/8/5 18:43:39

vue computed 计算属性简述

Vue 的 ‌计算属性（Computed Properties）‌ 是 Vue 实例中一种特殊的属性，用于‌声明式地定义依赖其他数据动态计算得出的值‌。它的核心优势在于能够自动追踪依赖关系，并缓存计算结果，避免重复计算，提升性…...

编程日记 2025/8/5 18:36:57

365天之第P10周：Pytorch实现车牌识别

365天之第P10周：Pytorch实现车牌识别 Pytorch实现车牌识别 365天之第P10周：Pytorch实现车牌识别一、导入数据1.获取类别名2. 数据可视化3. 标签数字化4. 加载数据文件5. 划分数据二、自建模型三、训练模型1. 优化器与损失函数2. 模型训练四、结果分析…...

编程日记 2025/8/6 17:43:57

【Docker】-Docker Compose+Dockerfile最佳实践

最佳实践在实际生产环境中，Docker Compose Dockerfile 的最佳实践通常包括以下几部分： 使用 Dockerfile 构建微服务镜像使用 docker-compose.yml 管理多个微服务使用 volumes 进行数据持久化使用 networks 进行服务间通信使用 depends_on 确保依赖服…...

编程日记 2025/8/2 19:38:48

TSB - AD 解读 — 迈向可靠、透明的 TSAD 任务

目录一文章动机二 TSAD 领域内的两类缺陷三数据集的构建四实验结果及结论项目宣传链接：TSB-AD 代码链接： TheDatumOrg/TSB-AD: TSB-AD: Towards A Reliable Time-Series Anomaly Detection Benchmark 原作者解读：NeurIPS 2…...

编程日记 2025/8/4 9:20:48

Linux 入门：权限的认识和学习

目录一.shell命令以及运行原理二.Linux权限的概念 1.Linux下两种用户 cannot open directory .: Permission denied 问题 2.Linux权限管理 1).是什么 2).为什么（权限角色目标权限属性） 3).文件访问者的分类（角色） 4).文…...

编程日记 2025/8/11 21:20:05

多任务学习与持续学习微调：深入探索大型语言模型的性能与适应性

引言大型语言模型（LLMs）的出现极大地推动了自然语言处理领域的发展。为了使其在各种特定任务和动态环境中表现出色，微调技术至关重要。本节将深入探讨多任务学习（Multi-task Learning, MTL）和持续学习（Co…...

编程日记 2025/8/4 16:39:32

Cocos Creator Shader入门实战(四)：预处理宏定义和Chunk

引擎： 3.8.5 您好，我是鹤九日！ 回顾学习Shader，前期是让人烦躁无味的，后期可能就是各种的逻辑让人抓耳挠腮。一成不变的内容：遵循引擎设定的规则，理解引擎要求的规范。这里，简单…...

编程日记 2025/8/6 18:13:51

[蓝桥杯 2023 省 B] 飞机降落

[蓝桥杯 2023 省 B] 飞机降落题目描述 N N N 架飞机准备降落到某个只有一条跑道的机场。其中第 i i i 架飞机在 T i T_{i} Ti 时刻到达机场上空，到达时它的剩余油料还可以继续盘旋 D i D_{i} Di 个单位时间，即它最早可以于 T i T_{i} Ti 时刻…...

编程日记 2025/8/10 7:27:02

STAR Decomposition 一种针对极端事件的信号分解方法论文精读加复现

STAR 分解🚀 在时序预测任务中，为了情绪化信号的各种成分，例如趋势信息季节信息等往往都需要对信号进行分解。目前熟知的分解方式有很多种，经验模态分解 EMD 变分模态分解 VMD ，还有集合经验模态分解 EEMD&#xff0c…...

编程日记 2025/8/5 15:31:44