C# ASP.Net 带有 javascript onclick 的图像属性在 IE9 中不起作用
本文关键字：属性 IE9 不起作用 图像 Net ASP 带有 javascript onclick | 更新日期: 2023-09-27 18:36:51
我正在使用数据列表来填充车辆，并将其图像作为缩略图。当用户单击小图像时，onclick 事件需要从数据库中调用该图像，并将其加载到上面的较大图像控件中。我正在使用 ImageHandler.ashx 从 SQL 检索图像二进制文件并将其呈现在图像控件中。
一切都在Chrome和IE7中完美运行，但在IE9中不起作用。如果我在IE9中单击小图像，就像图像处理程序永远不会执行一样，较大的图像永远不会与所选图像一起加载。在IE9中查看页面源代码时，代码如下所示：
IE9 页面源：
<table id="table1" style="padding-left: 0px; padding-top: 0px; width: 108px; height: 73px;
background-image: url('Images/smallimageframe.png'); background-repeat: no-repeat;
background-color: #FFFFFF;">
<tr>
<td align="center">
<img id="DataListVehicles_ctl00_imgVehicle" class="imgOpacity" onerror="this.src='Images/no_image.jpg'" onclick="imgBig.src='ImageHandler.ashx?ID=29';" src="ImageHandler.ashx?ID=29" alt="29" style="border-style:None;height:55px;width:90px;border-width:0px;" />
</td>
</tr>
</table>
</td><td class="DataList">
<table id="table1" style="padding-left: 0px; padding-top: 0px; width: 108px; height: 73px;
background-image: url('Images/smallimageframe.png'); background-repeat: no-repeat;
background-color: #FFFFFF;">
<tr>
<td align="center">
<img id="DataListVehicles_ctl01_imgVehicle" class="imgOpacity" onerror="this.src='Images/no_image.jpg'" onclick="imgBig.src='ImageHandler.ashx?ID=30';" src="ImageHandler.ashx?ID=30" alt="30" style="border-style:None;height:55px;width:90px;border-width:0px;" />
</td>
</tr>
</table>
</td><td class="DataList">
<table id="table1" style="padding-left: 0px; padding-top: 0px; width: 108px; height: 73px;
background-image: url('Images/smallimageframe.png'); background-repeat: no-repeat;
background-color: #FFFFFF;">
<tr>
<td align="center">
<img id="DataListVehicles_ctl02_imgVehicle" class="imgOpacity" onerror="this.src='Images/no_image.jpg'" onclick="imgBig.src='ImageHandler.ashx?ID=31';" src="ImageHandler.ashx?ID=31" alt="31" style="border-style:None;height:55px;width:90px;border-width:0px;" />
</td>
</tr>
</table>
服务器端：
protected void DataListVehicles_ItemDataBound(object sender, DataListItemEventArgs e)
{
if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
{
Image imgVehicle = e.Item.FindControl("imgVehicle") as Image;
imgVehicle.ImageUrl = "ImageHandler.ashx?ID=" + m_Vehicles.ListingPhotos[e.Item.ItemIndex].ID;
imgVehicle.Attributes.Add("onclick", "imgBig.src='ImageHandler.ashx?ID=" + m_Vehicles.ListingPhotos[e.Item.ItemIndex].ID + "';");
}
}
标记：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<link href="css/asp.css" rel="stylesheet" type="text/css" />
<script src="Scripts/jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$('.imgOpacity').each(function() {
$(this).hover(
function() {
$(this).stop().animate({ opacity: 1.0 }, 500);
},
function() {
$(this).stop().animate({ opacity: 0.6 }, 500);
})
});
});
</script>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<table style="width: 780px" class="OtherControl">
<tr>
<td style="padding-left: 8px; padding-top: 3px;">
<asp:Label ID="lblDescription" runat="server" Font-Bold="True" ForeColor="#FF9900"></asp:Label>
</td>
</tr>
<tr>
<td>
<table style="width: 100%">
<tr>
<td align="center">
<table style="padding-left: 0px; padding-top: 0px; width: 320px; height: 220px; background-image: url('Images/imageframe.png');
background-repeat: no-repeat; background-color: #FFFFFF;">
<tr>
<td align="center">
<asp:Image ID="imgBig" runat="server" Height="200px" Width="300px" onerror="this.src='Images/no_image.jpg'"/>
</td>
</tr>
</table>
<asp:DataList ID="DataListVehicles" runat="server" RepeatDirection="Horizontal" RepeatColumns="4"
ShowFooter="False" ShowHeader="False" BorderStyle="None" OnItemDataBound="DataListVehicles_ItemDataBound"
HorizontalAlign="Center">
<ItemStyle CssClass="DataList" />
<ItemTemplate>
<table id="table1" style="padding-left: 0px; padding-top: 0px; width: 108px; height: 73px;
background-image: url('Images/smallimageframe.png'); background-repeat: no-repeat;">
<tr>
<td align="center">
<asp:Image ID="imgVehicle" runat="server" CssClass="imgOpacity" Width="90px" Height="55px"
onerror="this.src='Images/no_image.jpg'" BorderStyle="None" />
</td>
</tr>
</table>
</ItemTemplate>
</asp:DataList>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
希望有人能帮忙。谢谢
这可能是你从onClick JavaScript中引用"imgBig"的方式，你可以尝试使用document.getElementById（'imgBig'）.src='....相反。 另外，您是否打开了IE开发人员工具窗口并在单击图像时检查了JavaScript错误？
而不是
imgVehicle.Attributes.Add("onclick", "imgBig.src='ImageHandler.ashx?ID=" + m_Vehicles.ListingPhotos[e.Item.ItemIndex].ID + "';");
试试这个
imgVehicle.Attributes.Add("onclick", imgBig.ClientID + ".src='ImageHandler.ashx?ID=" + m_Vehicles.ListingPhotos[e.Item.ItemIndex].ID + "';");
在DataListVehicles_ItemDataBound