html,子页面向父页面传递参数

父页面
<!DOCTYPE html>
<html>
  <head>
    <title>MyHtml.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<style type="text/css">
</style>
  </head>
  <script type="text/javascript">
  	function aaa(){
  		window.open("index.jsp", 'newwindow', 'height=100, width=400, top=0, left=0, toolbar=no, menubar=no, scrollbars=no,resizable=no,location=no, status=no');
  	}
  	function bbb(content){
  		document.getElementById("test1").value = content;//赋值
  	}
  </script>
  <body>
 
   
    <input id="test1" type="text"  >
     <input type="button" value="提交" οnclick="aaa()"> 
  </body>
</html>
子页面
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'index.jsp' starting page</title>
 <meta http-equiv="pragma" content="no-cache">
 <meta http-equiv="cache-control" content="no-cache">
 <meta http-equiv="expires" content="0">    
 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
 <meta http-equiv="description" content="This is my page">
 <!--
 <link rel="stylesheet" type="text/css" href="styles.css">
 -->
  </head>
  <script type="text/javascript">
   function aaa(){
    var str=document.getElementById("ddd").value;
    alert(str);
    window.opener.bbb(str);
    window.close();
   }
  </script>
  <body>
    <input id="ddd" type="text"/>
    <input type="button" value="提交" οnclick="aaa()"/>
  </body>
</html>



HTML中,页面向iframe框架中的页面传递参数可以通过设置iframe的src属性或使用JavaScript来实现。以下是两种常见的方法: 1. 使用URL参数传递: 在页面中,可以通过在iframe的src属性中加入查询字符串(query string)来传递参数。例如: ```html <iframe src="child_page.html?param1=value1&param2=value2" ...></iframe> ``` 在iframe框架中的child_page.html页面里,可以通过JavaScript来获取这些参数: ```javascript function getQueryVariable(variable) { var query = window.location.search.substring(1); var vars = query.split('&'); for (var i = 0; i < vars.length; i++) { var pair = vars[i].split('='); if (decodeURIComponent(pair[0]) == variable) { return decodeURIComponent(pair[1]); } } return null; } var param1 = getQueryVariable('param1'); // 获取param1的值 var param2 = getQueryVariable('param2'); // 获取param2的值 ``` 2. 使用JavaScript的window.postMessage方法: HTML5引入了window.postMessage方法,它提供了一种安全的方式来实现跨源通信,即允许一个页面和另一个“不同源”的页面进行通信。页面和iframe页面可以约定一个事件监听和触发机制来传递参数页面向iframe发送消息: ```javascript var iframe = document.getElementById('iframeId'); var iframeWindow = iframe.contentWindow; iframeWindow.postMessage({param1: 'value1', param2: 'value2'}, '*'); ``` iframe中的页面接收消息: ```javascript window.addEventListener('message', receiveMessage, false); function receiveMessage(event) { var data = event.data; if (data.param1) { console.log(data.param1); // 使用param1的值 } if (data.param2) { console.log(data.param2); // 使用param2的值 } } ``` 在使用postMessage时,必须确保接收和发送页面遵守相同的安全协议和端口,否则postMessage会失败。通常需要在iframe页面页面上都设置消息监听器。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

丵鹰

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值