Question

点击运行按钮打开新窗口，其中包含html，css和javascript代码编辑器的数据。 css是在新窗口中传递但html数据没有，在html中使用代码镜像可以传入javascipt

运行botton代码在这里

C:\Users\[Your username]\AppData\Roaming\Microsoft\Windows\Start Menu\[Program folder]\[Shortcut name]

关于此按钮调用功能＆＃34; nwin＆＃34;

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

html data codemirror是，

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

在编辑器变量中传递值

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

如何在html窗口中的函数nwin中设置值编辑器

Answer 1

我认为在获取值之前，您需要save从代码编辑器到文本区域。它在我的例子中工作

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

将相同的代码放在代码段中以供参考，但window.open似乎已被屏蔽：

＆＃13;

$("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() );
}

＆＃13;

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

＆＃13;

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

＆＃13;

如何编写html内容用JQuery打开新窗口

1 个答案: