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

àì夳堔傛蜴生んèń 2022-05-18 04:46 661阅读 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 条评论，661人围观）

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

相关阅读

相关利用iframe嵌入html页面（实用, 赞）

效果图： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L

Dear 丶/ 2023年06月30日 02:25/ 0 赞/ 19 阅读

相关 iframe中涉及父子页面跨域问题

什么是跨域？跨域，指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器施加的安全限制。所谓同源是指相同的域名、协议和端口，只要其中一项不同就为跨域

﹏ヽ暗。殇╰゛Y/ 2023年06月23日 07:58/ 0 赞/ 14 阅读

相关 vue中嵌入原生iframe并传递参数

父传子 // 父页面main.html传递参数 <template> <div> <iframe :src="frameUrl"

ゞ浴缸里的玫瑰/ 2023年02月21日 04:49/ 0 赞/ 2 阅读

相关 iframe父子页面通信

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

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

相关 html页面跳转传递参数

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

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

相关 javascript 父子iframe相互传参数

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

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

相关 html页面跳转传递参数

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

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

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

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

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

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

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

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

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

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

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