在 FireFox 中为 img 元素设置 src 时出现 JavaScript 问题 - 字符串解析错误？
我在页面上的图像方面遇到问题。我使用 Javascript 创建元素，在 FireFox 中，我用来设置 insideHTML 的字符串似乎没有被正确解析。当使用无效的 GET 变量请求服务器页面时，我会看到这一点。它们看起来像这样（来自 PHP 脚本的错误处理程序）：
<前><代码>GET[] = 数组 （ [收缩] =>真的 [文件id] => \' 文件 ID \' [刷新] => \' now.getTime() \' ）
这种情况只发生在大约 5% 的请求中，这使得解决起来很困难。我已经能够在 FireFox 中自己重现此内容，并且 Firebug 将显示它尝试获取的 URL 是： https://www.domain.com/secure/%27%20+%20image_src%20+%20%27
我在某处读到它可能与 FireFox 预取内容有关（现在无法通过谷歌搜索找到它），因为它似乎只发生在 FireFox 上。在 about:config 中禁用预取确实可以防止问题发生，但我正在寻找另一种不涉及最终用户更改其配置的解决方案或解决方法。
这是具体细节和代码： 我的 HTML 页面上有一个空表格单元格。在页面的 JQuery 的 $(document).ready() 函数中，我使用 JQuery 的 $.ajax() 方法从服务器获取有关该单元格中应包含的内容的一些数据。它返回 file_id 变量，为简单起见，我在下面设置了该变量。然后，它将空表格单元格设置为具有 src 的图像，该图像指向将根据传递的 file_id 提供图像文件的页面。这部分代码最初是 JQuery，所以我将其更改为直接 Javascript，但这没有任何帮助。
//get data about image from server
//this is actually done through JQuery's $.ajax() but you get the idea
var file_id = 12;
//create the src for the img
//the refresh is to prevent the image from being cached ever, since the page's
//javascript will be it changes
//during the course of the page's life
var now = new Date();
var image_src = 'serve_image.php?shrink=true&file_id=' + file_id + '&refresh=' + now.getTime();
//create
document.getElementById('image_cell').innerHTML =
'<A target="_blank" href="serve_image.php?file_id=' + file_id + '">' +
'<IMG id=image_element src="' + image_src + '" alt="Loading...">' +
'</A>';`
任何帮助将不胜感激。谢谢！
I'm having problems with image's on the page. I'm using Javascript to create the elements, and in FireFox it seems the string that I'm using to set the innerHTML is not being parsed correctly. I'll see this when the server page is requested with invalid GET variables. They look like this (from the PHP script's error handler):
GET[] = Array ( [shrink] => true [file_id] => \' file_id \' [refresh] => \' now.getTime() \' )
This only happens for about 5% of requests, which is making it difficult to solve. I have been able to reproduce this myself in FireFox, and Firebug will show that the URL it is trying to fetch is: https://www.domain.com/secure/%27%20+%20image_src%20+%20%27
I read somewhere that it might be related to FireFox prefetching content (can't find it googling now), since it seems to only happen on FireFox. Disabling prefetching in about:config does prevent the problem from occurring, but I'm looking for another solution or workaround that doesn't involve end users changing their configurations.
Here's the specifics and code:
I have an empty table cell on an HTML page. In JQuery's $(document).ready() function for the page, I used JQuery's $.ajax() method to get some data from the server about what should be in that cell. It returns the file_id variable, which for simplicity I just set below. It then sets the empty table cell to have an image with src that points to a page that will serve the image file depending on what file_id is passed. This part of the code was JQuery originally, so I changed it to straight Javascript but that didn't help anything.
//get data about image from server
//this is actually done through JQuery's $.ajax() but you get the idea
var file_id = 12;
//create the src for the img
//the refresh is to prevent the image from being cached ever, since the page's
//javascript will be it changes
//during the course of the page's life
var now = new Date();
var image_src = 'serve_image.php?shrink=true&file_id=' + file_id + '&refresh=' + now.getTime();
//create
document.getElementById('image_cell').innerHTML =
'<A target="_blank" href="serve_image.php?file_id=' + file_id + '">' +
'<IMG id=image_element src="' + image_src + '" alt="Loading...">' +
'</A>';`
Any help would be greatly appreciated. Thanks!
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
不要更改
document.getElementById("image_cell").innerHTML，而是尝试给您的 ID 和操作document.getElementById('a_tag_id_here').href = 'serve_image.php?file_id=' + file_id; document.getElementById('image_element').src = image_src;如果您无法设置锚标记的 id，则可以使用其他 DOM 函数轻松设置。关键是，我认为改变innerHTML是你问题的根源。
Instead of changing
document.getElementById("image_cell").innerHTML, try giving your <a> an ID and doingdocument.getElementById('a_tag_id_here').href = 'serve_image.php?file_id=' + file_id; document.getElementById('image_element').src = image_src;If you can't set the anchor tag's id, there are other DOM functions that make it easy to get to. The point is, I think changing innerHTML is the source of your problem.
看起来您正在混合使用双引号和单引号。由于您的代码示例已修改，我无法确定，但我的猜测是这一行：
确实被这样处理：
您的 JavaScript 是由 PHP 生成的，还是在单独的文件中？如果您要内联输出 JavaScript，您可能需要考虑将其放入单独的 *.js 文件中，以减少 PHP 对引号的处理不干扰 JavaScript 引号的可能性。
希望这有帮助！
It looks like you're mixing double and single quotes. Since your code example is modified, I can't be sure, but my guess is that this line:
is really being treated like this:
Is your JavaScript being generated by PHP, or is it in a separate file? If you're outputting the JavaScript inline, you may want to consider putting it in a separate *.js file to reduce the liklihood that PHP's treatment of quotes is not interfering with the JavaScript quotes.
Hope this helps!