Question

所有textarea和iframe元素都有一个数据属性（数据组），用于将所有textarea内容组合成具有相同数据属性值的iframe。

我也给textarea元素一个类值为＃34; html＆＃34;或＆＃34; css＆＃34;取决于它的内容，这允许我通过JavaScript迭代它们。

一切正常，但我不确定我是否正确地将内容注入iframe。

当我在注入内容后检查iframe时，CSS（令人惊讶地）被添加到文档的HEAD中，这就是我想要的;但是，考虑到我没有直接定位iframe文档的HEAD，这肯定是错误的，例如：

iframe.document.getHeadOfIframeDocument.innerHTML = css;

无论如何，这是我现在提出的：

CSS

<textarea class="code_block css" data-group="1" readonly cols="48" rows="16">
p { color: red; }
</textarea>

HTML

<textarea class="code_block html" data-group="1" readonly cols="48" rows="16">
<p>Test 1</p>
</textarea>

<textarea class="code_block html" data-group="1" readonly cols="48" rows="16">
<p>Test 2</p>
</textarea>

<div class="result">
<iframe data-group="1" width="400" height="400"></iframe>
</div><!-- END .result -->

JS

window.onload = function() {
    var res = document.getElementsByClassName('result'),
    src_html = document.getElementsByClassName('html'),
    src_css = document.getElementsByClassName('css'),
    n_res = res.length,
    n_html = src_html.length,
    n_css = src_css.length,
    i,n,j;

    for (i = 0; i < n_res; i++) { // For every result on page
        // Group sources with result
        var group = res[i].getElementsByTagName('iframe')[0].getAttribute('data-group'),
        css = '',
        html = '';

        // CSS
        for (n = 0; n < n_css; n++) {
            if (src_css[n].getAttribute('data-group') == group) {
                css += src_css[n].value;
            }
        }

        // HTML
        for (j = 0; j < n_html; j++) {
            if (src_html[j].getAttribute('data-group') == group) {
                html += src_html[j].value;
            }
        }

        var iframe = res[i].getElementsByTagName('iframe')[0],
        iframe = iframe.contentWindow || iframe.contentDocument.document || iframe.contentDocument,
        content = '';

        if (css.length > 0) {
            content += '<style type="text/css">' + css + '</style>';
        }
        if (html.length > 0) {
            content += html;
        }

        iframe.document.open()
        if (content.length > 0) {
            iframe.document.write(content);
        } else {
            iframe.document.write('<p>No content found.</p>');
        }   
        iframe.document.close();
    }
};

修改我和JS一起玩，这看起来效果很好;仍然好奇你的建议：

window.onload = function() {
    var res = document.getElementsByClassName('result'),src_html = document.getElementsByClassName('html'),src_css = document.getElementsByClassName('css'),
    n_res = res.length,n_html = src_html.length,n_css = src_css.length,i,n,j,group,css,html,iframe,doctype,head,body,charset,title,style;

    for (i = 0; i < n_res; ++i) { // For every result on page
        // Group sources with result
        group = res[i].getElementsByTagName('iframe')[0].getAttribute('data-group');
        css = '';
        html = '';

        // CSS
        for (n = 0; n < n_css; ++n) {
            if (src_css[n].getAttribute('data-group') === group) {
                css += src_css[n].value;
            }
        }

        // HTML
        for (j = 0; j < n_html; ++j) {
            if (src_html[j].getAttribute('data-group') === group) {
                html += src_html[j].value;
            }
        }

        iframe = res[i].getElementsByTagName('iframe')[0];
        iframe = iframe.contentWindow || iframe.contentDocument.document || iframe.contentDocument;
        if (iframe) {
            doctype = document.implementation.createDocumentType('html','','');
            head = document.getElementsByTagName('head')[0];
            body = document.getElementsByTagName('body')[0];
            charset = document.createElement('meta');
            title = document.createElement('title');

            iframe.document.insertBefore(doctype,iframe.document.childNodes[0]);

            iframe.document.getElementsByTagName('html')[0].setAttribute('lang','en');
            charset.setAttribute('charset','UTF-8');
            iframe.document.head.appendChild(charset);
            title.appendChild(document.createTextNode('Snippet'));
            iframe.document.head.appendChild(title);

            if (css) {
                style = document.createElement('style');
                style.type = 'text/css';
                style.appendChild(document.createTextNode(css));
                iframe.document.getElementsByTagName('head')[0].appendChild(style);
            }
            if (html) {
                iframe.document.getElementsByTagName('html')[0].innerHTML += html;
            }
            if (!css && !html) {
                iframe.document.getElementsByTagName('html')[0].innerHTML = '<p>No content.</p>';
            }
        }
    }
};

将HTML / CSS注入Iframe（无jQuery）

0 个答案: