如何编写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>