利用iframe引用网页后，父页面子页面之间的相互调用

来源：互联网发布：柔道空手道知乎编辑：程序博客网时间：2024/06/06 02:07

大家仔细看一下代码，可以copy下来自己试验一下，建议大家自己试一下，很快就会了。

//父页面内容

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>父级页面</title>    <style>        * {            margin: 0;            padding: 0;        }        div {            margin: 0 auto;            max-width: 800px;            /*height: 500px;*/            background-color: salmon;        }        div span {            font-size: 20px;            color: black;            font-weight: 900;        }    </style></head><body>    <div>        <span id="fufu">这是父页面</span>        <iframe id="zizi" src="zi.html" frameborder="0" scrolling="no"></iframe>    </div>    <script src="jquery-1.11.3.min.js"></script>    <script type="text/javascript">        //父页面调用子页面的元素        $(function(){            $("#zizi").load(function(){                $("#zizi").contents().find("#one").css({backgroundColor:"white",color:"red"});            });        });    </script></body></html>

//子页面

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>子级页面</title>    <style>        * {            margin: 0;            padding: 0;        }        div {            width: 500px;            height: 500px;            /*margin: 50px auto;*/            background-color:rebeccapurple;        }    </style></head><body>    <div id="one">        这是子页面。    </div>    <script src="jquery-1.11.3.min.js"></script>    <script>        //子页面调用父页面的元素        ~function(){            var fufu = window.parent.document.getElementById('fufu');            $(fufu).css({color:'white'});        }()    </script></body></html>

0 0