我正在创建一个个人网站，并决定添加一个“技能div”，其中div的内容根据选择的选项卡而变化。要做到这一点，我创建了一个函数，将div的innerHTML更改为包含所有<p>，<img>和<scripts>的字符串。这适用于段落和图像，但是当我在脚本中运行该函数时，它会给我一个错误
这里是改变innerHTML的代码（仅包括因为它只是一个带有html元素和标签的大字符串）：
var tabContents = ['', '<img src="Skills/3DModelling/Night_Swarz.png" alt="ModelImage1.png" style="position: absolute; top: 10px; left: 10px; height: 200px;">' +
'<img src="Skills/3DModelling/Night_Swarz_AllClothes.png" alt="ModelImage2.png" style="position: absolute; bottom: 10px; left: 10px; height: 200px;">' +
'<p style="position: absolute; top: calc(50% - 50px); left: 0px; width: 170px; text-align: center; font-size: 180%;">Character 1</p>' +
'<img src="Skills/3DModelling/Samurai_Render.png" alt="ModelImage3.png" style="position: absolute; top: 10px; right: 30px; height: 200px;">' +
'<img src="Skills/3DModelling/Samurai_Posed.png" alt="ModelImage4.png" style="position: absolute; bottom: 10px; right: 10px; height: 200px;">' +
'<p style="position: absolute; top: calc(50% - 50px); right: 0px; width: 170px; text-align: center; font-size: 180%;">Character 2</p>' +
'<p style="position: absolute; top: 0px; left: 175px; height: calc(100% - 20px); width: calc(100% - 330px); text-align: center;"> I have been 3D modelling since January of 2014. I have been doing so as a recreational activity in order to provide myself with objects to move around in a gaming environment. I enjoy the coding challanges I face more so than 3D modelling, however through developing my skills I have acquired a talent and satasfaction through the models I have created. I started with very basic designs and now I am confident in my abilities to create models based on 2D sketches, texture and paint the models as well as pose and render them to create images. The tools I have always used are the <i>Blender</i> 3D Modelling program. This is a free program that is mainly used in low budget game making.</p>' +
'<p style="position: absolute; top: 220px; left: 175px; height: calc(100% - 20px); width: calc(100% - 330px); text-align: center; font-size: 200%;">Some More Models</p>' +
'<img id="ChangingImage" style="position: absolute; top: 300px; left: calc(50%); height: 200px;">' +
'<img src="Images/LeftArrow.png" style="position: absolute; top: 350px; left: calc(50% - 200px); height: 50px; cursor: pointer;" onclick="ChangeToNext("false"");">' +
'<img src="Images/RightArrow.png" style="position: absolute; top: 350px; right: calc(50% - 200px); height: 50px; cursor: pointer;" onclick="ChangeToNext("true");">' +
'' +
'<script>' +
'' +
'var currentImage = 0;' +
'var imageID = ["Night_Swarz.png", "Night_Swarz_AllClothes.png", "Samurai_Posed.png", "Samurai_Render.png"];' +
'' +
'function ChangeImageTo(number){' +
'img = document.getElementById("ChangingImage");' +
'currentImage = number;' +
'img.src = "Skills/3DModelling/" + imageID[number];' +
'img.setAttribute("style", "height: 200px;");' +
'var width = img.clientWidth/2;' +
'img.setAttribute("style", "position: absolute; top: 300px; left: calc(50% - " + width.toString() + "px); height: 200px;");' +
'}' +
'' +
'function ChangeToNext(forward){' +
'if(forward == "true"){' +
'if(currentImage == imageID.length-1){' +
'ChangeImageTo(0);' +
'} else {' +
'ChangeImageTo(currentImage+1);' +
'}' +
'} else {' +
'if(currentImage == 0){' +
'ChangeImageTo(imageID.length-1);' +
'} else {' +
'ChangeImageTo(currentImage-1);' +
'}' +
'}' +
'}' +
'' +
'ChangeImageTo(0);' +
'</script>','','','',''];
function PopulateWithTab（tab）{ div = document.getElementById（“SkillsPane”）;
div.innerHTML = tabContents[tab];
}
此功能用于更改图像以循环显示列表但是一旦运行该功能，此消息将显示在网页的控制台中：
Index.html:2 Uncaught SyntaxError: Unexpected token }
这是index.html中的第2行：
<html>
答案 0 :(得分：1)
虽然这可能看起来像是跨站点脚本攻击，但结果是无害的。 HTML5指定通过innerHTML插入的<script>标记不应该执行。
注意：使用innerHTML插入的脚本元素在插入时不会执行。
您的if / else实施难以阅读/调试，请使用inline实施。
（你可能还有一个}）
condition ? expr1 : expr2