how to get iframe dom in js All In One


// iframe.contentDocument == iframe.contentWindow.document
document.getElementById('myframe').contentWindow.document;

function GetDoc(x) {
    return x.contentDocument || x.contentWindow.document;
}

`contentDocument`

// const iframeDocument = document.getElementsByTagName("iframe")[0].contentDocument;

const iframeDocument = document.querySelector("#iframe").contentDocument;

iframeDocument.body.style.backgroundColor = "blue";

Same Origin

https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy

https://developer.mozilla.org/en-US/docs/Web/API/HTMLIFrameElement/contentDocument

`contentWindow`

// const iframeWindow = document.getElementsByTagName("iframe")[0].contentWindow;

const iframeWindow = document.querySelector("#iframe").contentWindow;

iframeWindow.document.body.style.backgroundColor = "blue";

https://developer.mozilla.org/en-US/docs/Web/API/HTMLIFrameElement/contentWindow

demos

CORS ⚠️

https://cdn.xgqfrms.xyz/iframe/same-origin-iframe.html ✅

https://cdn.xgqfrms.xyz/iframe/iframe-single-testing.html ❌

const iframeDocument = document.querySelector("#sina").contentDocument;
iframeDocument.body.style.backgroundColor = "blue";
// 'blue'

const iframeWindow = document.querySelector("#sina").contentWindow;
iframeWindow.document.body.style.backgroundColor = "red";
//

https://codepen.io/webgeeker/pen/KJppBr


<!DOCTYPE html>
<html lang="zh-Hans">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="author" content="xgqfrms">
    <meta name="generator" content="VS code">
    <title>iframe single testing</title>
</head>
<body>
    <section>
        <h1>iframe single testing</h1>
        <iframe
            src ="https://www.sina.com.cn/"
            target="_self"
            style="border: 1px solid red;"
            height="500"
            width="600">
            <p>Your browser does not support iframes.</p>
        </iframe>
        <script>
            // iframe onload
            const getAllIframes = () => {
                let iframes = [...document.querySelectorAll(`iframe`)];
                console.log(`iframes.length =`, iframes.length);
                iframes.forEach(
                    (iframe, i) => {
                        if(i < 10) {
                            console.log(`iframe =`, iframe);
                        }
                        // iframe.contentDocument || iframe.contentWindow.document
                        if (iframe.contentDocument) {
                            // old IE
                            console.log(`iframe.contentDocument =`, iframe.contentDocument);
                            // get all links
                        }
                        if (iframe.contentWindow.document) {
                            // new Chrome
                            console.log(`iframe.contentWindow.document =`, iframe.contentWindow.document);
                            // get all links
                        }
                    }
                );
            };
            const removeAllIframesBlankLinks = () => {
                // iframe & virtualDOM bug
                let links = [...document.querySelectorAll(`a`)];
                console.log(`links.length =`, links.length);
                links.forEach(
                    (link, i) => {
                        if(i < 10) {
                            console.log(`link =`, link);
                        }
                        if (link.target) {
                            console.log(`link.target =`, link.target);
                            link.target = "_self";
                        }
                    }
                );
            };
            setTimeout(() => {
                getAllIframes();
            }, 10000);
            setTimeout(() => {
                removeAllIframesBlankLinks();
            }, 10000);
        </script>
    </section>
</body>
</html>