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

Question

So I have an iframe that's supposed to hold the rendered code from a textarea once a button is pressed, but I'm not sure how to do this in javascript or jquery. 因此，我有一个iframe，一旦按下按钮，该iframe应该保存来自textarea的呈现的代码，但是我不确定如何在javascript或jquery中执行此操作。 I'm aware of how to send a specific site with a URL to display inside a webpage, but for some reason when I try to render the textarea and send it to the iframe, it doesn't work. 我知道如何发送带有URL的特定站点以在网页内显示，但是由于某些原因，当我尝试渲染textarea并将其发送到iframe时，它不起作用。

this is my iframe: 这是我的iframe：

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

this is the function I wrote to send contents from textarea editor (this works just fine with a but not with ): 这是我编写的用于从textarea编辑器发送内容的函数（使用a可以正常使用，但不能使用）：

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

So the editor (codemirror) holds the HTML code which users write, and then it should output in the 'outputIframe' iframe element when users press a button. 因此，编辑器（codemirror）保存用户编写的HTML代码，然后在用户按下按钮时将其输出到'outputIframe'iframe元素中。 This is similar to the "Try it" sections of w3schools. 这类似于w3schools的“尝试”部分。

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/ http://jsfiddle.net/tintucraju/2Lsr9ju9/

Answer 2

Using jquery you can type: 使用jquery，您可以输入：

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

Important to say, this only works if iframe and your parent window are on the same domain, by security reasons. 重要的是，出于安全原因，这仅在iframe和您的父窗口位于同一域中时有效。

Answer 3

This will do the trick - just keep in mind that different browsers will accept different maximum lengths of dataURL. 这将达到目的-请记住，不同的浏览器将接受不同的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

问题描述

3 个解决方案

解决方案1
3 已采纳 2015-02-19 03:47:49

解决方案2
0 2015-02-19 03:53:16

解决方案3
0 2015-02-19 04:27:56

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

问题描述

3 个解决方案

解决方案1 3 已采纳 2015-02-19 03:47:49

解决方案2 0 2015-02-19 03:53:16

解决方案3 0 2015-02-19 04:27:56

解决方案1
3 已采纳 2015-02-19 03:47:49

解决方案2
0 2015-02-19 03:53:16

解决方案3
0 2015-02-19 04:27:56