问题描述
我正在一个CRM系统上工作，在该系统上我只能在onloadfunc中编写javascript。 我的意图是从新添加的li标记中获取数据文件名到DOM并发送通知。 请注意，我的targetNode在IFRAME中。 除此上传字段外，我还有许多其他上传字段。 我的代码没有使用iframe，但在这种情况下不起作用。
var targetNode = document.getElementById('filelist_cf_1267610');
var config = {childList: true, subtree: true };
var ActiveDraftsCallback = function(mutationsList, observer) {
for(var mutation of mutationsList) {
if (mutation.type == 'childList') {
console.log('A child node has been added or removed.');
}
}
}
};
var observer = new MutationObserver(ActiveDraftsCallback);
observer.observe(targetNode, config);
<iframe name="win_lst" id="win_lst" src="fp_list.jsp?fieldid=1267609&codedid=QHJrJ0keIhgKFlALJGc1KgRXEAcuXRsTH2JcU0VNZl8~&uptype=0" frameborder="0"> <html lang="en"> <head> <body style="background:#FFFFFF"> <div id="uploaded-filelist" class="uploaded-filelist"> <form action="fp_list.jsp" method="POST"> <input type="hidden" name="ss_formtoken" id="ss_formtoken" value="60B19CD9C086ED81DC1FC23B65D6E9942F94BEEEA96F60CAA533B8705E6D013A"> <input type="hidden" name="fieldid" value="1267609"> <input type="hidden" name="codedid" value="QHJrJ0keIhgKFlALJGc1KgRXEAcuXRsTH2JcU0VNZl8~"> <input type="hidden" name="uptype" value="0"> <input type="hidden" name="isanno" value="0"> <input type="hidden" name="delefile" id="delefile" value=""> <div id="updatedresult" style="display:none"> <div id="cf_1267609" style="display:inline-block"><button type="button" class="Button" name="iconbutton" aria-label="Upload" title="" onclick="x_uploadfolder(1267609,'QHJrJ0keIhgKFlALJGc1KgRXEAcuXRsTH2JcU0VNZl8~','File Manager')" data-original-title="Upload"><i class="fa fa-upload" style="cursor:pointer" data-original-title="" title=""></i></button><button type="button" class="Button" name="iconbutton" title="" aria-label="Merge Files" onclick="x_mergefile(1267609,-1,'QHJrJ0keIhgKFlALJGc1KgRXEAcuXRsTH2JcU0VNZl8~')" data-original-title="Merge Files"><i class="fa fa-clone" style="cursor:pointer" data-original-title="" title=""></i></button><button type="button" onclick="ssUploadedFileList.confirmDeleteFiles(1267609,1127956,80,null,'Delete File(s)','Are you sure you want to delete the following file(s)?')" class="btn btn-default faButton DisabledButton" id="delete_1267609" name="delete_1267609" data-original-title="Delete Selected Files" aria-label="Delete Selected Files" disabled=""><i class="fa fa-trash" style="cursor:pointer" data-original-title="" title=""></i></button></div> <i class="fa fa-history fa-lg text-help Pointer" onclick="openinmwin('/s_cusfieldhistory.jsp?ismwin=1&appid=102946&objectid=1127956&fieldid=1267609');" id="his_1267609" title="" aria-label="History" data-original-title="History"></i> <div class="toggleButtonGroup"><button type="button" onclick="ssUploadedFileList.toggleListView(1081636,1267609)" class="btn btn-default faButton buttonToggle active" id="gridviewbtn_1267609" name="gridviewbtn_1267609" data-original-title="Grid View" disabled=""><i class="fa fa-th-large" style="cursor:pointer" data-original-title="" title=""></i></button><button type="button" onclick="ssUploadedFileList.toggleListView(1081636,1267609)" class="btn btn-default faButton buttonToggle" id="listviewbtn_1267609" name="listviewbtn_1267609" data-original-title="List View"><i class="fa fa-list" style="cursor:pointer" data-original-title="" title=""></i></button></div> <div class="ssUploadedFileList" data-orderby="date|desc"> <ul id="filelist_cf_1267609" class=""> <li class="ssUploadedFileList-listViewHeader"><span> </span><span data-sorttype="filename"><span>File Name</span><i class="fa fa-caret-up" data-original-title="" title=""></i><i class="fa fa-caret-down" data-original-title="" title=""></i></span><span data-sorttype="size"><span>Size</span><i class="fa fa-caret-up" data-original-title="" title=""></i><i class="fa fa-caret-down" data-original-title="" title=""></i></span><span data-sorttype="date"><span>Date</span><i class="fa fa-caret-up" data-original-title="" title=""></i><i class="fa fa-caret-down" data-original-title="" title=""></i></span><span> </span></li> <li data-filename="Form1-Assessment-of-Attendant-Care-Needs-User-Manual.pdf" data-size="824" data-date="1540390632018"> <div class="ssUploadedFileList-checkbox"><input type="checkbox" name="uploadedFileSet1267609" id="uploadedFileSet1267609-0" data-fieldid="1267609" data-fileicon="fa fa-file-pdf-o" value="Form1-Assessment-of-Attendant-Care-Needs-User-Manual.pdf"><span> </span><label for="uploadedFileSet1267609-0" class="fa fa-file-pdf-o"></label></div> <span id="details_1127956_1267609_1" class="ssUploadedFileList-details" style="width:calc(100% - 75px)"><span id="span_file_1127956_1267609_1"><a href="/files/spool/404048/1127956/80_1267609_1127956/Form1-Assessment-of-Attendant-Care-Needs-User-Manual.pdf?fs=1" title="Form1-Assessment-of-Attendant-Care-Needs-User-Manual.pdf" target="_blank">Form1-Assessment-of-Attendant-Care-Needs-User-Manual.pdf</a></span><span>824 KB - 2018-10-24 10:17am</span></span><span id="renamespan_1127956_1267609_1" class="renamespan" style="width:calc(100% - 136px); display:none"><input id="renamefile_1127956_1267609_1" value="Form1-Assessment-of-Attendant-Care-Needs-User-Manual.pdf" class="ignoreChange" style="width:calc(100% - 15px)"><span>824 KB - 2018-10-24 10:17am</span></span><span class="ssUploadedFileList-size">824 KB</span><span class="ssUploadedFileList-date">2018-10-24 10:17am</span> <div id="options_1127956_1267609_1" class="ssUploadedFileList-options"> <span aria-label="Options"><i class="fa fa-ellipsis-v" title="" data-original-title="Options"></i></span> <ul> <li onclick="ssUploadedFileList.confirmDeleteFiles(1267609,1127956,80,'Form1-Assessment-of-Attendant-Care-Needs-User-Manual.pdf','Delete File(s)','Are you sure you want to delete the following file(s)?')">Delete</li> </ul> </div> <span id="renamebut_1127956_1267609_1" class="renamebuttons" style="display:none"><span onclick="ssUploadedFileList.cancelRename(1267609,1127956,1)"><i class="fa fa-times" title="" data-original-title="Cancel"></i></span><span onclick="ssUploadedFileList.saveRename(1267609,1127956,80,1,'Form1-Assessment-of-Attendant-Care-Needs-User-Manual.pdf')"><i class="fa fa-floppy-o" title="" data-original-title="Save"></i></span></span> </li> <li data-filename="111mergefile_180904.pdf" data-size="283" data-date="1536094080018"> <div class="ssUploadedFileList-checkbox"><input type="checkbox" name="uploadedFileSet1267609" id="uploadedFileSet1267609-1" data-fieldid="1267609" data-fileicon="fa fa-file-pdf-o" value="111mergefile_180904.pdf"><span> </span><label for="uploadedFileSet1267609-1" class="fa fa-file-pdf-o"></label></div> <span id="details_1127956_1267609_2" class="ssUploadedFileList-details" style="width:calc(100% - 75px)"><span id="span_file_1127956_1267609_2"><a href="/files/spool/404048/1127956/80_1267609_1127956/111mergefile_180904.pdf?fs=1" title="111mergefile_180904.pdf" target="_blank">111mergefile_180904.pdf</a></span><span>283 KB - 2018-09-04 4:47pm</span></span><span id="renamespan_1127956_1267609_2" class="renamespan" style="width:calc(100% - 136px); display:none"><input id="renamefile_1127956_1267609_2" value="111mergefile_180904.pdf" class="ignoreChange" style="width:calc(100% - 15px)"><span>283 KB - 2018-09-04 4:47pm</span></span><span class="ssUploadedFileList-size">283 KB</span><span class="ssUploadedFileList-date">2018-09-04 4:47pm</span> <div id="options_1127956_1267609_2" class="ssUploadedFileList-options"> <span aria-label="Options"><i class="fa fa-ellipsis-v" title="" data-original-title="Options"></i></span> <ul> <li onclick="ssUploadedFileList.confirmDeleteFiles(1267609,1127956,80,'111mergefile_180904.pdf','Delete File(s)','Are you sure you want to delete the following file(s)?')">Delete</li> </ul> </div> <span id="renamebut_1127956_1267609_2" class="renamebuttons" style="display:none"><span onclick="ssUploadedFileList.cancelRename(1267609,1127956,2)"><i class="fa fa-times" title="" data-original-title="Cancel"></i></span><span onclick="ssUploadedFileList.saveRename(1267609,1127956,80,2,'111mergefile_180904.pdf')"><i class="fa fa-floppy-o" title="" data-original-title="Save"></i></span></span> </li> </ul> <div class="ssUploadedFileList-footer"><span class="total">Total Files: 2</span></div> </div> </div> <div id="updatedpdfresult" style="display:none"></div> <div id="cf_1267609_container"> <div id="cf_1267609" style="display:inline-block"><button type="button" onclick="ssUploadedFileList.confirmDeleteFiles(1267609,1127956,80,null,'Delete File(s)','Are you sure you want to delete the following file(s)?')" class="btn btn-default faButton DisabledButton" id="delete_1267609" name="delete_1267609" data-original-title="Delete Selected Files" aria-label="Delete Selected Files" disabled=""><i class="fa fa-trash" style="cursor:pointer" data-original-title="" title=""></i></button></div> <div class="toggleButtonGroup"><button type="button" onclick="ssUploadedFileList.toggleListView(1081636,1267609)" class="btn btn-default faButton buttonToggle active" id="gridviewbtn_1267609" name="gridviewbtn_1267609" data-original-title="Grid View" disabled=""><i class="fa fa-th-large" style="cursor:pointer" data-original-title="" title=""></i></button><button type="button" onclick="ssUploadedFileList.toggleListView(1081636,1267609)" class="btn btn-default faButton buttonToggle" id="listviewbtn_1267609" name="listviewbtn_1267609" data-original-title="List View"><i class="fa fa-list" style="cursor:pointer" data-original-title="" title=""></i></button></div> <div class="ssUploadedFileList" data-orderby="date|desc"> <ul id="filelist_cf_1267609" class=""> <li class="ssUploadedFileList-listViewHeader"><span> </span><span data-sorttype="filename"><span>File Name</span><i class="fa fa-caret-up" data-original-title="" title=""></i><i class="fa fa-caret-down" data-original-title="" title=""></i></span><span data-sorttype="size"><span>Size</span><i class="fa fa-caret-up" data-original-title="" title=""></i><i class="fa fa-caret-down" data-original-title="" title=""></i></span><span data-sorttype="date" class="descending"><span>Date</span><i class="fa fa-caret-up" data-original-title="" title=""></i><i class="fa fa-caret-down" data-original-title="" title=""></i></span><span> </span></li> <li data-filename="Form1-Assessment-of-Attendant-Care-Needs-User-Manual.pdf" data-size="824" data-date="1540390632018"> <div class="ssUploadedFileList-checkbox"><input type="checkbox" name="uploadedFileSet1267609" id="uploadedFileSet1267609-0" data-fieldid="1267609" data-fileicon="fa fa-file-pdf-o" value="Form1-Assessment-of-Attendant-Care-Needs-User-Manual.pdf"><span> </span><label for="uploadedFileSet1267609-0" class="fa fa-file-pdf-o"></label></div> <span id="details_1127956_1267609_1" class="ssUploadedFileList-details" style="width:calc(100% - 75px)"><span id="span_file_1127956_1267609_1"><a href="/files/spool/404048/1127956/80_1267609_1127956/Form1-Assessment-of-Attendant-Care-Needs-User-Manual.pdf?fs=1" title="Form1-Assessment-of-Attendant-Care-Needs-User-Manual.pdf" target="_blank">Form1-Assessment-of-Attendant-Care-Needs-User-Manual.pdf</a></span><span>824 KB - 2018-10-24 10:17am</span></span><span id="renamespan_1127956_1267609_1" class="renamespan" style="width:calc(100% - 136px); display:none"><input id="renamefile_1127956_1267609_1" value="Form1-Assessment-of-Attendant-Care-Needs-User-Manual.pdf" class="ignoreChange" style="width:calc(100% - 15px)"><span>824 KB - 2018-10-24 10:17am</span></span><span class="ssUploadedFileList-size">824 KB</span><span class="ssUploadedFileList-date">2018-10-24 10:17am</span> <div id="options_1127956_1267609_1" class="ssUploadedFileList-options"> <span aria-label="Options"><i class="fa fa-ellipsis-v" title="" data-original-title="Options"></i></span> <ul> <li onclick="ssUploadedFileList.confirmDeleteFiles(1267609,1127956,80,'Form1-Assessment-of-Attendant-Care-Needs-User-Manual.pdf','Delete File(s)','Are you sure you want to delete the following file(s)?')">Delete</li> </ul> </div> <span id="renamebut_1127956_1267609_1" class="renamebuttons" style="display:none"><span onclick="ssUploadedFileList.cancelRename(1267609,1127956,1)"><i class="fa fa-times" title="" data-original-title="Cancel"></i></span><span onclick="ssUploadedFileList.saveRename(1267609,1127956,80,1,'Form1-Assessment-of-Attendant-Care-Needs-User-Manual.pdf')"><i class="fa fa-floppy-o" title="" data-original-title="Save"></i></span></span> </li> <li data-filename="111mergefile_180904.pdf" data-size="283" data-date="1536094080018"> <div class="ssUploadedFileList-checkbox"><input type="checkbox" name="uploadedFileSet1267609" id="uploadedFileSet1267609-1" data-fieldid="1267609" data-fileicon="fa fa-file-pdf-o" value="111mergefile_180904.pdf"><span> </span><label for="uploadedFileSet1267609-1" class="fa fa-file-pdf-o"></label></div> <span id="details_1127956_1267609_2" class="ssUploadedFileList-details" style="width:calc(100% - 75px)"><span id="span_file_1127956_1267609_2"><a href="/files/spool/404048/1127956/80_1267609_1127956/111mergefile_180904.pdf?fs=1" title="111mergefile_180904.pdf" target="_blank">111mergefile_180904.pdf</a></span><span>283 KB - 2018-09-04 4:47pm</span></span><span id="renamespan_1127956_1267609_2" class="renamespan" style="width:calc(100% - 136px); display:none"><input id="renamefile_1127956_1267609_2" value="111mergefile_180904.pdf" class="ignoreChange" style="width:calc(100% - 15px)"><span>283 KB - 2018-09-04 4:47pm</span></span><span class="ssUploadedFileList-size">283 KB</span><span class="ssUploadedFileList-date">2018-09-04 4:47pm</span> <div id="options_1127956_1267609_2" class="ssUploadedFileList-options"> <span aria-label="Options"><i class="fa fa-ellipsis-v" title="" data-original-title="Options"></i></span> <ul> <li onclick="ssUploadedFileList.confirmDeleteFiles(1267609,1127956,80,'111mergefile_180904.pdf','Delete File(s)','Are you sure you want to delete the following file(s)?')">Delete</li> </ul> </div> <span id="renamebut_1127956_1267609_2" class="renamebuttons" style="display:none"><span onclick="ssUploadedFileList.cancelRename(1267609,1127956,2)"><i class="fa fa-times" title="" data-original-title="Cancel"></i></span><span onclick="ssUploadedFileList.saveRename(1267609,1127956,80,2,'111mergefile_180904.pdf')"><i class="fa fa-floppy-o" title="" data-original-title="Save"></i></span></span> </li> </ul> </div> </div> </form> </div> </body></html> </iframe>
1楼
由于您只观看childList ，因此不需要按type过滤突变，因为它们都将属于childList类型。
所以刚才forEach通过突变和console.log在每月的第一个addedNodes
var targetNode = document.getElementById('filelist_cf_1267610'); var config = { childList: true, subtree: true }; var ActiveDraftsCallback = function(mutations, observer) { mutations.forEach(({ addedNodes }) => { const li = addedNodes[0]; if (li && li.nodeName == 'LI') { console.log(li.getAttribute("data-filename")); } }); }; var observer = new MutationObserver(ActiveDraftsCallback); observer.observe(targetNode, config); // imitate adding a li in 2secs const li = document.createElement("li"); li.setAttribute("data-filename", "test"); setTimeout(() => {document.getElementById("filelist_cf_1267610").appendChild(li)}, 2000);
<ul id="filelist_cf_1267610" class="listView"> <li class="ssUploadedFileList-listViewHeader"><span> </span><span data-sorttype="filename"><span>File Name</span><i class="fa fa-caret-up" data-original-title="" title=""></i><i class="fa fa-caret-down" data-original-title="" title=""></i></span><span data-sorttype="size"><span>Size</span> <i class="fa fa-caret-up" data-original-title="" title=""></i><i class="fa fa-caret-down" data-original-title="" title=""></i></span><span data-sorttype="date" class="descending"><span>Date</span><i class="fa fa-caret-up" data-original-title="" title=""></i><i class="fa fa-caret-down" data-original-title="" title=""></i></span><span> </span></li> <li data-filename="asif.pdf" data-size="74" data-date="1544642199018"> <div class="ssUploadedFileList-checkbox"><input type="checkbox" name="uploadedFileSet1267610" id="uploadedFileSet1267610-0" data-fieldid="1267610" data-fileicon="fa fa-file-pdf-o" value="asif.pdf"><span> </span><label for="uploadedFileSet1267610-0" class="fa fa-file-pdf-o"></label></div> <span id="details_1127956_1267610_1" class="ssUploadedFileList-details" style="width:calc(100% - 75px)"><span id="span_file_1127956_1267610_1"><a href="/files/spool/404048/1127956/80_1267610_1127956/asif.pdf?fs=1" title="asif.pdf" target="_blank">asif.pdf</a></span><span>74 KB - 2018-12-12 2:16pm</span></span> <span id="renamespan_1127956_1267610_1" class="renamespan" style="width:calc(100% - 136px); display:none"><input id="renamefile_1127956_1267610_1" value="asif.pdf" class="ignoreChange" style="width:calc(100% - 15px)"><span>74 KB - 2018-12-12 2:16pm</span></span><span class="ssUploadedFileList-size">74 KB</span><span class="ssUploadedFileList-date">2018-12-12 2:16pm</span> <div id="options_1127956_1267610_1" class="ssUploadedFileList-options"> <span aria-label="Options"><i class="fa fa-ellipsis-v" title="" data-original-title="Options"></i></span> <ul style="display: none;"> <li onclick="ssUploadedFileList.confirmDeleteFiles(1267610,1127956,80,'asif.pdf','Delete File(s)','Are you sure you want to delete the following file(s)?')">Delete</li> </ul> </div> <span id="renamebut_1127956_1267610_1" class="renamebuttons" style="display:none"><span onclick="ssUploadedFileList.cancelRename(1267610,1127956,1)"><i class="fa fa-times" title="" data-original-title="Cancel"></i></span><span onclick="ssUploadedFileList.saveRename(1267610,1127956,80,1,'asif.pdf')"><i class="fa fa-floppy-o" title="" data-original-title="Save"></i></span></span> </li> </ul>