您的位置：首页 > Web前端 > JavaScript

javascript 父子iframe相互传参数

2017-07-03 08:51 656 查看

前端开发的过程中。可能用iframe去嵌套html页面。

当我们在父iframe中传递参数去给子iframe的时候。

我们可以通过将参数对象设置成子类iframe的window对象的成员变量。

<iframe id="childFrame" src="iframeChild.html">

</iframe>

<script type="text/javascript">
var childFrameObj = document.getElementById('childFrame');

childFrameObj.contentWindow.paramFromParent = 'userId0007';
</script>

子iframe可以通过访问window对象的成员变量来得到从父iframe中传递来的参数。

var param = window.paramFromParent;
var inputObject =  document.getElementsByTagName('input')[0];
inputObject.value = param;

父类iframe全部代码

iframeParent.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<iframe id="childFrame" src="iframeChild.html">

</iframe>

<script type="text/javascript">
var childFrameObj = document.getElementById('childFrame');

childFrameObj.contentWindow.paramFromParent = 'userId0007';
</script>

</body>
</html>

子iframe的全部代码是

iframeChild.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>

<body>
<input type="text" value="" >
</body>

<script type="text/javascript">var param = window.paramFromParent;
var inputObject =  document.getElementsByTagName('input')[0];
inputObject.value = param;
</script>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： javascript iframe 参数传递

相关文章推荐

新的分享

章节导航