原生js实现获取iframe标签中的document

最新推荐文章于 2024-08-05 08:07:30 发布

期华_

最新推荐文章于 2024-08-05 08:07:30 发布

阅读量3.7k

点赞数 1

分类专栏：前端相关

本文链接：https://blog.csdn.net/qq_43332570/article/details/107118579

版权

前端相关专栏收录该内容

6 篇文章 0 订阅

订阅专栏

需求：在父容器中获取页面中iframe标签中的div元素并改变样式
效果图如下：
在这里插入图片描述

实现代码

其实实现起来也特别的简单
需要注意的是：
等页面加载完成在去找iframe中的元素才能找到，完整代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        外面的div
    </div>
    <div>
        <iframe src="./iframe.html">
        </iframe>
    </div>
    <script>
        window.onload = function(){
            let ifr = document.querySelector("iframe");
            // ifr.contentDocument 获取的是iframe中的document
            ifr.contentDocument.querySelector('div').setAttribute('style','color: red;');
        }
        
    </script>
</body>
</html>

iframe.html如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        iframe中的div
        <p> iframe中的p</p>
        <p> iframe中的p</p>
    </div>
</body>
</html>