Question

我的功能有一个奇怪的问题。

我的javascript代码是：

function makeGIF(x) {
gifshot.createGIF({
    images: [
       x
    ]
}, function (obj) {
    if (!obj.error) {
        var image = obj.image, animatedImage = document.createElement('img');
        animatedImage.src = image;
        document.body.appendChild(animatedImage);
    }
});
}

$('div[class="waka"]').each(function(index,item){
    var urls = $(item).text();
    makeGIF(urls)
});

html代码包含多个waka div：

<div class="waka" style="display:none">'http://localhost/media/2015/05/8fff824ba3731fac7171b6eb3996d2cf-250x334.jpg','http://localhost/media/2015/05/50dbd1588296572ffcf7d120a85dc4f1-250x334.jpg','http://localhost/media/2015/05/ddf02babac0535b310ef531f773c754d-250x334.jpg',</div>

在控制台日志中，我为URLS收到403禁止错误。只是复制粘贴功能中的普通URL，一切正常。请查看屏幕截图。

Screenshot of errors

Answer 1

见：

你的div文本中有一个不是数组的字符串：

<div class="waka" style="display:none">
   'http://localhost/media/2015/05/8fff824ba3731fac7171b6eb3996d2cf-250x334.jpg',
   'http://localhost/media/2015/05/50dbd1588296572ffcf7d120a85dc4f1-250x334.jpg',
   'http://localhost/media/2015/05/ddf02babac0535b310ef531f773c754d-250x334.jpg',
</div>

所以这就行了：

var urls = $(item).text();

var urls不是数组。如果您尝试typeOf(urls)，可以发现这是String而不是Object。

在执行js之前，最好提供分隔但没有任何引号的网址：

<div class="waka" style="display:none">
   http://localhost/media/2015/05/8fff824ba3731fac7171b6eb3996d2cf-250x334.jpg,
   http://localhost/media/2015/05/50dbd1588296572ffcf7d120a85dc4f1-250x334.jpg,
   http://localhost/media/2015/05/ddf02babac0535b310ef531f773c754d-250x334.jpg
</div>

所以，我的解决方案是使用split()方法从字符串中创建数组。

function makeGIF(x) {
   gifshot.createGIF({
      images: x // now x here is an array
   }, function (obj) {
      if (!obj.error) {
          var image = obj.image, animatedImage = document.createElement('img');
          animatedImage.src = image;
          document.body.appendChild(animatedImage);
      }
   });
}

$('.waka').each(function(index,item){ // and change the selector.
    var urls = $(item).text().split(',');
    makeGIF(urls)
});

Answer 2

试试这个

<div class="waka" style="display:none">http://localhost/media/2015/05/8fff824ba3731fac7171b6eb3996d2cf-250x334.jpg,http://localhost/media/2015/05/50dbd1588296572ffcf7d120a85dc4f1-250x334.jpg,http://localhost/media/2015/05/ddf02babac0535b310ef531f773c754d-250x334.jpg</div>

然后

function makeGIF(x) {
gifshot.createGIF({
    images: 
       x
    }, function (obj) {
    if (!obj.error) {
        var image = obj.image, animatedImage = document.createElement('img');
        animatedImage.src = image;
        document.body.appendChild(animatedImage);
    }
});
}

$('div[class="waka"]').each(function(index,item){
    var urls = $(item).text();
    makeGIF(urls.split(','));
});

如果您不想（或不能）从HTML中删除单引号，则可以执行此操作

function makeGIF(x) {
gifshot.createGIF({
    images: 
       x
    }, function (obj) {
    if (!obj.error) {
        var image = obj.image, animatedImage = document.createElement('img');
        animatedImage.src = image;
        document.body.appendChild(animatedImage);
    }
});
}

$('div[class="waka"]').each(function(index,item){
    var urls = $(item).text();
    makeGIF(urls.replace(/'/g, '').split(','));
});

变量URL参数触发403禁止错误

2 个答案: