使用纯 JavaScript 获取 iframe 的内容答案

【问题标题】：Getting Contents of Iframe with Pure JavaScript使用纯 JavaScript 获取 iframe 的内容
【发布时间】：2013-05-26 01:13:44
【问题描述】：

我已经可以使用 jQuery 获取 iframe 的内容，但我想学习如何使用纯 JavaScript 获取它。

这是我目前所拥有的。

 var frame = document.getElementById('awc_frame');
 var easyBB = frame.contentWindow.document.body.innerHTML;
 easyBB.getElementById('chatbox-title').innerText="Chatbox";

我做错了什么，请帮忙。原来框架没有ID，我已经试过了

var frame = document.frames['awc_frame'];

跨浏览器效率高吗？然后我如何获得 contentWindow？只是一些解释，所以我可以用 JavaScript 而不是 jQuery 来做到这一点。 jQuery版本是这个

var frame = $('#avacweb_chat iframe');
var easyBB = $('#chatbox-title',frame.contents()).text('Chatbox');

【问题讨论】：

How to get the body's content of an iframe in Javascript? 的可能重复项
抱歉，无意冒犯。是否有社区共识（例如元问题）表示标记为旧问题的重复是不好的？你同意他们是同一个问题吗？如果不是，你能解释一下为什么吗？我可能判断错了。
嗯，不同。对不起，我的粗鲁只是被激怒了。与我显示我的代码不同，jquery 和 vanilla 并且该问题显示 OP 中没有代码

标签： javascript iframe

【解决方案1】：

如果它在同一个域上，试试这个。如果 iframe 的来源与您正在查看的窗口不同，它不会让您访问 iframe 内容。

var iframe = document.getElementById("awc_frame");
var iframe_contents = iframe.contentDocument.body.innerHTML;

使用 jsfiddle iframe 查看同一域上的页面的工作示例：

http://jsfiddle.net/tqAL3/1/

【讨论】：

指定于：w3.org/TR/html5/…
如果我想要 HEAD 怎么办？我必须做 contentDocument.head.innerHTML 并连接到正文还是有更快的方法
没关系-> iframe.document.getElementsByTagName('html')[0].innerHTML

【解决方案2】：

与 Nile 相同的答案，但作为更类似于 querySelector 的函数

// iframe-query-selectors.js v1
function iframeQuerySelector(iframe, selector, all){
    if( iframe && (iframe.nodeName || iframe.tagName) === 'IFRAME' && iframe.nodeType === 1){
        all = all ? 'All' : '';
        if(selector){
            return iframe.contentDocument['querySelector' + all](selector);
        };
        return iframe.contentDocument;
    };
    throw new Error('The element must be an iframe.');
};
function iframeQuerySelectorAll(iframe, selector){
    return iframeQuerySelector(iframe, selector, true);
};

【讨论】：