打开子窗口，子窗口关闭，父窗口跳转

最新推荐文章于 2022-04-21 15:31:04 发布

最新推荐文章于 2022-04-21 15:31:04 发布 · 249 阅读

文章标签：

#JSP #JavaScript #HTML #ViewUI

本文介绍了一个简单的网页交互案例，包括通过按钮打开新窗口、在子窗口中提交数据并使父窗口跳转到另一个页面的过程。涉及first.jsp、open.jsp、second.jsp和jump.js四个文件的具体实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

打开子窗口，子窗口关闭，父窗口跳转

这里一共有四个文件：first.jsp open.jsp second.jsp jump.js

first.jsp:父窗口

<html>

open.jsp :子窗口

</script>
<body>
<p>open.html</p>
<form name ="open" method="post" action="" >
<input name="openin" type="text" size="20" /><input name="" type="submit" value="提交" onclick="DataSubmit()" />
</form>
</body>
</html>

second.jsp：first.jsp跳转窗口

jump.js：页面跳转的JavaScript代码

function openNew(first)
{
window.showModalDialog("open.jsp",first,"DialogWidth:800px;DialogHeight:600px");

};

function DataSubmit()
{
var a = window.dialogArguments;
alert(a.first.firstin.value);
a.first.submit();
window.close();

};

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

iteye_3986

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

html在父窗口中打开新页面跳转,路由跳转、打开新窗口、跳转到新页面

weixin_27379781的博客

06-09

2512

基础不扎实，温故知新下方案一：getDescribe(id) {// 直接调用$router.push 实现携带参数的跳转this.$router.push({path: `/describe/${id}`,})对应配置{path: '/describe/:id',name: 'Describe',component: Describe}很显然，需要在path中添加/:id来对应 $route...

WPF 子窗口在父窗口固定位置显示，跟随父窗口移动改变大小

DavidLiu的博客

09-15

3855

Void CreateSubWindow() { TestWindow ts = new TestWindow(2); ts.Title = "TP-" + (i + 1); ts.TestFormIndex = i; ts.Window...

参与评论您还未登录，请先登录后发表或查看评论

javascript父页面跳转

beingalong的专栏

02-23

308

window.parent.window.location.href = "URL"; window.parent.downloadpic.src = 'images/studet_downpic/xiazai_04.jpg';

js页面跳转的问题(跳转到父页面、最外层页面、本页面)

我们不生产任何代码只做代码的搬运工

06-03

2061

js页面跳转：本页面跳转,上一层页面跳转，最外层的页面跳转，下面为大家大家分享下不同页面之家的跳转问题，感兴趣的朋友可以学习下 "window.location.href"、"location.href"是本页面跳转 "parent.location.href"是上一层页面跳转 "top.location.href"是最外层的页面跳转举例说明：

使用Web前端技术开发桌面应用---Electron中嵌入网页和打开子窗口

CreatorRay的博客

02-23

4182

码字不易，有帮助的同学希望能关注一下我的微信公众号：Code程序人生，感谢！代码自用自取。上期内容我们学了如何在浏览器中打开网页，这节我们学习一下如何用BrowserView来嵌入一个网页到我们应用中，这很类似Web中的<iframe>标签。需要注意的是BrowserView是主进程中的类，所以只能在主进程中使用。在主线程中用BrowserView嵌入网页打开根目录下打开main.js,直接引入并使用BrowserView就可以实现键入网页到应用中。 var BrowserVie.

关于窗口跳转的一些总结

weixin_30797027的博客

02-03

269

　　在应用有frameset或者iframe的页面时，parent是父窗口，top是最顶级父窗口（有的窗口中套了好几层frameset或者iframe），self是当前窗口， opener是用open方法打开当前窗口的那个窗口。 1、window.self 　　功能：是对当前窗口自身的引用。它和window属性是等价的。　　语法：window.self 　　注：window、self、w...

子父窗口之间的操作

12-10

1. **父窗口打开子窗口：** 通常情况下，父窗口可以使用window.open()方法打开一个子窗口。例如，父窗口中的JavaScript代码可以写成这样： ```javascript var childWindow = window.open('子窗口的URL', '窗口名称...

关闭时刷新父窗口两种方法

09-04

在子窗口中，`window.opener`属性引用的是打开该子窗口的父窗口。因此，`window.opener.location.reload()` 将父窗口的地址栏中的URL重新加载，相当于用户点击浏览器的刷新按钮。值得注意的是，如果父窗口在刷新前...

子窗口iframe跳转到父窗口

11-30

### 子窗口iframe跳转到父窗口的知识点详解 #### 一、背景介绍在现代Web开发中，`iframe`（Inline Frame）是一种常见的技术，用于在当前网页中嵌入另一个网页或文档。通过`iframe`，开发者可以实现丰富的功能，如...

Vue 路由间跳转和新开窗口的方式（query、params）

10-15

在Vue项目中，路由跳转是实现页面切换的重要功能，而新开窗口则是在新的浏览器标签页中打开链接。为了在不同的页面间传递数据，我们可以使用不同的方法，最常用的有两种方式，即query方式和params方式。接下来，我们...

总结：子窗口创建及父窗口与子窗口之间通信

Squirrel的专栏

08-15

7519

1、Javascript弹出子窗口可以通过多种方式实现，下面介绍几种方法(1) 通过window对象的open()方法，open()方法将会产生一个新的window窗口对象其用法为： window.open(URL,windowName,parameters); URL: 描述要打开的窗口的URL地址，如何为空则不打开任何网页； windowName:描述被打开的窗口的

jquery操作iframe的方法：父页面和子页面相互操作（九种情况）

xiaouncle的博客

05-23

1万+

现实开发中难免会遇到子页面、父页面相互操作的情况，由于时不时地会遇到几次（不是一次），所以就整理了一下父子页面相互相互调用常见的九种情况，作为自己的备忘录，同时也希望对大家有帮助。一、子页面C1操作父页面P（下述三个方法写在子页面C1中） //获取父页面P中控件的值, btnParent1是子页面C1中的按钮 $("#btnParent1").click(function () { ...

MFC子窗口与父窗口的跳转\隐藏和销毁程序

beijike的博客

04-21

3889

以下是个人总结，如有错误之处，还望各位大佬见谅，也希望个位能指出我的不足之处。一，如何从父窗口跳转到子窗口且隐藏主窗口

js打开子窗口关闭父窗口

岁寒松柏

10-25

743

无标题文档子父窗口的操作 var win=null; function op(){ win=window.open("about:blank","win","width=200,height=200"); win.document.write(""); win.document.write(""); } <input t

子页面控制父页面跳转

a429759863的博客

05-10

2349

在子页面b用 "opener.location.href="c.html" 控制a页面跳转到c页面其中a页面为：点击按钮a，打开新窗口b，验证码的存在可在b代码中添加指令，使b点击按钮等后让a页面刷新（暂时没写）。 a.html 无标题文档 var code ; function createCode(){ code = new Array(); var codeLength =

js子窗口让父窗口页面跳转

sqlservercaonima的博客

03-08

2545

window.function(){ //如果父窗口不是自己，则让父窗口导航到一个新页面 if(window.parent != window){// 如果是在框架中 //就让框架页面跳转到登陆页面 window.parent.location.href = "${pageContext.request.contextPath}/login.jsp"; } }; ...

父窗口控制iframe窗口跳转+子窗口控制iframe跳转

weixin_42935688的博客

05-29

2238

//父窗口控制iframe窗口跳转 function iframehref(obj){ url = $(obj).attr('value'); $('iframe').attr('src',url + '?_d=' + Math.random()); } //子窗口控制iframe跳转 function chirdeniframehref(obj){ url = $(ob...

window程序

qq_43656826的博客

09-25

1060

#include <windows.h>LRESULT CALLBACK WndProc(HWND hWnd, UINT message, WPARAM wParam, LPARAM lParam);char windowName[]="window窗口"; //窗口标题int APIENTRY WinMain(HINSTANCE hInstance,HINSTANCE hPrevInstance,LPSTR lpCmdLine,int nCmdShow){ //定义窗口类 WNDC

解决iframe重定向让父级页面跳转

最新发布

02-28

<think>好的，用户问的是在Laravel中如何实现子窗口关闭后父窗口刷新。这个问题涉及到前端JavaScript和Laravel后端的结合使用。我需要先理清楚用户的需求。用户可能是在开发一个功能，比如弹窗表单提交后，关闭子窗口并刷新父窗口的数据。首先，我应该考虑如何检测子窗口关闭的事件。因为纯JavaScript本身没有直接监听子窗口关闭的事件，但可以通过轮询或者使用window.onbeforeunload事件来间接实现。不过，onbeforeunload在页面刷新或跳转时也会触发，可能会导致父窗口不必要的刷新，所以需要找到更可靠的方法。然后，想到的是子窗口在关闭前触发一个回调函数，通知父窗口进行刷新。例如，当子窗口的表单提交成功后，在关闭前调用window.opener.location.reload()。这样父窗口就会刷新，但需要确保子窗口的关闭操作是在提交成功之后，而不是直接关闭。接下来，可能需要分步骤解释。首先，在父窗口中打开子窗口时，使用window.open方法，并保存子窗口的引用。然后，在子窗口的表单提交后，使用Laravel处理提交，返回成功的响应，接着在子窗口的JavaScript中调用window.opener的刷新方法，并关闭自身。另外，需要考虑到跨域的问题，如果父窗口和子窗口不在同一个域下，可能会受到浏览器的安全限制。但大多数情况下，Laravel应用可能是在同域下，所以这个问题可能不存在。然后，用户可能希望具体的代码示例，比如父窗口如何打开子窗口，子窗口如何提交表单，以及提交后如何关闭并刷新父窗口。例如，在父窗口中有个按钮，点击后打开子窗口，子窗口提交表单到Laravel的路由，处理完成后返回，并在子窗口的JavaScript中执行关闭和刷新父窗口的操作。需要注意的是，如果表单提交失败，应该如何处理错误，避免子窗口关闭而父窗口刷新。因此，可能需要在子窗口的表单提交成功后，才触发刷新和关闭操作。例如，使用Ajax提交表单，根据服务器的响应决定是否关闭和刷新。可能还需要提到使用Laravel的CSRF保护，确保表单提交中包含_token字段，或者在Ajax请求中设置合适的headers。另外，可能有用户会问如何检测子窗口是否已经关闭，这时候可能需要使用轮询检查子窗口的closed属性，但这种方法可能不够高效，不如在子窗口主动触发父窗口的刷新更可靠。总结一下，回答的结构应该是：先介绍基本原理，然后分步骤说明父窗口和子窗口的代码实现，包括如何打开子窗口，提交表单，处理响应，关闭子窗口并刷新父窗口。同时，给出代码示例，并提醒注意事项，如CSRF保护，错误处理等。</think>在Laravel中实现子窗口关闭后父窗口刷新，主要通过JavaScript与浏览器窗口交互实现。以下是实现步骤和代码示例：一、基本原理 1. 父窗口使用`window.open()`打开子窗口 2. 子窗口通过`window.opener`访问父窗口对象 3. 在子窗口关闭前触发父窗口刷新操作二、具体实现步骤 1. 父窗口代码（如resources/views/parent.blade.php） ```html <button onclick="openChildWindow()">打开子窗口</button> <script> let childWindow = null; function openChildWindow() { childWindow = window.open('/child', '_blank', 'width=600,height=400'); // 轮询检查子窗口状态（备选方案） const checkChildClosed = setInterval(() => { if (childWindow.closed) { location.reload(); clearInterval(checkChildClosed); } }, 500); } </script> ``` 2. 子窗口代码（如resources/views/child.blade.php） ```html <form id="childForm" onsubmit="handleSubmit(event)"> @csrf <input type="text" name="data"> <button type="submit">提交并关闭</button> </form> <script> function handleSubmit(e) { e.preventDefault(); // 使用Fetch API提交表单 fetch('/submit', { method: 'POST', body: new FormData(e.target) }) .then(response => { if (response.ok) { // 提交成功后刷新父窗口并关闭当前窗口 window.opener.location.reload(); window.close(); } }) .catch(error => { console.error('Error:', error); }); } </script> ``` 三、Laravel路由配置（routes/web.php） ```php Route::get('/parent', function () { return view('parent'); }); Route::get('/child', function () { return view('child'); }); Route::post('/submit', function (Request $request) { // 处理表单数据 // $request->input('data'); return response()->json(['success' => true]); })->name('submit.form'); ``` 四、注意事项 1. 安全机制：确保在子窗口中使用`window.opener`时，父子窗口同源（相同协议/域名/端口） 2. CSRF保护：Laravel表单必须包含`@csrf`指令 3. 错误处理：建议在fetch请求中添加catch处理网络错误 4. 备选方案：当子窗口非正常关闭时，父窗口的轮询检查可保证刷新 5. 现代浏览器可能阻止自动关闭窗口，建议用户主动触发关闭操作五、优化建议 1. 添加加载状态提示 2. 使用异步请求处理表单提交 3. 在父窗口添加错误回调处理 4. 对于复杂场景，可以考虑使用WebSocket或Server-Sent Events实时更新这种实现方式适用于以下典型场景： - 弹出表单提交窗口 - 独立图片/文件上传窗口 - 第三方授权回调处理 - 需要隔离的支付处理流程实际开发中可以根据具体需求选择最适合的窗口通信方式。