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字符串,但是,\/仅仅是/.