修改页面内引入的iframe页面内部元素的样式

于2023-03-15 10:58:24发布

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p class="name">name</p>
</body>
</html>

在demo.html中，以iframe的形式引入index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <iframe src="http://192.168.13.244/index.html" width="100%" height="500px" frameborder="0"></iframe>
    <script>
        document.querySelector('iframe').onload = function () {
            this.contentWindow//获取到iframe的window
                .document//获取到iframe的document
                .querySelector('.name')//正常获取元素
                .style.color = "orange";//修改样式
        };
    </script>
</body>
</html>

iframe加载完毕后,使用DOM元素的contentWindow属性获取到iframe标签的window;然后再使用window的document属性获取到iframe的document;之后就可以正常获取元素了

需要注意以下几点

1. 使用onload事件监测iframe的加载

2. onload事件需要在服务器环境下打开页面

3. 上面的方法不支持跨域，如果需要跨域，请用postMessage方法