iframe子页面，父页面相互调用（同域）

最新推荐文章于 2024-04-28 19:21:12 发布

weixin_30363509

最新推荐文章于 2024-04-28 19:21:12 发布

阅读量93

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/moon-future/p/5898529.html

版权

先上代码：

父页面.html

<!DOCTYPE html>
<html>
<head>
    <title>父页面</title>
</head>
<body>
    <div id='parent'></div>
    <iframe id="FrameId" name="frameName" frameborder="0" width="100%" height="100%;" src="../list"></iframe>
</body>
<script type="text/javascript">
    var flag=20;
    //获得子页面id=children的div
    //javascript
    var chiDiv=document.getElementById('FrameId').contentWindow.document.getElementById('children');
    //jquery
    var chiDiv=$('#FrameId').contents().find('#children')

    //获得子页面js中的变量
    var temp=document.frameName.temp;
</script>
</html>

子页面.html

<!DOCTYPE html>
<html>
<head>
    <title>子页面</title>
</head>
<body>
    <div id='children'></div>
</body>
<script type="text/javascript">
    var temp=10;
    //获得父页面id=parent的div
    //javascript
    var parDiv=window.parent.document.getElementById('parent');
    //jquery
    var parDiv=$(window.parent.document).find('#parent');

    //获得父页面js中的变量
    var flag=parent.flag;
</script>
</html>

一、父页面调用子页面

1、先得到子页面的document

document.getElementById('FrameId').contentWindow.document

2、得到子页面的window

document.getElementById('FrameId').contentWindow.window

重载子页面：document.getElementById('FrameId').contentWindow.window.location.reload(true);

或者 $('#FrameId').attr('src','../list');

3、得到子页面的的变量

doucment. iframe的name属性值 . 子页面变量名称（document.frameName.temp）

二、子页面调用父页面

1、父页面document ： window.parent.document

2、获得父页面变量： parent.变量名称

3、调用事件： window.parent.XXX();

转载于:https://www.cnblogs.com/moon-future/p/5898529.html

weixin_30363509

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
iframe子页面，父页面相互调用（同域）

先上代码：父页面.html<!DOCTYPE html><html><head> <title>父页面</title></head><body> <div id='parent'></div> <iframe id="Frame...
复制链接

扫一扫