zoukankan      html  css  js  c++  java
  • iframe父子组件传值

    父组件:index.html

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    	</head>
    	<body>
    		<iframe src="iframe.html" width="200" height="200" id="iframe_demo"></iframe>
    		<input type="button" name="" id="" value="父向子传值" onClick="sendBtn()" />
    	</body>
    	<script type="text/javascript">
    		// 父接受子的值
    		/**
    		 * 跨源通信-接收方
    		 * @param {event}  = [value] 
    		 * @param {function}  = [value] 
    		 * @param {useCapture}  布尔可选 指定事件是否在捕获或冒泡阶段执行。
    		 */
    		window.addEventListener("message", function(data) {
    			console.log('父收到的数据:', data.data);
    		}, false);
    		
    		// 父向子传值
    		function sendBtn() {
    			let iframe = document.getElementById('iframe_demo');
    			let json = {
    				name:'你好我是父'
    			};
    			iframe.contentWindow.postMessage(json, '*');
    		}
    	</script>
    </html>
    

      子组件:iframe.html

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    	</head>
    	<body>
    		<input type="button" name="" id="" value="子向父传值"  onClick="sendBtn()"/>
    	</body>
    	<script type="text/javascript">
    	function sendBtn(){
    		// 子向父传值
    		/**
    		 * 跨源通信-发送方
    		 * @param {massage}  = [value] 
    		 * @param {targetOrigin}  = [value] 
    		 */
    		let json = {
    			name:'你好我是子'
    		};
    		window.parent.postMessage(json, '*');
    	}
    	// 子接收父的值
    	window.addEventListener("message", function(data) {
    		console.log('子收到的数据:', data.data);
    	}, false);
    	
    		
    	</script>
    </html>
    

      

  • 相关阅读:
    SGU 176.Flow construction (有上下界的最大流)
    POJ 2391.Ombrophobic Bovines (最大流)
    poj 1087.A Plug for UNIX (最大流)
    poj 1273.PIG (最大流)
    POJ 2112.Optimal Milking (最大流)
    SGU 196.Matrix Multiplication
    SGU 195. New Year Bonus Grant
    关于multicycle path
    ppt做gif动图
    codeforces 598A Tricky Sum
  • 原文地址:https://www.cnblogs.com/wangyunhui/p/15044188.html
Copyright © 2011-2022 走看看