javascript - Chrome 中的 Javascript 变量

Question

我的日志中有奇怪的错误，主要来自 Macintosh 中的 Chrome，但有时也来自 Windows。

在 javascript 中，我在页面上有：

text =+ '<img src="/pictures/' + url + '" alt="Photos" border="0" class="carousel-photo" />';

然后我使用轮播添加文本，它应该是并且在所有浏览器中（不幸的是我无法在我的 chrome 中调试它）生成图像：

<img src="/pictures/2405.jpg" alt="photos" border="0" class="carousel-photo">

但我的日志注意到这一点：

http://www.mysite.net:80/pictures/' + url + '

这当然是一个 404 错误，因为它不存在所以我得到了日志。

但是为什么url没有转换成我的变量内容，这个例子中是2405.jpg？？？

更新 1：我现在又受到了一次打击Safari/534.57.2

错误 404：

/pictures/';text += url;text +='

更新 2放入 CDATA 没有帮助（我有 xhtml 页面），一些 Apple 浏览器解释为好像这是 HTML :-(

更新 3

这很奇怪。看来我可以阻止这一点的唯一方法是使用：

txt += "<img src='\/pictures\/" + elm.find('url').text()+ "' alt='Photo' border='0' class='carousel-picture'>";

代替

var url = '\/pictures\/' + elm.find('url').text();
txt += "<img src='" + url  +  "' alt='Photo' border='0' class='carousel-picture'>";

更新 4：在其他页面上，构造 img 的类似代码在此浏览器中也失败了。唯一的方法似乎是制作一个 document.createElement("img")。但是我想知道这个浏览器中的其他东西是否还可以，因为图像找不到 404，但链接没有，例如。CDATA 也无济于事。

score 1 · Accepted Answer

也许浏览器将此 javascript 部分解释为 html，然后它发现：

<img src="/pictures/' + url + '" alt="Photos" border="0" class="carousel-photo" />

这里的 src 属性值为：

/图片/'+网址+'

添加 CDATA 部分应该可以解决这些问题

score 0 · Accepted Answer

尝试使用

console.log(text);

调试。这将显示您的错误日志中传递给文本的内容。尝试：

text += '<img src="/pictures/';
text += url;
text += '" alt="Photos" border="0" class="carousel-photo" />';

所以 URL 不会作为字符串传递，而是作为变量传递......

score 0 · Accepted Answer

这可能是因为规范规定浏览器必须在某些情况下处理不带引号的属性，再加上斜线（solidus）字符在极少数情况下会混淆验证处理。这也可能由于“文本”作为变量名的错误选择而变得更加复杂，因为“文本”是某些元素的有效属性。我注意到您没有结束分号，这也可能有所帮助。

var fullurl = '/pictures/' + url;
mytext = mytext + '<img src="' + fullurl + '" alt="Photos" border="0" class="carousel-photo" />';

一种替代方法可能是删除可选的闭合固线：

var fullurl = '/pictures/' + url;
mytext = mytext + '<img src="' + fullurl + '" alt="Photos" border="0" class="carousel-photo">'

此外，最好在图像插入流后设置 src 属性：

var fullurl = '/pictures/' + url;
mytext = mytext + '<img src="" alt="Photos" border="0" class="carousel-photo" />';

..插入后，使用fullurluri组件字符串设置src属性。注意：它是一个 uri，而不是作为 src 属性内容给出的 url。

另一个可能是反转单/双引号的使用：

var fullurl = "/pictures/" + url;
mytext = mytext + "<img src='" + fullurl + "' alt='Photos' border='0' class='carousel-photo'>";

特别警告，您不应该在 'q' 元素或块引号内使用此图像字符串。

3 回答 3