1、父窗体代码：

<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <style type="text/css">
        body{
            background-color: powderblue;
        }
    </style>
    <script type="text/javascript">
        function ff()
        {
            window.frames["c1"].document.getElementById("cinfo").innerText = "被改变过的iframe";
        }
    </script>

</head>
<body>

    <p id="pinfo">顶级窗体top</p>
    <button onclick="ff();">改变iframe内的元素</button>
    <iframe src="second.html" width="100%" height="500" name="c1">
        您的浏览器不支持iframe，请升级
    </iframe>
</body>

 

2、iframe内的代码

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <style type="text/css">
        body{
            background-color: burlywood;
        }
    </style>
    <script type="text/javascript">
        function ff()
        {
            parent.document.getElementById("pinfo").innerText = "被改变过的顶级窗体top";
        }
    </script>
</head>
<body>
    <p id="cinfo">iframe</p>
    <button onclick="ff();">改变父窗体内的元素</button>
</body>
</html>