js iframe

作者：千山暮雪ミ发布日期:2025-05-15 浏览:108

<!DOCTYPE html>
<html>
<head>
    <title>JS iframe 示例</title>
</head>
<body>
    <!-- 创建一个 iframe 元素 -->
    <iframe id="myIframe" src="https://www.example.com" width="600" height="400"></iframe>

    <script>
        // 获取 iframe 元素
        var iframe = document.getElementById('myIframe');

        // 示例：获取 iframe 中的文档对象（仅限同源策略）
        function getIframeDocument() {
            try {
                // 如果 iframe 和父页面同源，可以访问其内容
                var iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
                console.log(iframeDoc);
            } catch (e) {
                console.error("无法访问 iframe 内容，可能由于跨域限制。");
            }
        }

        // 示例：动态设置 iframe 的 src 属性
        function changeIframeSrc(newUrl) {
            iframe.src = newUrl;
        }

        // 示例：监听 iframe 加载完成事件
        iframe.onload = function() {
            console.log("iframe 加载完成");
        };

        // 调用函数测试
        getIframeDocument();
        changeIframeSrc("https://www.another-example.com");
    </script>
</body>
</html>

解释说明：

创建 iframe：通过 <iframe> 标签创建了一个 iframe 元素，并指定了 src、width 和 height 属性。
获取 iframe 文档对象：使用 contentDocument 或 contentWindow.document 获取 iframe 中的文档对象。注意，这受限于浏览器的同源策略。
动态设置 iframe 的 src：通过修改 iframe.src 属性，可以动态改变 iframe 加载的内容。
监听 iframe 加载完成事件：使用 onload 事件监听 iframe 是否加载完成。

如果你有任何问题或需要进一步的解释，请告诉我！

上一篇：js 点击

下一篇：js trigger