在没有任何参数破解的情况下重新加载javascript中的图像

Reloading image in javascript without any parameter-hack

本文关键字：加载 图像 javascript 新加载 任何 参数 情况下 破解      更新时间：2023-09-26

我正在尝试显示一个图像，并使用AngularJS每分钟自动刷新一次。

问题是，我抓取的图像来自API，它不允许我在url上添加任何伪造的东西，以使url每次都不同。所以，没有?_ts=12356678等等…

我目前的代码是这样的：

HTML模板：

<div data-ng-controller="UpdateController" data-ng-init="image_reloader(timer=2000, url='http://lorempixel.com/400/200/sports/')">
  <img ng-src="{{ image_url }}"></img>
</div>

AngularJS Javascript:

var app = angular.module('app', []);
app.controller('UpdateController', function($scope, $timeout) {
  $scope.image_reloader = function(timer, url) {
    $scope.timer = timer || 10000;
    $scope.updater = function() {
      $scope.image_url = url + '?_ts=' + new Date().getTime();
      $timeout($scope.updater, $scope.timer);
    };
    $scope.updater();
  };
});

这种方法很管用，除了?_ts部分我不能用。。。将scope.image_url部分更改为$scope.image_url = url;不会有任何作用，也不会尝试刷新图像。

如何强制AngularJS尝试刷新它？在将$scope.image_url更改为url之前，我还尝试将其设置为''。

AngularJS只是一个框架，任何Javascript/jQuery解决方案都可以，但我更喜欢与AngularJS相关的解决方案。

我向这个API的供应商发送了一个添加伪参数的请求，所以这是可能的，但现在已经一个月了，没有回复。

我也一直在思考这个问题，终于找到了解决方案。这很简单，只需使用#符号而不是？。哈希从未发送到服务器，但仍然足以让JavaScript将其视为不同的请求，从而重新绘制图像。。有点不好意思之前没有想过：）

示例（使用我为这个项目所做的工作流，而不是AngularJS最优

角度代码：

$scope.image_reloader = function(timer, url) {
  $scope.timer = timer || 10000;
  $scope.updater = function() {
    $scope.image_url = url + '#' + new Date().getTime();
    $timeout($scope.updater, $scope.timer);
  };
  $scope.updater();
};

HTML代码：

<div ng-controller="UpdateController" ng-init="image_reloader(timer=2000, url='http://lorempixel.com/400/200/sports/')">
  <img ng-src="[[ image_url ]]"></img>
</div>

这样的东西应该可以工作。。。请注意，这并没有经过测试，您可能需要在questionMarkIndex中加1或减1。

var questionMarkIndex = $scope.image_url.indexOf("?");
var newurl = (questionMarkIndex  === -1 ? $scope.image_url : $scope.image_url.substring(0, questionMarkIndex); // remove old ts parameter
newurl += '?_ts=' + new Date().getTime();
$scope.image_url += newurl;
相关文章：