html中嵌入iframe进行父子页面参数传递[通俗易懂]

html中嵌入iframe进行父子页面参数传递[通俗易懂]实现的主要原理是:1.父页面调用子页面函数,选择iframe的id+ contentWindow+子页面的函数名([参数列表])2.子页面调用父页面函数,window.parent.父页面的函数名([参数列表])以下是测试代码:父页面:<!DOCTYPEhtml><html> <head> <metacharset="…

大家好,又见面了,我是你们的朋友全栈君。

实现的主要原理是:

1.父页面调用子页面函数,选择iframe的id + contentWindow +子页面的函数名([参数列表])

2.子页面调用父页面函数,window.parent.父页面的函数名([参数列表])

以下是测试代码:

父页面:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>父页面</title>
	</head>
	<body>
		<div id="ss" style="width: 400px;height: 400px; background: darkmagenta;">
			<button id="chuancan" onclick="chuandicanshu()">1</button>
		</div>
		
		<div id="main" style="position: fixed;left: 200px;top: 200px;background: red;">
			<iframe id="childFrame" src="frame.html" width="100" height="100"></iframe>
		</div>
		
		<script type="text/javascript">
			//调用子页面方法
			function chuandicanshu(){
				document.getElementById("childFrame").contentWindow.update("你好");
			}
			function closeParentWindow(){
				document.getElementById("main").style.display = "none";
			}
		</script>
	</body>
</html>

子页面:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>子页面</title>
	</head>
	<body>
		<button id="close" onclick="closeParentWindow()">关闭按钮</button>
		<p id="canshu">父页面传过来的参数显示</p>
		<script type="text/javascript">
			function update(canshujuti){
				document.getElementById("canshu").innerHTML = canshujuti;
			}
			function closeParentWindow(){
				window.parent.closeParentWindow();
			}
		</script>
	</body>
</html>

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/159727.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 散列查找

    散列查找一、散列的概念       散列同顺序、链接和索引一样,是又一种数据存储方法。散列存储的方法是:以数据集合中的每个元素的关键字k为自变量,通过一种函数h(k)计算出函数值,把这个值用做一块连续存储空间(即数组或文件空间)中的元素存储位置(即下标),将该元素存储到这个下标位置上。散列存储中使用的函数h(k)被称为散列函数或哈希函数,它实现关键字到存储位置(地址)的映射(或称转换),h(

    2022年5月14日
    60
  • Dubbo分布式服务框架入门(附工程)

    Dubbo分布式服务框架入门(附工程)

    2020年11月12日
    168
  • pytorch源码分析之torch.utils.data.Dataset类和torch.utils.data.DataLoader类

    pytorch源码分析之torch.utils.data.Dataset类和torch.utils.data.DataLoader类写在之前介绍Pytorch深度学习框架优势之一是python优先,源代码由python代码层和C语言代码层组成,一般只需要理解python代码层就可以深入理解pytorch框架的计算原理。所以学习pytorch源码需要熟练掌握python语言的各种使用技巧。在处理任何机器学习问题之前都需要数据读取,并进行预处理。Pytorch提供了许多方法使得数据读取和预处理变得很容易。torch.ut…

    2022年5月8日
    38
  • python 股票数据接口(深市股票什么开头)

    根据上交所2017年5月公告的文件显示,拿到L1普通行情数据授权的有112家公司,L2授权的有25家,我这里只贴出L2数据的厂家,如果想看L1的授权公司或者深交所的授权情况可以自己去查,太多了就不贴了。1.上海大智慧股份有限公司2.深圳巨灵信息技术有限公司3.浙江核新同花顺网络信息股份有限公司4.北京指南针科技发展股份有限公司5.鼎信汇金(北京)投资管理有限公司6.上海乾隆高科技有限公…

    2022年4月13日
    73
  • 51单片机SG90舵机控制原理

    51单片机SG90舵机控制原理舵机三根线的接法:黄线接信号线,红线接vcc,褐色线接GND舵机控制原理:通过控制PWM来控制舵机转动的角度,关于PWM的知识可以去智能小车专栏进行学习,转动周期设置为20ms,控制高电平的时间来进行舵机转动的角度。对于180°舵机t=0.5ms——————-舵机会转动0°t=1.0ms——————-舵机会转动45°t=1.5ms——————-舵机会转动90°t=2.0ms——————-舵机会转动135°t=2.5ms——————-舵机会…

    2022年6月16日
    39
  • mysql字符串拼接有空值_MySQL字符串拼接「建议收藏」

    mysql字符串拼接有空值_MySQL字符串拼接「建议收藏」concat()函数拼接时不会忽略空格,但如果有值是null,则结果为nullselectconcat(‘My’,’S’,’Q’,’L’);->MySQLSELECTCONCAT(‘c’);->cSELECTCONCAT(id,name)fromuser2;->1张三2李四concat_ws()函数拼接时不会忽略空格,但会忽略nullselectconcat_…

    2022年9月30日
    0

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号