Question

我已经可以使用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');

Answer 1

如果它位于同一个域中，请尝试此操作。如果iframe与您正在查看的窗口的起源不同，则不允许您访问iframe内容。

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

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

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

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

使用纯JavaScript获取Iframe的内容

2 个答案: