JSNI 脚本失败，但在 Chrome Devtools 控制台中运行时脚本成功

Question

我正在使用测试数据通过 JSNI 使用名为 cytoscape.js 的外部 javascript 库。当我在我的 java 类中通过 JSNI 运行脚本时，它无法生成图形。但是，当我通过 Chrome Devtools 控制台运行它时，它可以正常工作。

所有的值似乎都正确地传递给了 cytoscape.js 库。目前，JSNI 代码无法通过控制台代码能够通过的 Javascript 库执行的测试。

这是我使用的 JSNI 代码：

public static native void cytoscape() /*-{

        var cy = $wnd.cy = $wnd.cytoscape({container: $wnd.document.getElementById('cy'),

            elements: $wnd.glyElements, 

            style: [ { selector: 'node', style: { 'background-color': '#666', 'label': 'data(id)' } }, 

                { selector: 'edge', style: { 'width': 3, 'line-color': '#ccc', 'target-arrow-color': '#ccc', 'target-arrow-shape': 'triangle' } } ],

            layout: { name: 'grid', rows: 1 } });

    }-*/;

“$wnd”。用于获取正确的范围。

这是控制台代码：

var cy = window.cy = cytoscape({ 

            container: document.getElementById('cy'),

            elements: glyElements, 

            style: [ { selector: 'node', style: { 'background-color': '#666', 'label': 'data(id)' } }, { selector: 'edge', style: { 'width': 3, 'line-color': '#ccc', 'target-arrow-color': '#ccc', 'target-arrow-shape': 'triangle' } } ], 

            layout: { name: 'grid', rows: 1 } 

        });

我在这两种情况下使用的元素都存储在一个 .js 文件中，并且我确保它们在这两种情况下都可以访问。正如我提到的，Devtools 调试显示正确的值被传递到 cytoscape.js 库中。

JSNI 代码无法通过 cytoscape.js 库中的此返回语句：

var plainObject = function plainObject(obj) {

    return obj != null && _typeof(obj) === typeofobj && !array(obj) && obj.constructor === Object;

  };

如果我注释掉“&& obj.constructor === Object;” 在 cytoscape.js 的第 145 行，代码使用我的 JSNI 脚本正确运行。这让我相信 cytoscape 对象是通过 JSNI 与控制台创建的不同。尽管如此，开发工具将控制台和 JSNI 方法列为提供相同的对象。我如何更新我的 JSNI 代码以使其符合此检查？

理想情况下，JSNI 应该在这种情况下可用。我不确定为什么通过 JSNI 传递值会导致此 if 语句在通过控制台运行它时失败并传递 if 语句。

Answer 1

问题在于 Object 与 Object 并不完全相同，而且检查instanceof几乎肯定比 cytoscape 的作者认为的要多得多 - JS 不是很棒吗？该cytoscape.js项目的测试不仅仅是测试“这是一个普通对象而不是其他类型的实例”，而是实际测试“这个东西是我instanceof Object窗口实例中的 Object 类的实例，而不是来自任何其他iframe /窗户”。GWT 的默认链接器在 iframe 中评估您的代码，以防止意外泄漏全局变量和混淆加载到同一页面的 JS，或者让同一页面上的其他 JS 覆盖或以其他方式混淆 GWT 的代码。有几种方法可以解决这个问题，除了尝试将 cytoscape 的代码更正为不那么僵化和不灵活的代码。从外部页面创建对象的实例：为此，您必须直接创建对象，而不是使用语法{...}，语法默认为您碰巧在其中执行的任何窗口。像这样：       public static native void cytoscape() /*-{           var obj = new $wnd.Object();           obj.container = $wnd.document.getElementById('cy');//can also be simply $doc.getElementById('cy')           obj.elements = $wnd.glyElements;           // Note that you may have to repeat this for each of these nested objects, depending           // on how picky the library is being on otherwise identically structured code...           obj.style = [ { selector: 'node', style: { 'background-color': '#666', 'label': 'data(id)' } },                    { selector: 'edge', style: { 'width': 3, 'line-color': '#ccc', 'target-arrow-color': '#ccc',   'target-arrow-shape': 'triangle' } } ];           obj.layout = { name: 'grid', rows: 1 };           var cy = $wnd.cy = $wnd.cytoscape(obj);       }-*/; 将 cytoscape.js 加载到执行 GWT 代码的同一个 iframe 中。请注意，它实际上可能无法在那里工作，这会导致其他问题，但您可以尝试使用 ScriptInjector 将脚本内容插入 GWT 应用程序而不是引用它直接在您的 .html 页面中。