javascript - 将 swfupload.js 动态注入(inject) GWT 项目。 JS 代码在 存在于 DOM 之前被无意调用

Question

我正在尝试注入(inject) swfupload.js导入 GWT 项目以支持多文件上传。我有一个在非 GWT 项目上本地运行的 swfupload.js 版本，但我很难将其集成到 GWT 项目中。

我怀疑JS是在<span>之前被调用的元素存在于 DOM 中。在 swfupload.js > loadFlash() 添加断点并检查 targetElement 后，出现上传模式对话框时注入(inject) JS 脚本。它返回为未定义，而它应该是 #btnFileUpload跨度。此外，我可以看到 <span>当脚本在断点处停止时在屏幕上显示。

• 使用断点，查询$('#btnFileUpload')在控制台我获取[] 。
• 不带断点，查询$('#btnFileUpload')在控制台中我得到 <span id="btnFileUpload">...</span> .

GWT/Java 中的脚本注入(inject)器代码(据我所知，有效)

@UiFactory
FormPanel createForm() {

    [...]

    String baseURL = GWT.getHostPageBaseURL();
    ScriptInjector.fromUrl(baseURL + "js/jquery.min.js").inject();
    String[] files = { 
        "swfupload.js", 
        "handlers.js", 
        "swfupload.queue.js",
        "fileprogress.js", 
        "swfupload.impl.js"
    };
    for (String file : files) {
        ScriptInjector.fromUrl(baseURL + "js/swfupload/" + file).inject();
    }

   [...]

}

JavaScript:swfupload.impl.js

var swfu;
$('#btnFileUpload').ready(function() {
    var settings = {
        button_placeholder_id: "btnFileUpload"
        [...]
    };
    swfu = new SWFUpload(settings);
}

JavaScript:swfupload.js

// Gets called from SWFUpload 'constructor'
SWFUpload.prototype.loadFlash = function () {
    var targetElement, tempParent;
    [...]
    // Get the element where we will be placing the flash movie
    targetElement = document.getElementById(this.settings.button_placeholder_id) || this.settings.button_placeholder;

    if (targetElement == undefined) {
        throw "Could not find the placeholder element: " + this.settings.button_placeholder_id;
    }
    [...]
};

注意:我知道 GWT 有 SWFUpload 的实现，但我不想走这条路。

Answer 1

当您使用 ScriptInjector 时，脚本会使用 IFrame 添加到页面，以便您的脚本在其自己的浏览上下文中运行。 swfupload.js 中的 document.getElementById 正在访问它的“自己的 DOM”，而不是顶级的 DOM。您可以尝试使用 window.parent 访问可能具有您要查找的 span 的父上下文。