jQuery Mobile 无法在 Android 设备上动态更改图像

Posted 2023-05-07

【中文标题】jQuery Mobile 无法在 Android 设备上动态更改图像

【英文标题】：jQuery Mobile can't change image dynamically on Android devices

【发布时间】：2019-07-13 20:55:43

【问题描述】：

。请帮忙。

附加信息：

我要做的是更改安全图像。它在我的机器上本地运行，但我可以使用我的网络 IP 地址访问代码和 api，并且它可以工作。当我尝试更改从 url 获取的图像时，它只会在 safari 中更改，我在 chrome、Firefox 等中尝试过，但没有运气。

我尝试在后面设置 date.getTime() ，但这也不起作用。 我已经调试了代码，当我按下按钮时，图像没有任何反应，输入字段变为 null。

所以我的问题是每次单击按钮时都要更改图像。

  $("#newSecurityCode").on("click",function () 
        $("#securityCheckImg").attr("src", urlprefix() + "captcha");
        $("#securityTextField").val("");
    );

此代码适用于 safari Mac 和 iPhone，但不适用于 chrome、Firefox .....

$("#newSecurityCode").click(function() 
  $("#securityCheckImg").attr("src", url());
  $("#securityTextField").val("");
);

<tr>
  <td>
    <img id="securityCheckImg">
  </td>
</tr>

【问题讨论】：

这里的相关代码好像只有一半； url() 是什么，它返回什么？

【参考方案1】：

几件事。

永远不要使用经典的 jQuery 点击事件绑定。始终使用 on 并在文档对象上执行此操作。 jQuery Mobile 代码很慢，很有可能在将内容加载到 DOM 之前执行 javascript。如果您发现它要记录，那么 img 是否是 DOM 的一部分并不重要。一旦 img 被加载到 DOM 中，这个事件就会被传播给它。

所以像这样使用它：

    $(document).on('click touchstart', '#newSecurityCode',function () 
        $("#securityCheckImg").attr("src", url());
        $("#securityTextField").val("");
    );

另外，如果您在实际的 android 手机上执行此代码，则无法执行 localhost URL。本地主机仅在您的计算机上执行时才有效。 将您的手机连接到 WiFi 并调用您的计算机 IP 地址而不是 localhost。 当然，这只有在您的服务器允许在您的计算机之外访问时才有效。

【参考方案2】：

我认为这是缓存值的问题...（您应该在发布之前阅读this；））

让我们试试这个：

 $("#newSecurityCode").on('click touchstart', function () 
   d = new Date();
   $("#securityCheckImg").attr("src", url() + "?" + d.getTime());
   $("#securityTextField").val("");
 );

这个timeStamp会强制浏览器重新加载图片

【讨论】：

当我尝试使用您建议的代码时出现此错误：) 加载资源失败：服务器响应状态为 406（不可接受）

举个例子说明url()发回的内容

你只能在你的电脑上引用localhost！

我知道：它说 192.168.168.130 而不是 localhost

【参考方案3】：

分享的信息不多，但你可以试试这个：

$("#newSecurityCode").on('click touchstart', function () 
  $("#securityCheckImg").attr("src", url());
  $("#securityTextField").val("");
);

<tr>
    <td><img id="securityCheckImg"></td>
</tr>

或者，如果您只针对移动设备，您可以使用原版 JS 和 ontouchstart 事件： 此处示例：https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_touchstart

【讨论】：

两个选项都试过了，还没有运气。函数 url() 返回一个包含图像的 url，每次我按下我电脑上的按钮时，安全图像都会从 url 变为另一个图像。当我在手机上尝试相同时，它不会改变图像。当我重新加载页面时，我会得到一个新图像。