HTML 打开新页面，关闭子页面传值回父页面

最新推荐文章于 2021-06-04 02:20:07 发布
原创 最新推荐文章于 2021-06-04 02:20:07 发布 · 2.3k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了一种在父窗体中通过调用子窗体的方法来实现数据交互的技术。具体操作为，父窗体使用window.open()打开子窗体，并通过window.opener调用父窗体中的getUsers()方法传递参数，完成数据的返回。最后，子窗体通过window.close()关闭自身。

父页面：

 window.open("web/issue/getUsers");  打开新页面

子页面：

   window.opener.getUsers("sss");  //传值回打开它的父页面
   window.close();

Be Patient K
关注
layUI 子页面传值到父页面并刷新
战族狼魂的博客
08-11 724
layui 子页面table列表选中的行的id，传递到父页面作为查询条件并刷新父页面的table列表
easyUi弹出window窗口传值与调用父页面的方法,子页面给父页面赋值
08-10
2. 在父页面中，通过`$.dialog`或`$.window`方法打开子页面，可以设置一些参数，如宽度、高度、内容URL等。 例如： ```javascript $.window({ title: '子页面', width: 500, height: 400, href: 'subPage.html'...
当前页面弹出子页面，在子页面关闭时将子页面的值带到父页面中
甘蓝的专栏
07-21 1579
父页面father.html: father.html function assignment(content) { document.getElementById("fvalue").value = content;//赋值 } function openwindow(url,name,iWidth,iHeight) { va
html，子页面向父页面传递参数
strutce的专栏
08-13 2850
父页面 MyHtml.html --> function aaa(){ window.open("index.jsp", 'newwindow', 'height=100, width=400, top=0, left=0, toolbar=no, menubar=no, scrollbars=no,
HTML 如何弹出新窗口
12-26
学习此文档，可以快速了解。如何在html文档中 设置弹出窗口的大小
关闭子窗口，同时把参数传给父页面html元素及服务器端控件中
tiger8000的专栏
09-13 1410
 父页面 parent.aspx： SCRIPT language="JavaScript">                function PopupCatSel() {    var selProdWnd=window.open("PopChildTest.aspx","new","resizable=yes,width=580,height=320,top=0,scroll
html中子页面给父页面赋值,关闭子页面给父页面传值,父页面条件按子页面设置查询
u012767263的专栏
06-04 4577
[html] view plaincopyprint? father.html   html>   head>   meta http-equiv="Content-Type" content="text/html; charset=gb2312" />   title>father.htmltitle>    script >   function as
jQuery使用模式窗口实现在主页面和子页面中互相传值的方法
10-22
在探讨如何使用jQuery实现模式窗口来在主页面与子页面间互相传值之前，我们先要了解什么是模式窗口。模式窗口是一种在用户与主页面交互时弹出的覆盖层，它通常用来提供额外的用户界面元素，比如弹出表单、对话框或者...
HTML5 使用 sessionStorage 进行页面传值的方法
09-28
HTML5引入了两种客户端存储方式：localStorage和sessionStorage，它们都可以帮助开发者在用户的本地浏览器中保存数据。localStorage提供了一个无时间限制的数据存储机制，而sessionStorage则提供了一个针对单个...
JavaScript实现弹出子窗口并传值给父窗口
10-25
`window.open()`打开新窗口后，可以在子窗口中监听`message`事件，然后通过`window.parent.postMessage()`向父窗口发送数据。 总结一下，JavaScript实现弹出子窗口并传值给父窗口的基本步骤包括： 1. 在父窗口中...
在html页面中弹出子页面效果
03-09
在html页面中弹出子页面效果，我在struts1中使用的。 用示例图！
html弹出div页面
06-07
有关于html类似于弹窗效果的div，可以进行自定义内容。。。
关于父页面中再开子页面，子页面关闭时如何传值给父页面的问题
fzt12138的博客
03-19 759
在java开发过程中，父页面中再出现子页面的情况有很多种，也很常见，但两个页面之间实现传值的方式却不尽相同，今天在开发过程中，我无意见发现自己无法将子页面的值传递给父页面，经过一整天的研究，终于找到了解决办法，写此文章防止自己忘记，也与大佬们交流学习，写的不好，还请见谅。 子页面到父页面的传值方式有很多，比如子页面通过form表单处理完数据后关闭子页面，父页面通过刷新或者后台二次跳转，可以实现两个数据的传输。或者直接将子页面做成隐藏的div，js可操作两个div，这样父子页面的数据便达成了互通。这也是现在大
layer 弹出框(ifram 层)，在ajax return 处 ，无法友好的用layer.msg
weixin_34033624的博客
12-27 245
父层 <div class="col-xs-4 text-left" style="padding-left: 50px;"><button type="button" class="btn btn-success" onclick="addCategory();">添加</button></div> 点击添加，按钮，执行添加方法 function ...
html打开新页面回传参数,如何通过window.open方法打开新的窗口，并将获取的值返回给上一级页面...
weixin_29325007的博客
06-04 1546
lgFC5D2BIs94hvm16iTJXg==var url = "{:url('storage/index/')}";//转向网页的地址;var name = '查找商品';//网页名称，可为空;var iWidth = 720;//弹出窗口的宽度;var iHeight = 600;//弹出窗口的高度;//获得窗口的垂直位置var iTop = (window.screen.availHei...
html弹出子页面代码,JavaScript 弹出子窗体并返回结果到父窗体的实现代码
weixin_30097621的博客
06-03 1061
思路：用window.showModalDialog方法获取到弹出子窗体的引用，再在子页面用window.returnValue="***"来返回结果。示例代码：(用jQuery简化实现)父页面：parent.html父页面子页面 son.html子窗体苹果橘子香蕉总结：参数传递：1.要想对话框传递参数，是通过vArguments来进行传递的。类型不限制，对于字符串类型，最大为4096个字符...
html打开子页面母页面不会关闭,在移动端，父页面打开子页面之后，获取子页面参数之后跳转到父页面，window.close()不能用...
weixin_29819789的博客
06-03 279
在这个页面上点击选择地址之后跳转到这个页面选择完地址之后确定按钮，然后把这个页面关闭，就回到了父页面，同时这个页面设置的地址也传到了父页面上，在PC端可以，但是移动端不行window.close()不能用代码如下父页面获取参数值代码function setAddress(vCITY_TEXT,vAREA_TEXT,vCUST_ADDRESS_ID,vCUST_ADDRESS_TOTAL,vIS_C...
子页面回调父页面函数
纸上得来终觉浅
08-15 847
场景：淘宝在编辑商品时，从商品页跳到邮费模板页面，添加邮费模板后，商品页面邮费模板会自动更新。方法一： 定时器方法二：window.open相关DEMO： a.html<a onclick="window.open('b.html','target'); return false;" href="javascript:void(0)">打开b页面</a> <script> functio
PHP Html 弹窗，本页面弹窗子页面
weixin_34365635的博客
08-29 1214
echo '&lt;script type=text/javascript&gt;window.open("","name1","width=100,height=200,toolbar=no,scrollbars=no,menubar=no,screenX=100,screenY=100");&lt;/script&gt;';  
子组件给父组件传值，页面刷新
最新发布
03-09
### 子组件向父组件传递值并确保页面刷新后数据不丢失 #### Vue 中的解决方案 在 Vue 应用程序中，子组件可以通过事件触发的方式将数据发送到父组件。对于防止页面刷新导致的数据丢失问题，可以采用多种策略来保存和恢复状态。 1. **通过自定义事件通信** 使用 `$emit` 方法可以让子组件通知其父组件某些事情已经发生，并附带任何必要的有效载荷。这允许父级监听这些特定于应用逻辑的事件并作出相应的反应[^1]。 2. **利用 `provide` 和 `inject` 实现跨层级依赖注入** 如果希望更灵活地管理多个嵌套层次间的共享状态，则可考虑使用提供者模式——即 `provide/inject` API 来分发属性而无需显式地一层层向下传递它们。不过需要注意的是，默认情况下这种方式不会自动更新子组件中的静态初始值；因此如果需要动态响应的变化，应该让 provide 函数返回一个新的计算属性或者 watcher 的结果。 3. **持久化存储机制** 面对浏览器刷新带来的挑战，推荐的做法是借助本地储存技术如 localStorage 或 sessionStorage 将重要信息缓存起来，在每次加载时读取该位置的信息作为默认配置项填充表单或其他交互元素。这样即使用户关闭再打开网页也能看到之前输入的内容[^2]。 4. **使用 Vuex 进行全局状态管理 (适用于较大规模的应用)** 对于较为复杂的场景下，尤其是涉及到多处都需要访问同一份最新版本的状态时，引入专门的状态管理模式会更加高效合理。Vuex 是官方支持的状态容器库，它提供了集中式的 store 结构用于处理应用程序级别的状态逻辑[^3]。 5. **结合 keep-alive 组件优化性能与体验** 当存在频繁切换但又不想每次都销毁重建视图的情况下，`<keep-alive>` 可以帮助我们缓存内部实例及其 DOM 节点，从而减少不必要的重绘开销以及维持住临时性的UI状态不变[^4]。 ```javascript // 父组件 ParentComponent.vue import { ref, onMounted } from 'vue'; export default { setup() { const message = ref('Initial Message'); function handleMessageFromChild(newMsg) { message.value = newMsg; // Save to local storage when the value changes. window.localStorage.setItem('message', JSON.stringify(message.value)); } onMounted(() => { // Restore data after page reloads. const savedMessage = window.localStorage.getItem('message'); if (savedMessage !== null && savedMessage !== undefined){ message.value = JSON.parse(savedMessage); } }); return { message, handleMessageFromChild }; }, }; ``` ```html <!-- Child Component --> <button @click="$emit('update:message', 'Updated Message')">Update</button> ``` ```html <!-- Parent Component Template --> <div> {{ message }} <child-component @update:message="handleMessageFromChild"></child-component> </div> ```
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值