HTML iframe, 获取iframe子页面中的元素(基于JavaScript)

最新推荐文章于 2024-09-11 21:57:53 发布

houyanhua1

最新推荐文章于 2024-09-11 21:57:53 发布

阅读量2.3w

点赞数 2

分类专栏： HTML JavaScript 文章标签： html javascript iframe

本文链接：https://blog.csdn.net/houyanhua1/article/details/79702337

版权

JavaScript 同时被 2 个专栏收录

140 篇文章 4 订阅

订阅专栏

HTML

21 篇文章 3 订阅

订阅专栏

demo.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>

        body,html {
            margin: 0px;
            padding: 0px;
            width: 100%;
            height: 100%;
        }

        iframe {
            width: 100%;
            height: 100%;
        }

    </style>

    <script>
        window.onload = function() {
            var iframe = document.getElementsByTagName("iframe")[0];
            var win = iframe.contentWindow;  // 通过contentWindow获取ifame子页面的window窗体对象。(不允许跨域名访问)
            console.log(win);
            var iframeDocument = iframe.contentWindow.document;
            var input1 = iframeDocument.getElementById("id1");
            input1.onblur = function() {
                alert(11);
            }
        }
    </script>

</head>
<body>
    <iframe src="aa.html" frameborder="0"></iframe>
</body>
</html>