如何将网页从 textarea 发送到 iframe答案

【问题标题】：How to send a web page from a textarea to iframe如何将网页从 textarea 发送到 iframe
【发布时间】：2015-02-19 03:39:36
【问题描述】：

所以我有一个 iframe，它应该在按下按钮后保存来自 textarea 的渲染代码，但我不确定如何在 javascript 或 jquery 中执行此操作。我知道如何发送带有 URL 的特定网站以显示在网页内，但由于某种原因，当我尝试渲染 textarea 并将其发送到 iframe 时，它不起作用。

这是我的 iframe：

<iframe id="outputIframe"></iframe>

这是我编写的用于从 textarea 编辑器发送内容的函数（这适用于 a 但不适用于）：

function openIframe() {
        var e = document.getElementById('outputIframe');
        var editorHTML = editor.getValue();
        e.document.innerHTML = editorHTML;
    }

所以编辑器（codemirror）保存了用户编写的 HTML 代码，然后当用户按下按钮时，它应该在 'outputIframe' iframe 元素中输出。这类似于 w3schools 的“试用”部分。

【问题讨论】：

标签： javascript jquery html css iframe

【解决方案1】：

    function openIframe() {
            var editorHTML = editor.getValue();
            var iframe = document.getElementById('outputIframe');
            iframe.contentWindow.document.open();
            iframe.contentWindow.document.write(editorHTML);
            iframe.contentWindow.document.close();
        }

http://jsfiddle.net/tintucraju/2Lsr9ju9/

【讨论】：

【解决方案2】：

使用 jquery 你可以输入：

$("iframe").contents().find("body").html(yourHTML);

重要的是，出于安全原因，这仅适用于 iframe 和您的父窗口位于同一域中的情况。

【讨论】：

【解决方案3】：

这可以解决问题 - 请记住，不同的浏览器将接受不同的最大 dataURL 长度。

<!DOCTYPE html>
<html>
<head>
<script>
"use strict";
function byId(e){return document.getElementById(e);}
function allByClass(className){return document.getElementsByClassName(className);}
function newEl(tag){return document.createElement(tag);}
function newTxt(txt){return document.createTextNode(txt);}

function toggleClass(elem, className){elem.classList.toggle(className);}
function toggleClassById(targetElemId, className){byId(targetElemId).classList.toggle(className)}

function hasClass(elem, className){return elem.classList.contains(className);}
function addClass(elem, className){return elem.classList.add(className);}
function removeClass(elem, className){return elem.classList.remove(className);}

function forEachNode(nodeList, func){for (var i=0, n=nodeList.length; i<n; i++) func(nodeList[i], i, nodeList); }

window.addEventListener('load', onDocLoaded, false);

function onDocLoaded()
{
    byId('displayBtn').addEventListener('click', onDisplayBtn, false);
}

function onDisplayBtn()
{
    var rawInput = byId('htmlInput').value;
    var base64Output = "data:text/html;base64," + btoa(rawInput);
    byId('htmlOutput').src = base64Output;
}
</script>
<style>
</style>
</head>
<body>
    <textarea id="htmlInput" style="width: 462px; height: 185px;"></textarea>
    <hr>
    <button id='displayBtn'>Display</button>
    <br>
    <iframe id='htmlOutput' style="width: 462px;"></iframe>
</body>
</html>

【讨论】：