Load website in first Iframe and its front end code in second Iframe

Question

Just for the sake of learning Im asking this question. I'm using 2 iframes lets suppose I load a random website in Iframe1 Is it possible that its front end code is displayed in the 2nd Iframe dynamically/automatically. Im talking about the code you see once you press CTRL+U on any webpage. Please help

Answer 1

Loading any sites to iFrame

You can do it but not for all sites, cause some sites like google and stackoverflow blocks their loading to frames.

Getting any site content

You can`t do it, you can do it only if you iframe domain are the same as your site domain (Here is the description of policy same origin policy).

But

You can do some hacks, here is solutions

Also here is fiddle that illustrate same origin policy exception. Use console to see it. fiddle

Fiddle code

<iframe name="site_frame" id="site_frame" src="http://iherb.com">
</iframe>

<iframe id="code_frame">
    <textarea id="code"></textarea>
</iframe>

document.getElementById('site_frame').onload = function () {    
    console.log("Frame loaded!");
    var siteFrameDoc = getIFrameDocument(document.getElementById('site_frame')),        
        siteFrameHtml = siteFrameDoc.getElementByTagName('html'); 
        wrapper = document.createElement('div');
    wrapper.appendChild(siteFrameHtml.cloneNode(true));


    var codeFrameDoc = getIFrameDocument(document.getElementById('code_frame'));
    var textarea = codeFrameDoc.getElementById("code");
    console.log(textarea);

    textarea.value = wrapper.innerHtml; 
};

function getIFrameDocument(iframe) {      
    return iframe.contentDocument || iframe.contentWindow.document;     
}