html中嵌入iframe进行父子页面参数传递

àì夳堔傛蜴生んèń 2022-05-18 04:46 646阅读 0赞

实现的主要原理是：

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>

发表评论取消回复

表情：

评论列表（有 0 条评论，646人围观）

还没有评论，来说两句吧...

相关阅读

相关 iframe父子页面通信

iframe获取当前子页面url parent.document.getElementById("ID name").contentWindow.location

冷不防/ 2022年12月23日 13:28/ 0 赞/ 250 阅读

相关 html页面跳转传递参数

从a.html跳转到b.html页面，如果给b.html传递参数，可以通过下面的方式来传递： 1. 直接将参数拼接到url上，如b.html?param1=aa&param

痛定思痛。/ 2022年07月14日 01:18/ 0 赞/ 285 阅读

相关 javascript 父子iframe相互传参数

前端开发的过程中。可能用iframe去嵌套html页面。当我们在父iframe中传递参数去给子iframe的时候。我们可以通过将参数对象设置成子类iframe的win

超、凢脫俗/ 2022年06月13日 08:29/ 0 赞/ 440 阅读

相关 html页面跳转及参数传递

点击第一个html页面上 table数据的一行，跳转到第二个html页面显示这个场景下的详细数据，跳转过去时需要把这行数据的id传递给第二个html页面 1. 第一个html

╰半橙微兮°/ 2022年06月09日 03:45/ 0 赞/ 265 阅读

相关 html页面跳转传递参数

from:http://blog.csdn.net/gnail\_oug/article/details/53286694 从a.html跳转到b.html页面，如

「爱情、让人受尽委屈。」/ 2022年06月03日 06:18/ 0 赞/ 355 阅读

相关 html中嵌入iframe进行父子页面参数传递

实现的主要原理是： 1.父页面调用子页面函数，选择iframe的id + contentWindow +子页面的函数名（\[参数列表\]） 2.子页面调用父页面函数，win

àì夳堔傛蜴生んèń/ 2022年05月18日 04:46/ 0 赞/ 647 阅读

相关 iframe 父子页面间方法/属性互相调用

父页面调用子页面父页面调用子页面方法： $("mainfrm")[0].contentWindow.test(); //mainfrm 父页面I

痛定思痛。/ 2021年12月04日 02:45/ 0 赞/ 376 阅读

相关 vue页面中嵌入iframe外源地址页面监听iframe 中事件

1.需求 vue中需要嵌入iframe 地址是第三方的当iframeh中页面点击的时候.vue需要监控到这个事件将本页面关闭.代码中 js 发送和接收方法 //

末蓝、/ 2021年08月26日 23:35/ 1 赞/ 2943 阅读

相关 react组件中通过iframe嵌入html页面

最近在一个web前端开发的项目中，遇到了这样一个需求：项目本身使用react搭建，用antd来完成各种组件的展示，有一个需求，是要将另外一个项目中的部分页面功能加进来，另外的一

系统管理员/ 2021年05月12日 11:50/ 0 赞/ 1295 阅读

相关详解html中页面跳转传递参数的问题

详解html中页面跳转传递参数的问题

小灰灰/ 2020年05月14日 10:57/ 0 赞/ 903 阅读