путешествующие по дому с неточными параметрами

Question

Я хочу получить изображение src на странице продукта на веб-сайте электронной коммерции.

Я пишу это как букмарклет, поэтому я бы хотел, чтобы код работал универсально, насколько это возможно.

Я заметил, что среди тегов с изображением товара среди ведущих сайтов электронной коммерции есть только два повторяющихся фактора (amazon, bestbuy и т. Д.): border=0 и 180<width&height<400. Так, как я мог написать селектор, который дал бы мне src первого img элемента на странице без границы и ширины и высоты между 180 и 400 пикселями? Или есть лучший способ сделать это?

P.S. поскольку я стараюсь максимально облегчить использование букмарклета, я не хочу использовать какие-либо библиотеки (jquery, yui и т. д.)

Answer 1

Я не чувствую, что полностью понимаю ваш вопрос, но я все равно пойду!

Вы имеете в виду что-то вроде ...

function findYouImg() {
   var imgs = document.getElementsByTagName('img');
   for(var i=0; i<imgs.length; i++) {
      if(imgs[i].border=='' && imgs[i].width>180 && imgs[i].height<400 ) {
         return imgs[i];
      }
   }
}

Или вы ссылаетесь на внешнееСвойства CSS, когда вы говорите о границе, ширине и высоте?

Answer 2

Если вам не нужно поддерживать браузеры, которые не поддерживают document.evaluate , другой подход будет заключаться в том, чтобы посмотреть каждый сайт, который вы хотите поддерживать, создайте выражение XPATH, которое однозначно определяет продукт изображение и использовать поиск на основе домена:

var productImageXPath = (function() {
  var xpaths = {
    'amazon.com': "//img[@id='prodImage']",
    'bestbuy.com': "//div[@id='imagepreview']/img"
  };
  function endsWith(s1, s2) {
    return (s1.indexOf(s2) == s1.length - s2.length);
  };
  return function(host) {
    for (attr in xpaths) {
      if (endsWith(host, attr)) {
        return xpaths[attr];
      }
    }
    return null;
  };
})();
var xpath = productImageXPath(location.host);
if (xpath) {
  var img = document.evaluate(xpath, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
  if (img) {
    console.log(img.src);
  }
}