JavaScript 未捕获语法错误 : Unexpected token ILLEGAL

Question

我尝试运行下面的代码，但 chrome 显示 Unexpected token ILLEGAL 。 有人可以帮忙吗？

当我点击按钮时，它应该添加标签，当它发现images/1h.jpg它不存在时，它应该触发onerror事件并运行function onc() 添加一些 CSS 并加载另一张图片，但它没有运行 function onc() 并且当我访问控制台时，它显示 Uncaught SyntaxError: Unexpected token 非法。

<button id='a' onclick="onc();">aaa</button>
<div></div>

function onc(){
	var path1= 'images/1h.jpg';//Does not exist
	var path2= 'images/1s.jpg';//exist
	var tmp = "<img src='"+path1+"' onerror='nofind(this,"+path2+");' /> ";
	$('div').html(tmp);
}

我搜索了一些答案，似乎是由“”或“”引起的，但我真的不知道如何修复我的代码。谢谢。

Answer 1

在 HTML 属性文本中呈现的 JavaScript 中，path2 中的字符串不会用引号引起来，它将如下所示:

onerror='nofind(this,images/1s.jpg);'

一种解决方案是将其放在引号中:

var tmp = "<img src='"+path1+"' onerror='nofind(this,\""+path2+"\");' /> ";
// Change is here -----------------------------------^^---------^^

...呈现如下:

onerror='nofind(this,"images/1s.jpg");'

不过，更好的解决方案是根本不使用 onXyz 属性。没有理由这样做。相反，使用现代事件处理:

function onc(){
    var path1= 'images/1h.jpg';//Does not exist
    var path2= 'images/1s.jpg';//exist
    var img = $("img").on("error", function() {
                  nofind(this, path2);
              }).attr("src", path1);
    $('div').html(img);
}

请注意，我们在设置src属性之前 Hook 了error事件。对于 error 来说，这可能不是绝对必要的，具体取决于错误的原因，但这是一个好习惯，并且对于相关的 load 事件可能非常重要。 (这是一个常见的误解，您可以在设置 src 后 Hook load 事件；它大多数都可以工作，但如果浏览器缓存图像并且其缓存设置允许浏览器重用它而无需重新验证它，在这种情况下，浏览器可能会在设置 src 后立即触发 load 事件并且，如果没有看到任何 JavaScript 处理程序，则当 JavaScript 线程下一次可以自由运行处理程序时，不会将它们排队运行。[只有一个主 JavaScript UI 线程，但浏览器是多线程的。 ])