【问题标题】:Adding an html element using javascript makes other js wonky使用 javascript 添加 html 元素会使其他 js 不稳定
【发布时间】:2009-07-17 10:09:18
【问题描述】:

我有以下 javascript 代码,它是从 SWFUpload 中的 SimpleUpload 演示修改的。用于生成临时上传进度条。它工作正常,除非我添加已注释掉的代码。基本上,这一行会破坏演示文稿:

this.fileProgressElement.appendChild(document.createTextNode("上传状态"));

演示:尝试上传。上传功能不起作用。
http://www.mgxvideo.com/mgxcopy-dev/uploader-works/upload_files.php
http://www.mgxvideo.com/mgxcopy-dev/uploader-broken/upload_files.php

代码是:
http://www.mgxvideo.com/mgxcopy-dev/uploader-works/js/sample1.txt
http://www.mgxvideo.com/mgxcopy-dev/uploader-broken/js/sample1.txt

function FileProgress(file, targetID) {
    this.fileProgressID = file.id;

    this.opacity = 100;
    this.height = 0;


    this.fileProgressWrapper = document.getElementById(this.fileProgressID);
    if (!this.fileProgressWrapper) {
        this.fileProgressWrapper = document.createElement("div");
        this.fileProgressWrapper.className = "progressWrapper";
        this.fileProgressWrapper.id = this.fileProgressID;

        this.fileProgressElement = document.createElement("div");
        this.fileProgressElement.className = "progressContainer";
        //this.fileProgressElement.appendChild(document.createTextNode("Upload Status"));

        var progressCancel = document.createElement("a");
        progressCancel.className = "progressCancel";
        progressCancel.href = "#";
        progressCancel.style.visibility = "hidden";
        progressCancel.appendChild(document.createTextNode(" "));

        var progressText = document.createElement("div");
        progressText.className = "progressName";
        progressText.appendChild(document.createTextNode(file.name));

        var progressBar = document.createElement("div");
        progressBar.className = "progressBarInProgress";

        var progressStatus = document.createElement("div");
        progressStatus.className = "progressBarStatus";
        progressStatus.innerHTML = " ";

        var progressFull = document.createElement("div");
        progressFull.className = "progressBarFull";
        progressFull.innerHTML = " ";

        this.fileProgressElement.appendChild(progressCancel);
        this.fileProgressElement.appendChild(progressText);
        this.fileProgressElement.appendChild(progressStatus);
        this.fileProgressElement.appendChild(progressBar);
        this.fileProgressElement.appendChild(progressFull);
        this.fileProgressWrapper.appendChild(this.fileProgressElement);

        document.getElementById(targetID).appendChild(this.fileProgressWrapper);
    } else {
        this.fileProgressElement = this.fileProgressWrapper.firstChild;
        this.reset();
    }

    this.height = this.fileProgressWrapper.offsetHeight;
    this.setTimer(null);


}

【问题讨论】:

  • "这条线会打断演示文稿"以什么方式打断?我用 firefox 3.0.x 和 IE8 测试了这两个版本,没有发现任何明显的损坏/错误。
  • 我在每个 DOM 操作问题中都会问的问题:你确定 DOM 已经加载了吗?
  • 它们看起来和我一模一样:每个都上传到 45% 左右,然后被锁定。关闭选项卡导致我的浏览器冻结了几秒钟。 WinXP SP3 上的 Chrome 2。
  • 对我来说似乎是时机,如果您等待几行,您将获得结果,但我同意 George,您必须先检查元素,然后再追加它

标签: javascript progress-bar swfupload


【解决方案1】:

下面的效果更好吗?

this.fileProgressElement.innerHTML="Upload Status";

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2023-04-04
    • 2019-07-05
    • 1970-01-01
    • 1970-01-01
    • 2014-01-12
    • 2017-10-05
    • 2022-11-29
    相关资源
    最近更新 更多