All geek questions in one place

Open a new browser window / iframe and create a new document from HTML in TEXTAREA?

I am trying to write a web application using the new standalone features of HTML5. In this application, I would like to be able to edit some HTML-complete document, rather than a fragment in <textarea>, click a button, and then fill out a new browser window (or <iframe>, didn’t decide) with the HTML found in <textarea>. New content is not saved anywhere except for the local client, so setting the source in the call window.openor attribute srcto <iframe>will not work.

I found the following question in StackOverflow: “ Entering HTML from the current page into a new window ”, which helped me become part of this path. This method seems to work well with fragments, but I was not able to get a completely new HTML document. The strange thing is, when I look at the DOM in Firebug, I see new HTML that just doesn't display.

Can I create a generated HTML document in a new window or <iframe>?

EDIT . Here's a “working” example of how I'm trying to accomplish this:

<!doctype html>
<html>
<head>
<title>Test new DOM</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
    function runonload() {
        return $("#newcode")[0].value;
    }
    $(function() {
        $("#runit").click(function() {
            w=window.open("");
            $(w.document).ready(function() {
                $(w.document).html(w.opener.runonload());
            });
        });
    });
</script>
</head>
<body>
<textarea id="newcode">
&lt;!doctype html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;New Page Test&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;h1&gt;Testing 1 2 3&lt;/h1&gt;
&lt;/body&gt;
&lt;/html&gt;
</textarea>
<br/>
<button id="runit">Run it!</button>
</body>
</html>
+3
source share
2 answers
$(w.document).html(w.opener.runonload());

You cannot set innerHTML-or, therefore jQuery html()is for the Document object itself.

, , html(), ( <div>) . doctype /, <html>/<body>/etc a <div> , , Document, WRONG_DOCUMENT_ERR DOMException. ( , .)

, - :

w= window.open('', '_blank');
w.document.write($('#newcode').val());
w.document.close();

innerHTML document.documentElement, , <!DOCTYPE>, , Quirks.

+4

, ...

:

<SCRIPT LANGUAGE="JavaScript">
function displayHTML(form) {
var inf = form.htmlArea.value;
win = window.open(", ", 'popup', 'toolbar = no, status = no'); win.document.write("" + inf + ""); } // </script>
<form>
<textarea name="htmlArea" cols=60 rows=12> </textarea> <br> <input type="button" value=" Preview HTML (New Window)" onclick="displayHTML(this.form)"> </form>
+5

Source: https://habr.com/ru/post/1763612/

More articles:


All Articles