Question

只是为了学习我问这个问题。我正在使用2个iframe 假设我在Iframe1中加载一个随机网站是否有可能动态/自动地在第二个iframe中显示其前端代码。我在谈论你在任何网页上按CTRL + U后看到的代码。请帮忙

Answer 1

将所有网站加载到iFrame

你可以这样做，但不适用于所有网站，导致google和stackoverflow等网站阻止加载到框架。

获取任何网站内容

您无法执行此操作，只有当iframe域与您的网站域相同时才能执行此操作（以下是政策same origin policy的说明）。

但是

你可以做一些黑客攻击，这是 solutions

此处还有小提琴，说明了相同的原始政策例外。使用控制台查看它。 fiddle

小提琴代码

<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;     
}

在第一个iframe中加载网站，在第二个iframe中加载其前端代码

1 个答案: