Uncaught SyntaxError: "" string literal contains an unescaped line break？

Question

我自己写了个在线html,css,js工具：
html结构部分

<div class="html">
<textarea id="html" name="" cols="30" rows="10">
</textarea>
</div>
<div class="css">
<textarea id="css" name="" cols="30" rows="10"></textarea>
</div>
<div class="css">
<textarea id="js" name="" cols="30" rows="10"></textarea>
</div>
<div class="button"><button id="button">显示效果</button></div>
<div class="iframe">
<iframe id="iframe" frameborder="0">
</iframe></div>

css部分

#html{width: 1000px;height: 200px;border:1px solid red;}
#css{width: 1000px;height: 200px;border:1px solid red;}
#js{width: 1000px;height: 200px;border:1px solid red;}
#iframe{width: 1000px;height: 800px;border:1px solid red;}

js部分

<script charset="utf-8" type="text/javascript">
var ele = document.getElementById("button");
ele.addEventListener("click", function(){
    var  obHtml = document.getElementById("html").value;
    var  obCss = document.getElementById("css").value;
    var  obJs = document.getElementById("js").value;
    var  obIframe = document.getElementById("iframe");
    myString = obHtml + '<style type="text/css">' +
               obCss +'</style>' + 
               '<script charset="utf-8" type="text/javascript">' +
               obJs + '</script>';
    console.log(mString);
    obIframe.srcdoc = myString;
})

console.log(mystring);用来测试的，可以不要。
总是报错

Uncaught SyntaxError: '' literal not terminated before end of script
第32行出错

    myString = obHtml + '<style type="text/css">' +
               obCss +'</style>' + 
               '<script charset="utf-8" type="text/javascript">' +
               obJs + '</script>';

哪里有错了？
不要 + '<script charset="utf-8" type="text/javascript">' + obJs + '</script>'; 就可以，原因不知道。

Answer 1

iframe里面的js不能直接拼接，script部分必须新生成，下面的代码测试通过。

var ele = document.getElementById("button");
ele.addEventListener("click", function(){
    var  obHtml = document.getElementById("html").value;
    var  obCss = document.getElementById("css").value;
    var  obJs = document.getElementById("js").value;
    var  obIframe = document.getElementById("iframe");
    mystring = obHtml + '<style type="text/css">' +  obCss +'</style>' ;
    obIframe.srcdoc = mystring;
    var script   = document.createElement("script");
    script.type  = "text/javascript";
    script.text  = obJs;
    obIframe.appendChild(script);    
})

Answer 2

我记得传统的字符串拼接是不能换行的吧
你可以换成es6模板字符串拼接或者这样试试

myString = obHtml + '<style type="text/css">'
myString += obCss +'</style>'
…

Answer 3

<script>
myString = `<script></script>`
</script>

因为myString的</script>和<script>标签被解析成了一对，导致最后那个</script>标签无法闭合。

Answer 4

<script>
  var str = '<script>some text</script>';//浏览器以为这里要关闭script标签
  var str = '<script>some text<\/script>';//替代写法
</script>

在html的<script>标签里编写JS时，如果出现</script>，会让浏览器以为</script>是闭合标签，哪怕你写在字符串的引号里。
为了避免这种情况发生，有两种方法，一是避免</script>整体出现在<script>标签里，例如用<\/script>代替，另一种方法是单独写在另一个JS文件里，通过src来引入外部JS。