jquery加载页面的几种方法(页面加载完成就执行)如何去掉css 渐变时的锯齿效果AJAX请求以及解决跨域的问题浅析Vue3动态组件怎么进行异常处理html+css+js写的AI五子棋游戏(附源码)基于jquery 实现导航条高亮显示的两种方法EasyUI使用DataGrid实现动态列数据绑定Vue怎么通过JSX动态渲染组件JS 获取当前日期、时间、星期聊一聊Node.js中的 GC(垃圾回收)机制Ajax 请求队列解决方案并结合elementUi做全局加载状态前端代码风格规范总结JS Generator函数yield表达式示例详解javascript子窗口父窗口相互操作 取值赋值的问题CSS如何实现波浪效果ECharts实现数据超出Y轴最大值max但不隐藏CSS样式穿透的几种方法JavaScript 类型转换CSS 设置页面缩放如何在Vue3+Vite中使用JSXlinux平台下node cnpm的安装方法vue中v-if和v-for的区别是什么详解Vue PC端如何实现扫码登录功能CSS 网格(Grid)布局JavaScript 请求服务端接口Angular开发问题记录:组件拿不到@Input输入属性聊一聊CSS中的盒模型和box-sizing属性vue3.0对服务端进行渲染Web 页面如何实现动画效果移动端 H5 实现拍照功能的几种方法CSS 样式优先级HTML 块级元素、行内元素和行内块级元素深入聊一聊vue3中的reactive()CSS 媒体查询Angular中的路由(Routing)原理怎么移除css的hover事件让交互更加生动!巧用CSS实现鼠标跟随 3D 旋转效果Web页面的几种布局方式JavaScript 评测代码运行速度的几种方法优化jQuery性能的多种方法(整理总结)说一下Vue组件中的自定义事件和全局事件总线列举一下JavaScript中对数组进行合并的几种方法JavaScript 对象合并带你深入了解一下vue.js中的this.$nextTick!如何在JavaScript中对文件进行处理Vue.js 前端项目在常见 Web 服务器上的部署配置vue中$set的实现方法CSS 实现文本装饰效果JavaScript 高阶函数History 和 Hash 路由模式Vue3学习之深度剖析CSS Modules和ScopeCSS 清除浮动CSS 设置背景图片【整理分享】一些常见Vue面试题(附答案解析)CSS里面的transform 属性CSS中的几种尺寸单位总结JavaScript中的条件判断与比较运算uni-app 滚动通知组件的实现JavaScript 执行上下文与作用域前端兼容性问题总结前端性能优化——图片优化JS中数组去重的几种方法JavaScript里实现继承的几种方式JavaScript使用reduce方法实现简单的 i18n 功能JavaScript 日期和时间的格式化大汇总(收集)JS里的原始值与引用值JavaScript 文件处理检测js代码中可能导致内存泄漏的工具Angular学习之ControlValueAccessor接口详解uni-app 日历组件的实现Vue 组件之间传值JavaScript里的回调函数属于闭包吗?JavaScript 解决冒泡事件导致的性能问题总结一下JavaScript中的一些奇怪问题简单说一下JavaScript中的事件冒泡和事件捕获关于 WebpackJavaScript中的循环类型5个实用的TypeScript操作符,助你提升开发能力!HTML img 元素无法显示 base64 图片的可能原因jQuery 遍历方法总结前端性能优化——内存问题javascript中脚本加载和执行机制Web 页面之间传递参数的几种方法解释一下JavaScript中0.1+0.2不等于0.3的问题总结一下JavaScript 中apply、call、bind的使用方法什么是EventLoop?怎么测试Node或页面的性能JavaScript 中 new Date(time).getTime() 获取时间戳方法在 iOS 中的兼容性问题JS里数组合并的几种方法详解vue各种权限控制与管理的实现思路uni-app 弹出层组件的实现用JavaScript实现文件的上传与下载前端性能优化总结简单说一下JavaScript中的事件委托JavaScript如何删除css总结一下JS中的排序算法关于js中的作用域和闭包让页面元素居中的一些方法【javascript算法】二分查找法如何在前端实现上万行大量数据的秒级响应?CSS中父元素被子元素的margin-top影响的解决方法js使用splice方法删除数组元素可能导致的问题如何运行vue项目(超详细图解)js隐式类型转换的副作用了解js的原型和原型链js中的循环引用js判断变量类型的方法web页面最常用的正则校验规则总结js内存管理和垃圾回收js中this关键字的作用和如何改变其上下文JS中的操作符和运算符大总结Vue3 watch 监听对象数组中对象的特定属性总结一下js的浅拷贝和深拷贝JavaScript中的异步编程JavaScript使用一个数组对另一个对象数组进行过滤一个基于Vue3实现的简单日历组件CSS实现磨砂玻璃(毛玻璃)效果样式解决“Vue3调用本地服务接口失败,老是提示下载并安装本地服务”的办法vue3基于组合式API使异步获取的数据对象具有响应性ASP.NET给前端动态添加修改CSS样式JS 标题 关键字在js中如何获取对象的长度了解一下js中的函数式编程Vue框架中监测数组变化的方法VUE html里的文本框只允许输入数字的两种方法分享几种js格式化金额的方法JavaScript的Promise同步处理js中的简写语法JavaScript 面向切面编程(AOP,装饰者模式)了解一下js的跨域问题谈一谈Vue怎么用extend动态创建组件Vue3实现印章徽章组件js中断 forEach 循环的几种方法vue3组件间怎么通信?简述一下通信方式CSS 设置文字间距CSS 网格(Grid)布局Vue3 实现模态框组件js处理扁平数组和树结构相互转换使用Vue和jsmind如何实现思维导图的历史版本控制和撤销/重做功能?Vue.js与ASP.NET的结合,实现企业级应用的开发和部署检查js中的字符串是否可以成为回文Vue.nextTick函数的用法及在异步更新中的应用关于js中0.1+0.2不等于0.3的问题使用JavaScript开发网页地图导航js中如何使用可选函数参数Vue与js的融合,如何编写现代化的前端应用关于Vue与服务器端的通信:如何实现登录鉴权Vue.js的响应式原理如何使用 FabricJS 禁用椭圆的居中旋转?使用JavaScript实现页面滑动切换效果移动端H5页面的缓存问题js里base64与file之间的转换分享一下利用Vue表单处理实现复杂表单布局如何使用CSS创建渐变阴影?如何在 JavaScript 中查看结构体数组?css的弹性布局(Flex布局)Vue统计图表的数据标签和数值显示技巧js实用工具方法库大总结使用Angular和MongoDB来构建具有登录功能的博客应用程序如何在Vue表单处理中实现表单字段的文件下载使用js开发交互式地图应用Vue.component函数的使用及如何创建局部组件css实现三角形的几种方法移动端H5实现自定义拍照界面如何在js中遍历对象jquery如何修改选中状态如何使用js对图像进行压缩js如何计算base64编码图片的大小关于Vue双向数据绑定原理详解Vue.filter函数及如何自定义过滤器列举一下js数组的reduce方法的一些应用如何在Vue表单处理中实现表单的条件渲染vue中的canvas插件js数组的reduce方法的一些应用VUE里使用虚拟DOM来优化更新流程canvas对象有哪些方法js中URL查询字符串(query string)的序列与反序列化如何使用 JavaScript/jQuery 为网站创建暗/亮模式?总结html5中常见的选择器Vue组件开发:工具提示组件的实现方法总结js中常见的层次选择器利用Vue2实现印章徽章组件Vue组件实战:列表组件开发js中如何将对象转换为数组Vue组件开发:地图组件实现方法如何将数据存储到 DOM 中?Vue实战:图片上传组件开发如何使用Vue实现可视化界面设计?vite+TypeScript+vue3+router4+Pinia+ElmPlus+axios+mock项目基本配置Vue组件库推荐:Ant Design Vue深度解析使用Vue实现弹窗效果React Query 数据库插件:与分布式系统的协作指南如何使用vue ui创建vue项目使用CSS的Positions布局打造响应式网页无感刷新页面(附可运行的前后端源码,前端vue,后端node)Css Flex 弹性布局中的换行与溢出处理方法Vue组件库推荐:Element UI深度解析分享一个用HTML、CSS和jQuery构建的漂亮的登录注册界面如何利用React和Sass实现可定制的前端样式如何在Vue中实现拖拽上传文件vue3+TypeScript全局事件总线mitt分享一个Pinia存储的数据持久化插件HTML、CSS和jQuery:实现图片折叠展开的效果如何使用HTML和CSS创建动画条形图?如何利用React和Flutter构建跨平台移动应用用html、css和jQuery实现图片翻页的特效利用Promise优化Vue异步操作的方法CSS Positions布局与网页导航的优化技巧js多图合成一张图CSS3实现动态旋转加载样式使用Velocity.js将动画添加到网页使用FabricJS创建Image对象的JSON表示vue3递归组件---树形组件vue3+TypeScript全局事件总线mitt在Vue中实现可编辑的表格vue3+TypeScript自定义指令:长按触发绑定的函数Vue中如何处理表单数据的双向绑定和验证Vue 简介Vue 安装Vue 常用指令Vue 实例Vue 计算属性Vue 动态样式绑定Vue 事件处理Vue 侦听器Vue 数据双向绑定Vue过渡 & 动画Vue 实例生命周期Vue 插槽的使用Vue 组件基础Vue动态组件 & keep-aliveVue 组件间通信Vue 过滤器Vue 自定义指令Vue 混入 MixinsVue 插件Vue 渲染函数VueRouter 编程式导航VueRouter 路由嵌套VueRouter 基础应用VueRouter 命名视图VueRouter 命名路由Vuex 简介、安装VueRouter 路由传参VueRouter 路由别名、重定向Vuex GetterVuex StateVuex ActionVuex MutationVue-Cli & VueDevTools安装Vuex ModulesVue 第三方库的使用Vue-Cli 项目文件结构分析Vue 本地 Mock 数据Vue 项目打包部署Element 美化 TODO 项目

javascript子窗口父窗口相互操作 取值赋值的问题

jquery 获取父窗口的元素 父窗口 子窗口

 

$("#父窗口元素ID",window.parent.document); 

对应javascript版本为window.parent.document.getElementByIdx_x("父窗口元素ID");

 

取父窗口的元素方法:$(selector,window.parent.document);
那么你取父窗口的父窗口的元素就可以用:$(selector,window.parent.parent.document);

类似的,取其它窗口的方法大同小异
$(selector,window.top.document);
$(selector,window.opener.document);
$(selector,window.top.frames[0].document);

 

--------------------------------------------------------------------------------------------------

子窗口创建及父窗口与子窗口之间通信:

 

1、Javascript弹出子窗口

可以通过多种方式实现,下面介绍几种方法

(1) 通过window对象的open()方法,open()方法将会产生一个新的window窗口对象

其用法为:
window.open(URL,windowName,parameters);

URL: 描述要打开的窗口的URL地址,如何为空则不打开任何网页;

windowName:描述被打开的窗口的民称,可以使用'_top'、'_blank'等内建名称,这里的名称跟<a href="..." target="...">里的target属性是一样的。

parameters:描述被打开的窗口的参数值,或者说是样貌,其包括窗口的各个属性值,及要传入的参数值。

例如:

打开一个 400 x 100 的干净的窗口:
open('','_blank','width=400,height=100,menubar=no,toolbar=no,
location=no,directories=no,status=no,scrollbars=yes,resizable=yes')

也可以这样写: var newWindow = open('','_blank');

参数说明如下:

top=# 窗口顶部离开屏幕顶部的像素数
left=# 窗口左端离开屏幕左端的像素数
width=# 窗口的宽度
height=# 窗口的高度
menubar=... 窗口有没有菜单,取值yes或no
toolbar=... 窗口有没有工具条,取值yes或no
location=... 窗口有没有地址栏,取值yes或no
directories=... 窗口有没有连接区,取值yes或no
scrollbars=... 窗口有没有滚动条,取值yes或no
status=... 窗口有没有状态栏,取值yes或no
resizable=... 窗口给不给调整大小,取值yes或no


(2) 在javascript中除了通过open()方法建立window对象实现弹出窗口外,还可以通过建立对话框的方式弹出窗口。
如:
alert(""); //弹出信息提示对话框
confirm(""); //弹出信息确认对话框
prompt(""); //具有交互性质的对话框

但是,上述实现的弹出窗口具有的功能较为单一,只能完成较为简单的功能。对于需要在对话框中显示多个数据信息,

甚至是HTML控件就无能为力了。

(3) 使用模态对话框实现复杂的对话框需求
在javascript的内建方法中还有一类方法可以实现通过对话框显示HTML内容,
也就是说可以通过创建对话框的方式来完成创建窗口对象所能完成的功能。
包括创建模态对话框和非模态对话框两种。

实现方法为:

//创建模态你对话框
window.showModalDialog(sURL,vArguments,sFeatures)


//创建非模态对话框
window.showModelessDialog(sURL,sFeatures)

其区别在于:

用showModelessDialog()打开窗口时,不必用window.close()去关闭它,当以非模态方式[IE5]打开时,打开对话框

的窗口仍可以进行其他的操作,即对话框不总是最上面的焦点,当打开它的窗口URL改变时,它自动关闭。而模态[IE4]方式的对话框始终有焦点(焦点不可移走,直到它关闭)。模态对话框和打开它的窗口相联系,因此我们打开另外的窗口时,他们的链接关系依然保存,并且隐藏在活动窗口的下面。 showModeDialog()则不然。

参数说明:

sURL:必选参数,类型:字符串。

用来指定对话框要显示的文档的URL。

vArguments:可选参数,类型:变体。

用来向对话框传递参数。传递的参数类型不限,包括数组等。对话框通过window.dialogArguments来取得传递进来的参数。

sFeatures:选参数,类型:字符串。

用来描述对话框的外观等信息,可以使用以下的一个或几个,用分号“;”隔开。

dialogHeight:对话框高度

不小于100px,IE4中dialogHeight和dialogWidth 默认的单位是em,而IE5中是px,为方便其见,在定义modal方式的对话框时,用px做单位。

dialogWidth: 对话框宽度。

dialogLeft: 距离桌面左的距离。

dialogTop: 离桌面上的距离。

center: 窗口是否居中

默认yes,但仍可以指定高度和宽度,取值范围{yes | no | 1 | 0 }。

help: 是否显示帮助按钮

默认yes,取值范围 {yes | no | 1 | 0 }。

resizable: 是否可被改变大小。

默认no,取值范围 {yes | no | 1 | 0 } [IE5+]。

status: 是否显示状态栏。

默认为yes[ Modeless]或no[Modal],

取值范围{yes | no | 1 | 0 } [IE5+]。

scroll:指明对话框是否显示滚动条。

默认为yes,取值范围{ yes | no | 1 | 0 | on | off }。

还有几个属性是用在HTA中的,在一般的网页中一般不使用。

dialogHide:在打印或者打印预览时对话框是否隐藏。

默认为no,取值范围{ yes | no | 1 | 0 | on | off }。

edge:指明对话框的边框样式。

默认为raised,取值范围{ sunken | raised }。

unadorned:默认为no,取值范围{ yes | no | 1 | 0 | on | off }。

传入参数:

要想对话框传递参数,是通过vArguments来进行传递的。类型不限制,对于字符串类型,最大为4096个字符。也可以传递对象

例如:

var newWin=window.showModalDialog(url,window,'dialogHeight:500px,dialogLeft:100px,dialogTop:100px,

dialogWidth:300px,status:0,edge:sunken');

newWin.open();

与使用window.open()方法创建窗口相比,模态方法创建窗口的区别在于有模态方法创建的窗口后将不能操作父窗口.


2、子窗口与父窗口间通信

(1) 使用window.open()创建的窗口与父窗口通信
可以在子窗口页面中通过window.opener来获取父窗口对象,获取之后子窗口便可以对父窗口执行刷新,传值等操作。
如:
window.opener.location.reload(); //子窗口刷新父窗口
window.opener.location.href //获取父窗口href
window.opener.locaiton.pathname //获取父窗口路径名

//刷新父页面
window.location.href=window.location.href ; //重新定位父页面
window.location.reload;


(2) 模态窗口与父窗口通信
通过使用showModelDialog(),及showModelessDialog()方法创建的子窗口想与父窗口通信时,不能通过window.opener

来获取父窗口对象。要实现通信,必须在创建模态子窗口时向子窗口传入父窗口对象。

实现方式为:

在父窗口中:

var newWin=window.showModelDialog(url,'');
newWin.open();

此时参数window即是父窗口对象

在子窗口中:

需首先获取父窗口对象,然后才能使用父窗口对象。由于父窗口对象是在创建
子窗口时通过传入参数的方式传入的,因此,在子窗口中也只能通过获取窗口参数的方式获取父窗口对象。获取方式如下



var parent=widnow.dialogArguments;
变量parent便是父窗口对象。

例如:

//通过子窗口提交父窗口中的表单:form1,提交后执行查询操作
var parent=window.dialogArguments;
parent.document.form1.action="QueryInfor.jsp";
parent.submit();

//刷新父页面
var parent=window.dialogArguments;
parent.location.reload();

//从子窗口传值到父窗口
要实现在模态子窗口中传值到父窗口,需要使用window.returnValue完成

实现方法如下:

在子窗口中:

//获取父窗口某字段值,对该值加一后返回父窗口
var parent=window.dialogArguments;
var x=parent.docuement.getElementById("age").value;
x=x+1;

//传回x值
window.returnValue=x;

在父窗口中:

//获取来自子窗口的值
var newWin=window.showModelDialog(url,'');
if(newWin!=null)
document.getElementByIdx_x("age").value=newWin;

//在子窗口中设置父窗口的值
在子窗口中向父窗口中传入值似乎没有直接设置父窗口中的值来得明了。直接设置父窗口中元素的值显得要更灵活一些,不过具体使用哪种方法要根据实际情况和已有的实现方式而定,因为如果使用了不切实际的方法不仅降低开发效率,也降低了执行效率,往往也会造成不优雅的实现方式和代码风格。

子窗口设置父窗口的值使用方法如下:

子窗口中:

var parent=window.dialogArguments;
var x=parent.document.getElementByIdx_x("age").value;
x=x+1;
//设置父窗口中age属性值
parent.document.getElementByIdx_x("age").value=x;

以上是我在项目中使用javascript解决子窗口问题时,收集及积累的一些方法和资料。我是使用建立模态窗口的方式来实现的(这主要与项目本身有关),不过其实不论是使用window.open()还是使用window.showModelDialog()进行传参等操作时虽然在实现方法上有很大的差别,初次接触会觉得有点乱,但只要理清子窗口与父窗口之间的关系和角色之后,就很好理解了。