How to get the body's content of an iframe in Javascript?

Picking & choosing elements inside the iframe

You've got access! Now to sift through the goodies. Targeting elements is no different in an iframe:

let iframeDocument = document.getElementById('yourIframeId').contentDocument;
let soloElement = iframeDocument.getElementById('oneRing');  // One Ring to rule them all...
let groupElements = iframeDocument.querySelectorAll('.theySeeMeRollin');  // They hating...


And if you're feeling adventurous, dial up global functions or snoop around the global variables just chilling on the iframe's window:

let iframeWindow = document.getElementById('yourIframeId').contentWindow;
let justHangin = iframeWindow.someGlobalFunction();  // Just a global function, doing global things...


Making friends with various browsers

Each browser has its own party rules. For smooth sailing across the sea of compatibility:

• Use iframe.contentDocument for the cool cats like modern browsers and Firefox.
• Use iframe.contentWindow.document for the old school stud, IE.

Yes, you can keep everyone happy:

let iframe = document.getElementById('yourIframeId');
let iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
let iframeBody = iframeDocument.body.innerHTML;  // Peace treaty signed.


No iframe? No problem

The iframe may wave you a no-show. Your code doesn't need a meltdown. Here's how to navigate those choppy waters:

let iframe = document.getElementById('yourIframeId');
if (iframe) {
    let iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
    if (iframeDocument) {
        let iframeContent = iframeDocument.body.innerHTML;  // I came, I saw, I framed.
        // Further adventures in coding go here...
    }
}


Rocking it with jQuery

Your page or the iframe is besties with jQuery? Well, you're in luck! We're keeping it simple:

let iframeContent = $("#yourIframeId").contents().find("body").html();  // jQuery to the rescue!


Just make sure you're not the guy who decides to skydive before making sure jQuery is on board!

Working around cross-origin policy

The same-origin policy is the big brother watching over the iframe playground. If you're looking to score content from a different domain, the browser shouts "Not today, pal!". Aim to play by the rules, avoid the security errors, and live to code another day!

Toying with security risks for fun, not profit

Pondering on playing fast and loose with the iframe content? Beware of potential cross-origin security quagmires. No one wants to fall into a security black hole. Ensure you understand the depths before diving!