我正在使用測試數(shù)據(jù)通過 JSNI 使用名為 cytoscape.js 的外部 javascript 庫。當我在我的 java 類中通過 JSNI 運行腳本時，它無法生成圖形。但是，當我通過 Chrome Devtools 控制臺運行它時，它可以正常工作。所有的值似乎都正確地傳遞給了 cytoscape.js 庫。目前，JSNI 代碼無法通過控制臺代碼能夠通過的 Javascript 庫執(zhí)行的測試。這是我使用的 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 調(diào)試顯示正確的值被傳遞到 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 與控制臺創(chuàng)建的不同。盡管如此，開發(fā)工具將控制臺和 JSNI 方法列為提供相同的對象。我如何更新我的 JSNI 代碼以使其符合此檢查？理想情況下，JSNI 應該在這種情況下可用。我不確定為什么通過 JSNI 傳遞值會導致此 if 語句在通過控制臺運行它時失敗并傳遞 if 語句。
1 回答
qq_笑_17
TA貢獻1818條經(jīng)驗 獲得超7個贊
問題在于 Object 與 Object 并不完全相同，而且檢查instanceof幾乎肯定比 cytoscape 的作者認為的要多得多 - JS 不是很棒嗎？
該cytoscape.js項目的測試不僅僅是測試“這是一個普通對象而不是其他類型的實例”，而是實際測試“這個東西是我instanceof Object窗口實例中的 Object 類的實例，而不是來自任何其他iframe /窗戶”。
GWT 的默認鏈接器在 iframe 中評估您的代碼，以防止意外泄漏全局變量和混淆加載到同一頁面的 JS，或者讓同一頁面上的其他 JS 覆蓋或以其他方式混淆 GWT 的代碼。
有幾種方法可以解決這個問題，除了嘗試將 cytoscape 的代碼更正為不那么僵化和不靈活的代碼。
從外部頁面創(chuàng)建對象的實例：為此，您必須直接創(chuàng)建對象，而不是使用語法{...}，語法默認為您碰巧在其中執(zhí)行的任何窗口。像這樣：
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 加載到執(zhí)行 GWT 代碼的同一個 iframe 中。請注意，它實際上可能無法在那里工作，這會導致其他問題，但您可以嘗試使用 ScriptInjector 將腳本內(nèi)容插入 GWT 應用程序而不是引用它直接在您的 .html 頁面中。
添加回答
舉報
0/150
提交
取消