Question

我尝试在代码下运行，但chrome显示意外的令牌ILLEGAL 。有人可以帮忙吗？

当我点击按钮时，它应该添加标签，当它找到 images / 1h.jpg 时它不存在，它应该触发 onerror 事件并运行函数onc（）添加一些CSS并加载另一张图片，但它没有运行 function onc（），当我访问控制台时，它显示未捕获的SyntaxError：Unexpected令牌ILLEGAL 。

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

请注意，我们在设置error属性之前隐藏src事件。根据错误原因，error可能不一定非常必要，但这是一个很好的习惯，对于相关的load事件来说它可能非常重要。（这是一种常见的误解，你可以在设置load之后挂钩src事件;它在大部分的时间内工作，但如果浏览器有图像则可能不会缓存及其缓存设置允许浏览器重用它而不重新验证它，在这种情况下，浏览器可能会在设置load后立即触发src事件，并且不会看到任何JavaScript处理程序，不会当JavaScript线程下一个可以自由运行处理程序时，将它们排队运行。[只有一个主要的JavaScript UI线程，但 browsers 是多线程的。]

JavaScript Uncaught SyntaxError：意外的令牌ILLEGAL

1 个答案: