CODEWITHSUNDEEP
javascriptjqueryhtmlcssiframe
VagrantC
VagrantC

Reputation: 817

How to send a web page from a textarea to iframe

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

this is my 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 ):

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. This is similar to the "Try it" sections of w3schools.

Upvotes: 0

Views: 1718

Answers (3)

enhzflep
enhzflep

Reputation: 13089

This will do the trick - just keep in mind that different browsers will accept different maximum lengths of 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>

Upvotes: 0

Tintu C Raju
Tintu C Raju

Reputation: 2700

    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/

Upvotes: 4

Willian Andrade
Willian Andrade

Reputation: 332

Using jquery you can type:

$("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.

Upvotes: 0

Related Questions