如何编写HTML内容以使用JQuery打开新窗口

Question

on click run button open new window with data of html, css and javascript code editor. css is pass in new window but html data not, in html using code mirror that can pass in javascipt

run botton code is here

<div style="float:left; width:100%; height:93px;">
    <span class="containerTitle" style="top:65px;">
        <a href="javascript:;" class="button_example" id="result" style="color: white;">Result</a>
    </span>
</div>

on this button call function "nwin"

$("a#result").click(nWin);

nwin function is,

<script>
    function nWin() {
        var w = window.open();
        $(w.document.body).html("<style>" + $('#css').val() + "</style>"+ $('#html').val() );
    }
</script>

html data codemirror is,

<div class="codecontainer" id="htmlContainer" style="max-width:40%;">
    <span class="containerTitle">HTML</span>
    <textarea class="code" id="html" style="display: none;"></textarea>     
</div>

that pass value in editor variable,

<script>
    var editor = CodeMirror.fromTextArea(document.getElementById("html"), {
        lineNumbers: true,
        mode: "text/html",
        matchBrackets: true
    });
</script>

how to set the value editor in function nwin in html window

Answer 1

I think you need to save from the code editor to the text area before getting the value. It is working in my example

http://jsfiddle.net/em1uz745/2/

Put the same code in a snippet for reference, but it appears that the window.open is blocked:

 $("a#result").click(nWin); var cssEditor = CodeMirror.fromTextArea(document.getElementById("css"), { lineNumbers: true, mode: "text/css", matchBrackets: true }); var htmlEditor = CodeMirror.fromTextArea(document.getElementById("html"), { lineNumbers: true, mode: "text/html", matchBrackets: true }); function nWin() { // Commit the code to the textarea so that it can be extracted using value cssEditor.save(); htmlEditor.save(); var w = window.open(); $(w.document.head).append("<style>" + $('#css').val() + "</style>"); $(w.document.body).html($('#html').val() ); } 

 body { font-family: sans-serif; font-size: 14px; } .button_example { display: inline-block; background: #ccc; border-radius: 3px; border: 1px solid #333; color: #333; padding: 10px 20px; text-decoration: none; } .button_example:hover { background: #aaa; } .codecontainer { width: 50%; float: left; } .clearfix { clear: both; } } 

 <link href="http://codemirror.net/lib/codemirror.css" rel="stylesheet"/> <script src="http://codemirror.net/lib/codemirror.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="button_wrap"> <span class="containerTitle"> <a href="javascript:;" class="button_example" id="result">Result</a> </span> </div> <div class="codecontainer" id="cssContainer"> <span class="containerTitle">CSS</span> <textarea class="code" id="css"></textarea> </div> <div class="codecontainer" id="htmlContainer"> <span class="containerTitle">HTML</span> <textarea class="code" id="html"></textarea> </div> <div class="clearfix"></div>