简体   繁体   English

Javascript appendChild(script) 只工作一次

[英]Javascript appendChild(script) works only one time

I'm trying to create two separate HTML documents: main.html and sufler.html .我正在尝试创建两个单独的 HTML 文档: main.htmlsufler.html Idea is to control sufler.html page from main.html .想法是从main.html控制sufler.html页面。 So far I succeeded to write text and change it's font style.到目前为止,我成功地编写了文本并更改了它的字体样式。 But font style changes only ONE time ...但是字体样式只会改变一次......

I need it to be able to change many times, can't understand what is going on, because, as I understanding, every time I calling function writing() , I'm clearing all new document's content with newDoc.body.innerHTML = '' ... but it seems that not... although text is changing every time.我需要它能够改变很多次,不明白什么下去,因为,因为我了解我打电话的功能,每次writing()我清除所有新文档的内容与newDoc.body.innerHTML = '' ...但似乎不是...虽然文字每次都在变化。

main.html主文件

<html>
<head>
<script type="text/javascript">
var HTMLstringPage1     = '<!DOCTYPE html><html><head><link href="stilius.css" rel="stylesheet" type="text/css" /></head><body>',
    HTMLstringPage2     = '</body></html>',
    HTMLstringDiv1      = '<div id="sufler"><div id="mov"><p id="flip">',
    HTMLstringDiv2      = '</p></div></div>';

//NEW WINDOW OPEN--------------------------------------------------------------------------------------------------------
var newWindow   = window.open('suffler.html','_blank','toolbar=no, scrollbars=no, resizable=no, height=615,width=815'); 
var newDoc      = newWindow.document;
                  newDoc.write(HTMLstringPage1,HTMLstringDiv1+'Text'+HTMLstringDiv2,HTMLstringPage2);
var script      = newDoc.createElement("script");
                  script.type = "text/javascript";
//=======================================================================================================================

//WRITING----------------------------------------------------------------------------------------------------------------
function writing(){
    newText =   document.getElementById("sel-1").value.replace(/\n/gi, "</br>");
    fontas=     document.getElementById("textFont").value;
    size=       document.getElementById("textSyze").value;
    stylas=     document.getElementById("textStyle").value;
    syntax=     document.getElementById("textSyntax").value;

    newDoc.body.innerHTML = '';//clears old text (should clear old scripts and functions too)
    newDoc.write(HTMLstringPage1,HTMLstringDiv1,newText,HTMLstringDiv2,HTMLstringPage2);//writes new text (and new scripts and functions)
    
var text        = newDoc.createTextNode('document.getElementById("flip").style.font="'+stylas+' '+syntax+' '+size+'px '+fontas+'";');
    script.appendChild(text);
    newDoc.getElementsByTagName("body")[0].appendChild(script);
}
//=======================================================================================================================
</script>
</head>
<body>
    <button type="button" style="background-color: #F5FF25;" onclick="writing()">Apply     text</button>
</body>
</html>

Any one node can only be added to the document once.任何一个节点只能添加到文档一次。 You only define script once but trying to add it to the DOM multiple times.您只定义一次script ,但尝试多次将其添加到 DOM。 Put the var script = ... line inside writing() .var script = ...行放在writing()

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM