Jxbrowser：从 DOMElement 获取图像宽度和高度

Question

如果我有 img 列表，如何获取 clientwidth 和 clientheight

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的方法。使用与您的代码匹配的每一个。

如果有一些属性将图像彼此分开，例如id，那么您可以使用[=20=得到图像width和height ] 方法：

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
        }

    }
}

如果图像没有这样的属性来分隔它们，您可以在java脚本中调用一个函数，该函数returns一个元素数组，每个元素由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 函数接受一个元素和 returns css 路径字符串。代码只是从 here（asselin 的回答）中复制而来，稍作修改（将 if (nth != 1) 替换为 if (el.previousElementSibling != null || el.nextElementSibling != null)）。函数 getArray 采用选择器字符串并遍历 querySelectorAll() 结果，添加每个元素的 width、height 和 css 路径。

然后从java调用getArray函数并解析结果：

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            
        }       
    }
}

确保调用 java 脚本函数时框架已完成加载，此处 getArray。为此，您可以在 browser 上调用 addLoadListener 并向其传递一个 LoadAdapter。然后使用适配器的onFinishLoadingFrame方法。

Jxbrowser：从 DOMElement 获取图像宽度和高度

Jxbrowser: get image width and height from DOMElement

image

ixmldomelement

jxbrowser