JxBrowser Javascript问题

Question

我有一个非常不一致的弹出错误。每隔一段时间(大约是这样)，当我启动JxBrowser应用程序时，当我导航并加载本地.html文件时，我会收到以下错误：

Uncaught TypeError: Cannot read property 'trim' of undefined

我不知道为什么，但我觉得这与我的.loadURL方法有关。我在executeJavaScript()方法中使用了.trim()方法。代码如下。

event.getBrowser().executeJavaScript("if(!String.prototype.trim) {(function() {"
                        + "var rtrim = /^[\\s\uFEFF\\xA0]+|[\\s\uFEFF\\xA0]+$/g;"
                        + "String.prototype.trim = function() {return this.replace(rtrim, '');};})();}"
                        + "var nodes = [];"
                        + "var myArray = new Array();"
                        + "myArray = new Array(window.java.getNodes());"
                        + "var nodes = myArray.toString();"
                        + "nodes = nodes.replace('[','');"
                        + "nodes = nodes.replace(']','');"
                        + "nodes = nodes.split(',');"
                        + "var cy = cytoscape({"
                        + "container: document.getElementById('cy'),"
                        + "boxSelectionEnabled: false,"
                        + "autounselectify: true,"
                        + "style: cytoscape.stylesheet()"
                        + ".selector('node')"
                        + ".css({'content': 'data(id)', 'visibility': 'hidden'})"
                        + ".selector('edge')"
                        + ".css({'curve-style': 'bezier','target-arrow-shape': 'triangle',"
                        + "'width': 4,'line-color': '#ddd','target-arrow-color': '#ddd', 'visibility': 'hidden'})"
                        + ".selector('.highlighted')"
                        + ".css({'background-color': '#61bffc','line-color': '#61bffc',"
                        + "'target-arrow-color': '#61bffc',"
                        + "'transition-property': 'background-color, line-color, target-arrow-color',"
                        + "'transition-duration': '0.5s'}),"
                        + "});"
                        + "var elementCounter = 0;"
                        + "for (i = 0; i < window.java.getSizeOfDAG(); i++) {"
                        + "var currentNode = nodes[i].trim() || '';"
                        + "var eles = cy.add({group: 'nodes', data: { id:currentNode}});"
                        + "elementCounter++}");
                event.getBrowser().executeJavaScript("for (i = 0; i < window.java.getSizeOfDAG(); i++) {"
                        + "var newCurrentNode = nodes[i].trim() || '';"
                        + "var holdArray = window.java.getLinkedNodeIDs(newCurrentNode);"
                        + "var targetNodes = holdArray.toString();"
                        + "targetNodes = targetNodes.replace('[','');"
                        + "targetNodes = targetNodes.replace(']','');"
                        + "targetNodes = targetNodes.split(',');"
                        + "for (x = 0; x < targetNodes.length; x++){"
                        + "var targetString = targetNodes[x].trim() || '';"
                        + "eles = cy.add({group: 'edges', data: { id: elementCounter, source:newCurrentNode.trim(), target:targetString.trim()}});"
                        + "elementCounter++;"
                        + "cy.layout({"
                        + "name: 'breadthfirst', "
                        + "fit: true, "
                        + "directed: true,"
                        + "padding: 15,"
                        + "spacingFactor: 1,"
                        + "avoidOverlap: true}).run();"
                        + "}}"
                        + "var root = nodes[0];"
                        + "var ele = cy.$('node[id = ' + window.java.getRootNodeAsString() + ']');"
                        + "ele.css({'visibility': 'visible'});"
                        + "var collection = cy.collection();"
                        + "cy.nodes().on('click', function(event){"
                        + "var id = this.id();"
                        + "cy.$('node[id = ' + window.java.getJSFriendly(id) + ']').select();"
                        + "collection = collection.add(this);});"
                        + "cy.$(':selected').neighborhood().removeClass('hidden');");
            }
        }
    });

    browser.loadURL("file:///home/mbax4jo2/workspace/EditDistanceVisualisation/src/src/web/index.html");

我试图在开始执行Javascript时覆盖.trim()方法，但仍然抛出此错误。

有什么想法吗？

谢谢，杰克

编辑:本地HTML索引文件和Java代码

<html>
  <head>
  <meta name = "viewport" content="user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui">
  <title>Visualisation</title>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="cytoscape.js"></script>


  <script type="text/javascript">
     function onResetClick() {
       Reset.newGraph();
     }
  </script>

  <script type="text/javascript">
     function onNextClick() {
        NextClick.showNeighbourhood();
     }
  </script>

  <script type="text/javascript">
     function onFinishBranchClick() {
       FinishBranch.onFinishBranchClick();
     }
  </script>

  <script type="text/javascript">
     function onBackClick() {
       BackClick.hideNodes();
     }
  </script>
</head>

<style>
  #cy {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
  }
</style>

<body>
  <div id="cy"></div>
  <div class="btn-group" style ="position: absolute; bottom: 0; right:0; padding: 10px 10px;">
    <button class="btn btn-primary" id="resetBtn" onclick="onResetClick();" >New Graph</button>
    <button class="btn btn-primary" id="finishBranchBtn" onclick="onFinishBranchClick();" >Finish Branch</button>
    <button class="btn btn-primary" id="backBtn" onclick="onBackClick();" >Back</button>
    <button class="btn btn-primary" id="nextBtn" onclick="onNextClick();" >Next</button>
  </div>
</body>
</html>

JAVA Code -我从中获取JAVA字符串数组的方法和脚本上下文侦听器

public ArrayList<String> getNodes(){
    ArrayList<String> gNodesSet = new ArrayList<String>();
    Iterator<GNode> it = dag.iterator();

    while (it.hasNext()){
        GNode currentGNode = (GNode) it.next();

        gNodesSet.add(currentGNode.getString());
    }

    return gNodesSet;
}

browser.addScriptContextListener(new ScriptContextAdapter() {
        @Override
        public void onScriptContextCreated(ScriptContextEvent event) {
            Browser browser = event.getBrowser();
            JSValue window = browser.executeJavaScriptAndReturnValue("window");
            window.asObject().setProperty("java", new CytoData(dagGraph, rootGNode));
            JSValue document = browser.executeJavaScriptAndReturnValue("document");
            document.asObject().setProperty("java", new Graph<GNode>());
        }
    });

编辑

    JSValue nodes = event.getBrowser().executeJavaScriptAndReturnValue("window.java.getNodes());");
                JSArray nodesArray = nodes.asArray();
                nodesArray.toString();

                for (int i = 0; i < nodesArray.length(); i++){
                    nodesArray.get(i).getStringValue().replaceAll("[", "");
                    nodesArray.get(i).getStringValue().replaceAll("]", "");
                    nodesArray.get(i).getStringValue().split(",");
                    nodesArray.get(i).getStringValue().replaceAll("\\s+","");
                }

Answer 1

我注意到getNodes()方法的返回值是ArrayList<String>。JxBrowser无法自动将ArrayList类型正确转换为适当的JavaScript数组类型。

因此，调用myArray = new Array(window.java.getNodes());不会创建假设的JavaScript数组，并且在迭代不存在的节点并尝试调用这些节点的trim()方法时会出现错误。

article的Java to JavaScript types conversion部分描述了Java-JavaScript桥中可能的类型转换。

为了将字符串列表传递给JavaScript代码，我建议您使用以下文章中描述的方法：https://jxbrowser.support.teamdev.com/support/solutions/articles/9000091697-working-with-arrays。在这种情况下，您可以从JavaScript获取myArray作为Java语言中的JSArray实例，并在getNodes()方法中初始化它的值。

Answer 2

我假设您可以在Java代码中填充数组数据。请看下面的代码片段：

JSValue jsArray = browser.executeJavaScriptAndReturnValue("var nodes = []; nodes;");
fillNodes(jsArray);
browser.executeJavaScript("if(!String.prototype.trim) {(function() {"
......................................

和fillNodes()方法的源代码：

public void fillNodes(JSValue jsArray) {
    jsArray.asArray().set(0, "test 4");
    jsArray.asArray().set(1, "test 5");
    jsArray.asArray().set(2, "test 6");
}

如果您仍然看到Uncaught TypeError: Cannot read property 'trim' of undefined错误消息，那么您应该确定到底是哪一行JavaScript代码导致了这个错误。