Jxbrowser: получить ширину и высоту изображения из DOMElement

Question

Как я могу получить клиентскую ширину и клиентскую высоту, если у меня есть список img

imgs = document.findElements(By.cssSelector("a>img"));
for(DOMElemnt img:imgs){
double height =img.getAttribute("height");//not always works ,sometime return null value
//What API can I use?
}

Или я должен использовать JQuery? но как это может сочетаться с jxbrowser API? Спасибо!

Answer 1

Насколько я знаю, нет API для получения элемента height или же width непосредственно. Я даю два способа, чтобы получить height а также width, Используйте каждый, который соответствует вашему коду.

1. Если есть какой-то атрибут, который отделяет изображения друг от друга, такие как id, тогда вы можете получить изображение width а также height с помощью .executeJavaScriptAndReturnValue метод:

   for(DOMElemnt img : imgs){
       JSValue res = browser.executeJavaScriptAndReturnValue(
                       "["
                     + "document.getElementById('" + img.getAttribute("id") + "').width,"
                     + "document.getElementById('" + img.getAttribute("id") + "').height,"
                     + "]");
       if (res.isArray()) {            
           JSArray attrs = res.asArray();                          
           if (attrs.get(0).isNumber()) {          
               float width = attrs.get(0).asNumber().getFloat();
               // use width variable
           }
           if (attrs.get(1).isNumber()) {              
               float height = attrs.get(1).asNumber().getFloat();
               // use height variable
           }
   
       }
   }
   

2. Если у изображений нет такого атрибута для их разделения, вы можете вызвать функцию в javascript, которая возвращает массив элементов, и каждый элемент состоит из пути css, ширины и высоты. Таким образом, вы можете получить доступ к ширине и высоте изображений напрямую. Также путь к CSS может быть использован для доступа DOMElement, Прежде всего, добавьте этот скрипт в ваш HTML:

   <script>
   var cssPath = function(el) {
       if (!(el instanceof Element)) 
           return;
       var path = [];
       while (el.nodeType === Node.ELEMENT_NODE) {
           var selector = el.nodeName.toLowerCase();
           if (el.id) {
               selector += '#' + el.id;
               path.unshift(selector);
               break;
           } else {
               var sib = el, nth = 1;
               while (sib = sib.previousElementSibling) {
                   if (sib.nodeName.toLowerCase() == selector)
                       nth++;
               }
               if (el.previousElementSibling != null || el.nextElementSibling != null)
                   selector += ":nth-of-type("+nth+")";
           }
           path.unshift(selector);
           el = el.parentNode;
       }
       return path.join(" > ");
   };
   var getArray = function(selector) {
       var images = document.querySelectorAll(selector);
       var result = [];
       for (i = 0; i < images.length; ++i)
           result.push({'path': cssPath(images[i]), 'width' : images[i].width, 'height': images[i].height});
       return result;
   };
   </script>
   

   cssPath Функция принимает элемент и возвращает строку пути CSS. Код только что скопирован отсюда (ответ Аселина) с небольшой модификацией (заменен if (nth != 1) с if (el.previousElementSibling != null || el.nextElementSibling != null)). функция getArray принимает жало селектора и перебирает querySelectorAll() результат, добавив каждый элемент width, height и путь ксс.

   Тогда позвони getArray Функция из Java и проанализировать результат:

   JSValue result = browser.executeJavaScriptAndReturnValue("getArray('a > img');");
   
   if (result.isArray()) {
   
       JSArray res_arr = result.asArray();
   
       for (int i = 0 ; i < res_arr.length() ; i++) {
   
           if (res_arr.get(i).isObject()) {
   
               JSObject obj = res_arr.get(i).asObject();
   
               float width = obj.getProperty("width").asNumber().getFloat();
               float height = obj.getProperty("height").asNumber().getFloat();
               String path = obj.getProperty("path").getStringValue();
   
               DOMElement elem = doc.findElement(By.cssSelector(path));
               // use anything of elem you need            
           }       
       }
   }
   

   • Убедитесь, что фрейм завершил загрузку при вызове функций JavaScript, здесь getArray, Для этого вы можете использовать вызов addLoadListener на browser и передать его LoadAdapter, Затем с помощью onFinishLoadingFrame метод адаптера.