iframe页面之间的操作

最新推荐文章于 2024-11-30 09:00:00 发布

原创最新推荐文章于 2024-11-30 09:00:00 发布 · 389 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html

web前端专栏收录该内容

25 篇文章

订阅专栏

本文介绍了一个简单的HTML父子页面交互案例，展示了如何通过JavaScript在父页面修改子页面元素的样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

子页面：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>子页面demo</title>
    <script type="text/javascript">
    window.onload = function(){
        var _iframe = window.parent;
        var _div =_iframe.document.getElementById('parDiv');
        _div.style.color = 'red';
    }
    </script>
</head>
 
<body>
    <div id='objId' style='width:100px;height:100px;background-color:red;'>子页面</div>
</body>
</html>

父页面：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>demo主页面</title>
    <script type="text/javascript">
    window.onload = function(){
        var _iframe = document.getElementById('iframeId').contentWindow;
        var _div =_iframe.document.getElementById('objId');
        _div.style.backgroundColor = '#ccc';
    }
    </script>
</head>
 
<body>
 
<div id='parDiv'>父页面</div>
<iframe src="c.html" id="iframeId" height="150" width="150"></iframe>
</body>
</html>