iframe父子(详细良心总结)

最新推荐文章于 2024-05-13 13:33:11 发布

只在朝暮间

最新推荐文章于 2024-05-13 13:33:11 发布

阅读量4.8k

点赞数 2

分类专栏： js 文章标签： iframe js

本文链接：https://blog.csdn.net/qq_35792598/article/details/82906390

版权

js 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

父页面获取子iframe

父页面调用子iframe注意点一：如果不加$(function(){})报错：Uncaught ReferenceError: iframe1 is not defined

父页面调用子iframe注意点二：如果不加onload报错：Uncaught TypeError: window.iframe1.helloChina is not a function

父页面iframeFu.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>父页面</title>
		<script src="js/jquery-1.8.2.min.js"></script>
		<script>

			// 父页面调用子iframe注意点一：如果不加$(function(){})报错：Uncaught ReferenceError: iframe1 is not defined
			$(function(){
				// 父页面调用子iframe注意点二：如果不加onload报错：Uncaught TypeError: window.iframe1.helloChina is not a function
				iframe1.onload = function(){
					// 父页面中调用子iframe中定义的变量
					console.log("父页面中调用子iframe中定义的变量："+window.iframe1.ziName);
					// 父页面中调用子iframe中定义的函数
					console.log("父页面中调用子iframe中定义的函数："+window.iframe1.helloChina());
					// 父页面中调用子iframe中定义的DOM
					var $domInput = $(window.iframe1.document.getElementById("test"));
					console.log("父页面中调用子iframe中定义的DOM："+$domInput.val());
				}
			})
			
		</script>
	</head>
	<body>
		<div id="container">
			<iframe src="iframe1.html" border="0" name="iframe1" ></iframe>
		</div>
	</body>
</html>

子页面iframe1.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>子iframe</title>
		<script src="js/jquery-1.8.2.min.js"></script>
		<script>
		
			var ziName = "中国";
			// 注意点：如果不加return,调用方法返回undefined
			function helloChina(){
				return "你好,"+ziName;
			}

		</script>
	</head>
	<body>
		<input type="text" value="新年快乐" id="test" />
	</body>
</html>

控制台打印

父页面中调用子iframe中定义的变量：中国
父页面中调用子iframe中定义的函数：你好,中国
父页面中调用子iframe中定义的DOM：新年快乐

子iframe获取父页面

子iframe调用父页面注意点一：子iframe如果想要获取父页面的变量,不能将父页面变量放入$(function(){}),如果放入,子iframe获取的时候,父页面还没有加载完成,所以获取不到父页面变量,为undefined

子iframe调用父页面注意点二：想要看到子页面获取父页面的变量的效果,不能直接打开子页面的html,还是需要从父页面入口

父页面iframeFu.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>父页面</title>
		<script src="js/jquery-1.8.2.min.js"></script>
		<script>
			// 子iframe调用父页面注意点一：子iframe如果想要获取父页面的变量,不能将父页面变量放入$(function(){}),如果放入,子iframe获取的时候,父页面还没有加载完成,所以获取不到父页面变量,为undefined
			// 子iframe调用父页面注意点二：想要看到子页面获取父页面的变量的效果,不能直接打开子页面的html,还是需要从父页面入口
			var FuName = "世界!";
			function helloWorld(){
				return "你好,"+FuName;
			}
			
			// 父页面调用子iframe注意点一：如果不加$(function(){})报错：Uncaught ReferenceError: iframe1 is not defined
			$(function(){
				// 父页面调用子iframe注意点二：如果不加onload报错：Uncaught TypeError: window.iframe1.helloChina is not a function
				iframe1.onload = function(){
					// 父页面中调用子iframe中定义的变量
					console.log("父页面中调用子iframe中定义的变量："+window.iframe1.ziName);
					// 父页面中调用子iframe中定义的函数
					console.log("父页面中调用子iframe中定义的函数："+window.iframe1.helloChina());
					// 父页面中调用子iframe中定义的DOM
					var $domInput = $(window.iframe1.document.getElementById("test"));
					console.log("父页面中调用子iframe中定义的DOM："+$domInput.val());
				}
			})
		</script>
	</head>
	<body>
		<div id="container">
			<iframe src="iframe1.html" border="0" name="iframe1" ></iframe>
		</div>
	</body>
</html>

子页面iframe1.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>子iframe</title>
		<script src="js/jquery-1.8.2.min.js"></script>
		<script>
			var ziName = "中国";
			// 注意点：如果不加return,调用方法返回undefined
			function helloChina(){
				return "你好,"+ziName;
			}

			// 子iframe中调用父页面中定义的变量
			console.log("子iframe中调用父页面中定义的变量:"+parent.FuName);
			// 子iframe中调用父页面中定义的函数
			console.log("子iframe中调用父页面中定义的函数:"+parent.helloWorld());
			// 子iframe中调用父页面中定义的DOM
			var $container = $(parent.document.getElementById("container"));
			console.log("子iframe中调用父页面中定义的DOM:"+$container.html());
		</script>
	</head>
	<body>
		<input type="text" value="新年快乐" id="test" />
	</body>
</html>

控制台打印

子iframe中调用父页面中定义的变量:世界!
子iframe中调用父页面中定义的函数:你好,世界!
子iframe中调用父页面中定义的DOM:
			<iframe src="iframe1.html" border="0" name="iframe1"></iframe>
父页面中调用子iframe中定义的变量：中国
父页面中调用子iframe中定义的函数：你好,中国
父页面中调用子iframe中定义的DOM：新年快乐

如需转载，请加上原博文链接，只在朝暮间。原创时间：2018年09月30日

只在朝暮间

关注

2
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
iframe父子(详细良心总结)

父页面获取子iframe父页面调用子iframe注意点一：如果不加$(function(){})报错：Uncaught ReferenceError: iframe1 is not defined父页面调用子iframe注意点二：如果不加onload报错：Uncaught TypeError: window.iframe1.helloChina is not a function父页...
复制链接

扫一扫