在加载iframes时更改内容

Question

我对JavaScript非常陌生，我想知道您的专家是否能看到这段工作代码中的任何明显错误，如果有的话，建议进行好的改进。

// add iframes to page
var normal_sortables = document.getElementById('normal-sortables');
normal_sortables.innerHTML = normal_sortables.innerHTML + '<div class="postbox"><iframe style="width:100%;height:300px;" id="iframe_upload" src="upload.php"></iframe><iframe style="width:100%;height:300px;" id="iframe_images" src="images.php"></iframe><iframe style="width:100%;height:300px;" id="iframe_pdf_documents" src="pdf.php"></iframe></div>';



// declaring all variables
var code_to_be_inserted = '',
textarea_content = document.getElementById('content'),
iframe_upload = document.getElementById('iframe_upload'),
iframe_images = document.getElementById('iframe_images'),
iframe_pdf_documents = document.getElementById('iframe_pdf_documents');



// upload iframes of images and pdf documents when file is uploaded
iframe_upload.onload = function () {
iframe_images.src = 'images.php';
iframe_pdf_documents.src = 'pdf.php';
}



// add image to content editor
iframe_images.onload = function () {
    var images = iframe_images.contentWindow.document.getElementsByTagName('img');
    for (var i = 0; i < images.length; i++) {
        images[i].onclick = function () {
            code_to_be_inserted = '<img alt="" src="'+this.src+'" />\n\n';
            textarea_content.value = code_to_be_inserted + textarea_content.value;
        }
    }
}



// add pdf documents to content editor
iframe_pdf_documents.onload = function () {
    var pdf_documents = iframe_pdf_documents.contentWindow.document.getElementsByTagName('a');
    for (var i = 0; i < pdf_documents.length; i++) {
        pdf_documents[i].onclick = function () {
            code_to_be_inserted = '\n\n<a href="' + this.href+'" target="_blank">Click here to open ' + this.innerHTML + '</a>';
            textarea_content.value = textarea_content.value + code_to_be_inserted;
            alert ('testar');
            return false;
        }
    }
}

Answer 1

如果希望保留已经附加到元素的任何事件处理程序，可以更改第一段代码--避免在元素上设置innerHTML的危险之一：

// add iframes to page
var normal_sortables = document.getElementById('normal-sortables');
// create container div
var newDiv = document.createElement("div");
newDiv.className = "postbox";
// put content into container div
newDiv.innerHTML = '<iframe style="width:100%;height:300px;" id="iframe_upload" src="upload.php"></iframe><iframe style="width:100%;height:300px;" id="iframe_images" src="images.php"></iframe><iframe style="width:100%;height:300px;" id="iframe_pdf_documents" src="pdf.php"></iframe>';
// add container div to the sortables
normal_sortables.appendChild(newDiv);