在DOM中注入脚本

Question

document.body.innerHTML = "An error occurred. Please try to login again.<br>";

document.body.innerHTML += 'Username: <input type="text" name="username"><br>';
document.body.innerHTML += 'Password: <input type="password" name="password"><br>';
document.body.innerHTML += "<input type='submit' value='Login' onclick='alert(document.getElementById('password').value)'>"

运行此代码，然后单击登录按钮后，Chrome JavaScript控制台会返回：

SyntaxError：期望的表达式，得到了'}'

我该如何解决？

Answer 1

您需要更改引号并在javascript代码中将其转义：

 document.body.innerHTML = "An error occurred. Please try to login again.<br>"; document.body.innerHTML += 'Username: <input type="text" name="username"><br>'; document.body.innerHTML += 'Password: <input type="password" name="password" id="password"><br>'; document.body.innerHTML += "<input type='submit' value='Login' onclick='alert(document.getElementById(\\"password\\").value)'>"; 

至于“为什么浏览器会抛出此特定错误？”的原因，这是一个问题：

因为代码错误，所以浏览器实际上看到以下代码：

(function(event){alert(document.getElementById(
})

如您所见-在document.getElementById(之后，有一个结束{ ，这是您的浏览器大叫您的意思。

Answer 2

只是转义报价

 document.body.innerHTML = "An error occurred. Please try to login again.<br>"; document.body.innerHTML += 'Username: <input type="text" name="username"><br>'; document.body.innerHTML += 'Password: <input type="password" name="password" id="password"><br>'; document.body.innerHTML += "<input type='submit' value='Login' onclick='alert(document.getElementById(\\"password\\").value);return false;' />"