关于两个页面之间传值，和打开新的页面的问题

最新推荐文章于 2023-06-23 14:00:00 发布
转载 最新推荐文章于 2023-06-23 14:00:00 发布 · 2.5k 阅读 · 0
文章标签：

#javascript #html #features #function #button #border

本文提供了一个关于如何实现在不同网页间进行数据传递的具体示例。通过使用JavaScript的window.open方法及window.opener属性，文章详细展示了如何从A页面打开B页面，并将B页面的数据返回到A页面的具体步骤。
我要问的问题分两个细节：  
1、在A页面上，点击某一处（一般是某个按钮或者是某个图片），在不关闭A页面的情况下，打开B页面。最好可以控制B页面显示的大小。  
2、在上一个问题解决的基础上，点击B页面的某一处，关闭B页面，在A页面的某个控件（一般是文本框）显示某个值。就是在B页面中选定某个值，然后将该值显示在A页面的相应控件中。  
以上两个问题最后能有例子。  
急用！解决问题马上给分！！！  
---------------------------------------------------------------  
 
用frame框架结构试试  
---------------------------------------------------------------  
 
UP  
---------------------------------------------------------------  
 
a.htm  
 
<!DOCTYPE  HTML  PUBLIC  "-//W3C//DTD  HTML  4.01  Transitional//EN">  
<html>  
<head>  
<meta  http-equiv="Content-Type"  content="text/html;  charset=gb2312">  
<title>无标题文档</title>  
<script  language="JavaScript"  type="text/JavaScript">  
<!--  
function  MM_openBrWindow(theURL,winName,features)  {  //v2.0  
   window.open(theURL,winName,features);  
}  
//-->  
</script>  
</head>  
 
<body>  
<form  name="form1"  method="post"  action="">  
   <table  width="400"  border="0"  align="center"  cellpadding="0"  cellspacing="0">  
       <tr>    
           <td  width="94">&nbsp;</td>  
           <td  width="306">&nbsp;</td>  
       </tr>  
       <tr>    
           <td>&nbsp;</td>  
           <td><input  name="text"  type="text"  id="text"></td>  
       </tr>  
       <tr>    
           <td>&nbsp;</td>  
           <td>&nbsp;</td>  
       </tr>  
       <tr>    
           <td>&nbsp;</td>  
           <td>&nbsp;</td>  
       </tr>  
       <tr>    
           <td>&nbsp;</td>  
           <td><input  name="Submit"  type="button"  onClick="MM_openBrWindow('/b.htm','','scrollbars=yes,width=300,height=400')"  value="打开新窗口"></td>  
       </tr>  
   </table>  
</form>  
</body>  
</html>  
 
 
b.htm  
 
<!DOCTYPE  HTML  PUBLIC  "-//W3C//DTD  HTML  4.01  Transitional//EN">  
<html>  
<head>  
<meta  http-equiv="Content-Type"  content="text/html;  charset=gb2312">  
<title>无标题文档</title>  
</head>  
<script>  
     function  returnText()  {  
             window.opener.form1.text.value=form1.text.value;  
                 window.close();  
     }  
</script>  
 
<body>  
<table  width="100%"  height="300"  border="0"  cellpadding="0"  cellspacing="0">  
   <tr>    
       <td  align="center"><form  name="form1"  method="post"  action="">  
               <input  name="text"  type="text"  id="text"  value="请输入你的内容">  
               <br>  
               <input  type="button"  name="Submit"  value="关  闭"  onClick="returnText()">  
           </form>  
             
       </td>  
   </tr>  
</table>  
</body>  
</html>  
 
---------------------------------------------------------------  
 
a中用onclick事件打开b  
onclick="javascript:window.open('b','','toolbar,resizable,scrollbars=auto,dependent,width=400,height=280');"  
 
点击B页面的某一处触发javascript事件  
<script  language="javascript">  
<!--  
function  check()  
{  
window.opener.document.form1.roomID.value=form1.roomID.value;    
window.close();  
}  
</script>  
---------------------------------------------------------------  
 
<a  href=#  onclick="window.open  ('AddUser.aspx',  'newwindow',  'height=280,  width=320,  top=150,  left=300,  toolbar=no,  menubar=no,  scrollbars=no,  resizable=no,location=n  o,  status=no')">new  window</a>  
---------------------------------------------------------------  
 
1)onclick="window.open(......);"  
或 者onclick="showModalDialog(filename,window,"status:false;dialogWidth:"+width +"px;dialogHeight:"+height+"px")";区别在于前者可以点击父页面，后者不可以。  
2）  
对于一的前者  
window.opener.document.  ......  
对于后者  
dialogArguments.document.  ...... 
javascript 两个页面之间传值
10-17
javascript 两个页面之间传值 使用window.open（）
Javascript 两个窗体之间传值实现代码
10-29
以上便是JavaScript实现两个窗体之间传值的基本方法。通过window.opener属性和window.open()函数返回的引用，我们可以灵活地在父窗体和子窗体之间进行数据传递和页面操作。然而，实际开发中还需考虑安全性问题，比如...
两个页面之间传值
lyshiba的专栏
10-10 587
a.htm             无标题文档     function  MM_openBrWindow(theURL,winName,features)  {  //v2.0      window.open(theURL,winName,features);   }   //-->
两个html页面之间的传值
Wisdom—Yoga—TaciturnKnight（WYT）
04-13 573
首先两个页面分别为A.html 和 B.html,将A页面的参数传递到B页面，案例代码如下： A.html  B.html
兩個頁面之間傳值的方法
笑看人参----JAVA，WEB2.0，SOA...
08-04 2014
在WebForm1和WebForm2頁面之間傳送TextBox的控件數據,代碼如下:public class WebForm1 : System.Web.UI.Page {  protected System.Web.UI.WebControls.TextBox TextBox1;  protected System.Web.UI.WebControls.TextBox TextBox2;  
2.3 窗口跳转与传递数据
GE_wy的博客
11-10 755
安卓应用往往有多个Activity，如何从一个Activity跳转到另一个Activity呢？往往要进行事件处理，并且还会用到安卓里面一个十分重要的组件——Intent，可以把它看成连接安卓不同组件之间的桥梁。类层次继承图常用属性属性含义text文本内容textSize文本字号，单位：sptextColor文本颜色，#ff0000 - 红色高度，单位：dp (wrap_content, match_parent)
微信小程序实现两个页面传值的方法分析
10-17
常见的页面传值方法包括URL传参、本地存储、全局数据存储等。接下来将详细分析这些方法的实现方式和注意事项。 1. URL传参法 URL传参是通过URL的查询字符串将数据从一个页面传递到另一个页面。在发送页面，可以使用...
后台与页面之间的传值以及页面与页面之间的传值
04-27
在IT行业中，尤其是在Web开发领域，后台与页面之间的传值以及页面与页面之间的传值是至关重要的技术环节。本文将详细讲解这两种通信方式，并以Spring MVC框架为例进行深入阐述。 一、后台（服务器）与页面（客户端...
ajax\HTML 页面与页面之间传值
12-21
6. **使用Web Storage事件监听**：当一个页面修改了SessionStorage或LocalStorage时，其他已打开的同源页面会触发'storage'事件，可以借此实现页面间的实时通信。 总结，HTML页面间传递数据有多种途径，包括URL参数...
vue 跳转页面并且传值以及在新窗口打开页面的方法
tanfei_的博客
02-13 9116
vue 跳转页面并且传值以及在新窗口打开页面的方法 第一步： vue跳转页面的时候要是不带自动生成路径的话，是需要自己配置页面的路由的 在这里进行配置就可以，里面会有案例自己跟着配置就好 第二步： 配置完成后就可以进行跳转了，代码如下： 跳转页面并且是新窗口打开 //这是第一种方式 <router-link target="_blank" :to="{path:'/***',query:{...
两个页面间的传参
XQ1204556447的专栏
08-18 1035
在两个页面间传参有两种方法
实现两个页面之间的传参
jk451的博客
05-26 2508
通过路由传参的方法进行参数传递。 使用this.$router.push传参，this.$route.params获取数据。 A页面： this.$router.push({ //path设置传参的路由 path:'/pages/tabBar/my/my', //params设置要传输的参数 params:{ I..
两个页面传参实现的几种方法
ZXH0122的博客
12-07 964
1.使用window.name: a页面： <script> window.name='123'; </script> b页面： <script> console.log(window.name); </script> 2.使用h5中的localStorage: a页面： <body> <a href="22.html">defsdfg</a> <script> window.localStorage.n
windowopen传值到jsp_JavaScript_javascript中window.open在原来的窗口中打开新的窗口(不同名)，最近做一个JSP网页要求打开一 - phpStudy...
weixin_39647734的博客
12-18 265
javascript中window.open在原来的窗口中打开新的窗口(不同名)最近做一个JSP网页要求打开一个没有菜单工具栏的IE，想到用window.open 来打开。但是发现如果先前打开的窗体没有关掉，在打开一个窗体的时候就会在先前没有关闭的窗体上打开新的窗体，这样先前的窗口就被替换掉了。经过查找资料和测试发现如果在打开窗体的时候指定的窗体名和当前的某个窗体同名的时候就会在那个窗体上打开。例...
两个html之间跳转 确定点,两个跨域页面进行跳转传参的终极方案
weixin_32676101的博客
06-08 2158
本文约定：A页面：跳转前的原来页面，假设为http://a.comB页面：将要跳转的目标页面，假设为http://b.com一、简单方案说到页面跳转，首先想到的就是用a标签：// 在A页面点击链接，并将参数data传到B页面// 在B页面接收A页面传过来的参数var data = window.location.href.split("?")[1].split("=")[1];还可以使用windo...
<td>加onclick事件，传参
THE DOOR IS CHANGING
07-21 2715
','')">
页面与页面间传值的几种方法详解
qingyuhanxi的博客
11-12 8785
方法用于解决静态页面之间的传值问题，以下是我用到的解决方法。 首先有俩种思路：一种是get方式参数在url上，跳转后的页面肯定能获取到。还有一种思路，就是将参数存到一个公共的地方，页面都可以获取到。 1.cookie 传值。 缺点: cookie储存是需要服务器支持的，本地直接运行静态文件是实现不了的。cookie能够存储少量数据到客户端的磁盘中，特定的网页之间是可以共享cookie中的数据。 2.LocalStorage和SessionStorage传值。 优点:本地静态文件可支持。...
前端页面间传值
2201_75702085的博客
05-21 1165
前端页面之间传值有url传值,cookie存储,web存储三种方法。
Vue 中页面传值的多种方式详解
热门推荐
pleaseprintf的博客
06-23 2万+
在 Vue 开发中，页面间的数据传递是一个常见的需求。为了实现页面间的交互和数据传递，Vue 提供了多种方式供开发者使用。本文将详细介绍 Vue 中页面传值的多种方式，帮助您根据具体场景选择合适的方法进行数据传递。通过路由传参、Vuex 状态管理、Props 属性和事件传递数据是 Vue 中常见的页面传值方式。根据具体场景和需求，选择合适的方法可以实现灵活的数据传递和页面间的交互。希望本文对您在 Vue 开发中页面传值的方法有所帮助。如有任何疑问或意见，欢迎留言讨论。需要系统源码或者BiShe加V。
两个无关系的页面之间传值
最新发布
10-16
<think>首先，用户的问题是：“我想查找两个无关系的页面之间传值的方法 请问两个无关系的页面之间传值的解决方案”。用户指定了页面无关系，意思是它们可能不是同一个应用的一部分，或者没有父子组件关系。 根据系统级指令： - 所有行内数学表达式必须使用 $...$ 格式。 - 独立公式必须使用 $$...$$ 格式并单独成段。 - LaTeX语法正确。 - 使用中文回答。 - 生成相关问题。 - 回答中引用的段落末尾自然地添加引用标识。 另外，用户提到了“参考站内引用”，并提供了引用[1]到[4]。这些引用被标记为 [^1] 到 [^4]。 引用内容： - [^1]: 关于Web页面传值，HTTP无状态，需要通过服务器传递信息。 - [^2]: Vue3中的props用法，子组件接收props，提到了数组传值。 - [^3]: C# winform多个窗体之间的传值，使用构造函数或其他方式。 - [^4]: Java web项目之间传值，讨论了通信渠道如HTTP或WebService。 用户说：“上述引用仅供参考，并不是用户真正的需求，请尽可能多的参考用户上一次的问题和你的回答。” 但在对话历史中，这是第一条消息，所以没有上一次问题。我需要基于当前问题回答。 用户真正需求是找到两个无关系的页面之间传值的方法。页面无关系意味着它们可能独立，不共享相同上下文，比如不同网站或不同应用。 可能的解决方案： 1. **使用URL参数**：在链接中添加查询参数，例如 `page2.html?key=value`。 2. **使用Cookies**：通过浏览器存储数据，不同页面可以读取。 3. **使用LocalStorage或SessionStorage**：Web存储API允许在浏览器中存储数据，页面可以访问相同域名下的存储。 4. **使用Server-Side Session**：通过服务器存储状态，页面通过服务器通信。 5. **使用Web Messaging API**：如 `postMessage`，允许不同窗口或标签页通信。 6. **使用Query String in Redirects**：通过重定向传递参数。 引用[^1]提到了通过服务器传递，引用[^4]讨论了项目间通信如HTTP或WebService。 在回答中，我需要结构化，清晰，使用中文。 最后，生成相关问题。 结构回答： 1. **介绍问题**：解释两个独立页面传值的挑战。 2. **解决方案列表**：列出不同方法，解释每种方法，确保语法正确。 3. **引用参考文献**：在相关部分添加引用标识。 4. **生成相关问题**：在末尾。 确保行内数学表达式使用 $...$，但在这个主题中，可能没有数学表达式，所以可能不需要。例如，如果有变量，使用 $variable$。 最终回答： - 开头：解释HTTP无状态性和挑战。 - 方法： - URL Query Parameters - Cookies - Web Storage (LocalStorage, SessionStorage) - Server-Side Sessions - Web Messaging (postMessage) - 每种方法简要描述优缺点。 - 添加引用：[^1] 对于HTTP无状态，[^4] 对于项目间通信。 - 结尾：生成相关问题。 </think>### 两个无关系的页面之间传值的方法 在Web开发中，两个无关系的页面（即它们之间没有父子组件关系、不在同一应用中或隶属不同域名）之间的传值是一个常见挑战。由于HTTP协议是无状态的[^1]，每个页面请求都是独立的，无法直接传递状态。不过，通过一些技术手段可以实现跨页面数据传递。以下是可行的解决方案，结合实际场景分析： #### 1. **URL查询参数（URL Query Parameters）** - **原理**：在页面跳转时，通过URL添加查询字符串传递键值对。例如，页面A通过链接引导用户到页面B，URL格式如 `pageB.html?key1=value1&key2=value2`。页面B通过JavaScript解析URL获取参数。 - **实现代码示例**： ```javascript // 页面B获取URL参数 const urlParams = new URLSearchParams(window.location.search); const value = urlParams.get('key1'); console.log(value); // 输出: value1 ``` - **优点**：简单易用，无需服务器支持；适合少量数据（如用户ID或过滤条件）。 - **缺点**：数据暴露在URL中，不适合敏感信息；URL长度有限制（浏览器限制约2000字符）。 - **适用场景**：不同页面间的简单跳转，如搜索结果页传递搜索条件[^1]。 #### 2. **浏览器存储（LocalStorage 或 SessionStorage）** - **原理**：使用Web Storage API（如 `localStorage` 或 `sessionStorage`）在当前域名下存储数据。两个页面共享同一域名时，可以通过 `localStorage` 读写数据（domain-based，页面需在同一域名下）。 - **实现代码示例**： ```javascript // 页面A设置存储 localStorage.setItem('userData', JSON.stringify({ name: 'Alice', age: 30 })); // 页面B读取存储 const data = JSON.parse(localStorage.getItem('userData')); console.log(data.name); // 输出: Alice ``` - **优点**：数据持久化（`localStorage`）或会话级（`sessionStorage`）；支持较大数据（约5MB）；无需服务器支持。 - **缺点**：页面必须在同一域名下；跨域时不支持；需处理数据同步（如使用 `storage` 事件监听变化）。 - **适用场景**：同一网站内的不同页面共享用户偏好或临时数据，如购物车状态[^1][^2]。 #### 3. **Cookie机制** - **原理**：通过HTTP Cookies在浏览器中存储数据。页面A设置Cookie后，浏览器在后续请求到同一域名时自动附加Cookie，页面B可读取。 - **实现代码示例**： ```javascript // 页面A设置Cookie document.cookie = "username=John; expires=Thu, 18 Dec 2025 12:00:00 UTC; path=/"; // 页面B读取所有Cookie const cookies = document.cookie.split(';').reduce((acc, cookie) => { const [key, value] = cookie.split('='); acc[key.trim()] = value; return acc; }, {}); console.log(cookies.username); // 输出: John ``` - **优点**：兼容性好（所有浏览器支持）；适合小型数据（约4KB）；可设置过期时间。 - **缺点**：数据会随每个HTTP请求发送，增加带宽；跨域需配置 `domain`；安全性问题（如CSRF攻击）。 - **适用场景**：用户认证信息或会话ID的传递，适用于无关系的页面在同一域名下[^1]。 #### 4. **服务器端传递（通过API或Session）** - **原理**：利用服务器作为中介。页面A将数据发送到服务器（如通过AJAX或表单提交），服务器存储状态（在Session或数据库），然后页面B通过API或重定向获取数据。 - **实现示例**（使用AJAX和Node.js）： - 页面A发送数据： ```javascript fetch('/store-data', { method: 'POST', body: JSON.stringify({ key: 'value' }) }); ``` - 服务器存储（Node.js）： ```javascript app.post('/store-data', (req, res) => { // 存储到Session或数据库 req.session.data = req.body; res.sendStatus(200); }); ``` - 页面B获取数据： ```javascript fetch('/get-data').then(response => response.json()).then(data => console.log(data)); ``` - **优点**：适合跨域或无域名关系页面；安全可靠；支持大型数据。 - **缺点**：依赖服务器和网络；增加延迟；需后端开发。 - **适用场景**：独立Web项目间通信，如不同系统通过API传值[^1][^4]。 #### 5. **Web Messaging API（postMessage）** - **原理**：使用HTML5的 `window.postMessage` 方法，允许不同窗口或标签页通信（即使跨域）。页面A向页面B发送消息，页面B监听 `message` 事件。 - **实现代码示例**： - 页面A发送消息： ```javascript const targetWindow = window.open('pageB.html'); // 打开页面B targetWindow.postMessage({ data: 'Hello from Page A' }, 'https://pageB-domain.com'); ``` - 页面B接收消息： ```javascript window.addEventListener('message', (event) => { if (event.origin === 'https://pageA-domain.com') { console.log(event.data.data); // 输出: Hello from Page A } }); ``` - **优点**：支持跨域通信；实时性强；安全（需验证 `origin`）。 - **缺点**：页面需在同一浏览器上下文；实现复杂；需手动处理打开窗口。 - **适用场景**：不同域名的独立页面协作，如嵌入式应用或弹窗传值[^2]. 以上方法各有优劣：URL参数适用于简单场景；LocalStorage适合同一域名；Cookie适合会话数据；服务器传递最通用；postMessage适合跨域。选择方案时需考虑安全性、数据大小和设备兼容性。实践中，优先使用客户端存储（如LocalStorage）以减少服务器负载，但对于敏感数据，服务器端传递更安全[^1][^4].
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值