SyntaxError：未终止的字符串文字 <script>...</script> 标记在字符串变量中不起作用答案

【问题标题】：SyntaxError: unterminated string literal <script>...</script> tag not working within a string variableSyntaxError：未终止的字符串文字 <script>...</script> 标记在字符串变量中不起作用
【发布时间】：2015-07-25 16:54:38
【问题描述】：

请看我的代码。

var id = 1;
var htmlText = '<div id="horizontalUserPopup"><ul id="tabs1" class="rtabs"></ul><div class="panel-container"><div id="view1"><script>viewMiniProfile("'+id+'",this);</script></div><div id="view2"></div><div id="view3" style="display:none;">Blah Blah Blah</div><div id="view4" style="display:none;">444444</div></div></div>';
$('#contents').html(htmlText);

上面的代码我收到以下错误 -

如果我删除 </script> 它工作正常。请检查并告诉我。

编辑：

完整代码 -

function modelInfo(id, username) {
                var pageUrl = $('#pageurl').val();
                $('#model-popup-box1 h3').addClass('newsfeed');
                var content_area = $('#model-popup-content1');
                content_area.html('Please wait...');
                $('#model-popup-box-title1').html('About ' + username);
                $('#model-popup-body1').show();

                content_area.html('<div id="horizontalUserPopup"><ul id="tabs1" class="rtabs"></ul><div class="panel-container"><div id="view1"><script>viewMiniProfile("'+id+'",this);</script></div><div id="view2"></div><div id="view3" style="display:none;">Blah Blah Blah</div><div id="view4" style="display:none;">444444</div></div></div>');

                var innerHtml = "<li><a href=\"#view1\" id='miniprofile-view1' onclick=\"viewMiniProfile('"+id+"',this)\">Mini-Profile</a></li>" +
                        "<li><a href=\"#view2\">Tokens</a></li>" +
                        "<li><a href=\"#view3\">Notes</a></li><li><a href=\"#view4\">PM Logs</a></li>";

                var ul = document.getElementById("tabs1");
                ul.innerHTML = innerHtml;


                $('#horizontalUserPopup').responsiveTabs({
                    rotate: false,
                    startCollapsed: 'accordion',
                    collapsible: 'accordion',
                    setHash: true,
                    disabled: [4, 5]
                });

            }

【问题讨论】：

你能贴出完整的代码吗？
现在检查我更新的代码。 :)

标签： javascript jquery

【解决方案1】：

我将假设您引用的代码位于 script 标记中，如下所示：

<script>
// ...stuff here...
$('#contents').html('<div id="horizontalUserPopup"><ul id="tabs1" class="rtabs"></ul><div class="panel-container"><div id="view1"><script>viewMiniProfile("'+id+'",this);</script></div><div id="view2"></div><div id="view3" style="display:none;">Blah Blah Blah</div><div id="view4" style="display:none;">444444</div></div></div>');
// ...stuff here...
</script>

如果是这样，问题是外部script 标记在您的字符串中间终止，因为浏览器中的HTML 解析器不解释JavaScript 代码，它只是扫描它以寻找</script> 到找出标签的结束位置。所以交给 JavaScript 解析器的代码是

$('#contents').html('<div id="horizontalUserPopup"><ul id="tabs1" class="rtabs"></ul><div class="panel-container"><div id="view1"><script>viewMiniProfile("'+id+'",this);

...确实有一个未终止的字符串文字。

您可以通过以下方式解决此问题：

将您的 JavaScript 代码放入 .js 文件并链接到该文件，或者
在字符串的结束脚本标记中的 / 之前放置一个反斜杠：
```
$('#contents').html('...<script>...<\/script>...');
```
\ 阻止浏览器的解析器看到序列</script>，因此它认为脚本不会在那里结束。然而，在 JavaScript 字符串中，\/ 只是 /。

【讨论】：

感谢您的回答。我弄错了。

【解决方案2】：

您需要使用\ 对其进行转义，否则它将成为 HTML 的一部分。

var htmlText = '<div id="horizontalUserPopup"><ul id="tabs1" class="rtabs"></ul><div class="panel-container"><div id="view1"><script>viewMiniProfile("'+id+'",this);<\/script></div><div id="view2"></div><div id="view3" style="display:none;">Blah Blah Blah</div><div id="view4" style="display:none;">444444</div></div></div>';
$('#contents').html(htmlText);

【讨论】：