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

Question

请查看我的代码。

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

            }

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

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

你可以通过以下方式解决这个问题：

1. 将您的JavaScript代码放入.js文件并链接到该文件，或

2. 在字符串的结尾脚本标记中的/之前加上反斜杠：

   $('#contents').html('...<script>...<\/script>...');
   

   \阻止浏览器的解析器查看序列</script>，因此它不会认为脚本在那里结束。但是，在JavaScript字符串中，\/只是/。

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