how to write html Content To open New Window with 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

@Barmar That is incorrect, style elements can be placed everywhere. But yes they "should" be placed in the head element. — Stijn Bernards, Sep 11 '15 at 12:54
@StijnBernards http://stackoverflow.com/questions/2830296/using-style-tags-in-the-body-with-other-html — Barmar, Sep 11 '15 at 12:55

score 0 · Answer 1 · answered Sep 11 '15 at 13:21

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>

please see the JSfiddle I linked or the snippet in my answer. — allicarn, Sep 14 '15 at 17:29
ya it i can also javascript editor like html and css
HTML

Javascript — Devangna Savalia, Sep 22 '15 at 08:55

how to write html Content To open New Window with JQuery

1 Answers1