如何将网页从文本区域发送到 iframe

Question

所以我有一个 iframe，它应该在按下按钮后从文本区域保存呈现的代码，但我不确定如何在 javascript 或 jquery 中执行此操作。我知道如何发送带有 URL 的特定站点以显示在网页内，但出于某种原因，当我尝试呈现文本区域并将其发送到 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 的 "Try it" 部分。

Answer 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/

Answer 2

使用 jquery 你可以输入：

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

重要的是，出于安全原因，这仅在 iframe 和您的父 window 在同一域中时有效。

Answer 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>

如何将网页从文本区域发送到 iframe

How to send a web page from a textarea to iframe

html

javascript

css

iframe

jquery