如何編寫HTML內容以使用JQuery打開新窗口

Question

點擊運行按鈕打開帶有html，css和javascript代碼編輯器數據的新窗口。 css在新窗口中傳遞但html數據未傳遞，在html中使用可以在javascipt中傳遞的代碼鏡像

運行botton代碼在這里

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

在此按鈕上調用函數“ nwin”

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

nwin函數是

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

html數據代碼鏡像是，

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

在編輯器變量中傳遞值，

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

如何在HTML窗口的函數nwin中設置值編輯器

Answer 1

我認為您需要先從代碼編輯器save到文本區域，然后再獲取值。 在我的例子中

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

將相同的代碼放在代碼段中以供參考，但似乎window.open被阻止了：

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