javascript - iframe 中的 DOM 选择未正确返回文本内容
问题描述
快速说明：我强烈希望通过纯 JavaScript 和/或 HTML 更改来实现所提供的任何解决方案。我个人对 JQuery 或任何其他库、框架、第三方工具等没有任何反对意见，但我更感兴趣的是学习和改进，而不是在不了解发生了什么的情况下应用最快的修复。
对我在这里要完成的工作的快速描述是，我正在处理一个页面，该页面显示有关网站上的聊天会话的信息。信息以带有一些基本信息（姓名、用户位置、日期等）的表格格式记录，并且在每个条目的其中一个列中是指向另一个页面的链接，可以在其中查看聊天记录。我被要求创建一个按钮，单击该按钮后，将浏览该特定页面上的所有聊天记录，收集所有这些脚本数据，并将结果导出到 .csv 文件。我尝试了几种不同的方法，到目前为止唯一正确的方法是通过附加到我上面描述的链接的类名循环遍历表，打开一个不可见的 iframe，并从 iframe 获取文本数据。它没有
我当前使用的函数如下所示：
async function getFileContents() {
var viewLinks = document.getElementsByClassName('view-link');
var output = "";
for(var i = 0; i < viewLinks.length; i++) {
await new Promise(function(resolve, reject) {
var dataWindow = document.createElement("iframe");
dataWindow.setAttribute("src", viewLinks[i].href);
dataWindow.setAttribute("base", "target = _parent");
dataWindow.style.display = "none";
document.body.appendChild(dataWindow);
dataWindow.onload = function() {
var iframe = dataWindow.contentDocument;
var transcriptTextHeader = iframe.querySelector(".transcript-text").textContent;
var transcriptText = iframe.querySelector('#transcript').textContent;
var formattedText = `${transcriptTextHeader} ${transcriptText} \n`;
output += formattedText;
resolve(output);
document.body.removeChild(dataWindow);
}
});
}
download(output, "testoutput.csv");
return output;
}
一切正常，除了一个我还没有弄清楚的问题：标题文本（使用 querySelector("transcript-text)）工作正常，但由于某种原因，通过以下行检索的转录文本本身是从来没有拉过。输出文件中的标题看起来很好，但它们下面没有文本。我已经尝试了我能想到的一切，但似乎根本没有访问文本。作为参考，这里是部分的简短骨架我在 iframe 中打开的成绩单查看页面上的 HTML 结构。
<div class = "transcript-data">
<!-- content here -->
<div class = "transcript-text">
<!-- header content is retrieved from here -->
<pre id = "transcript">
<!-- transcript text is here but not retrieved properly -->
</pre>
</div>
</div>
我仅有的两个想法如下：
该函数不能一次检索多个元素。我更新了选择器以仅尝试转录文本，但它仍然不起作用，所以情况似乎并非如此。
检索完成后，该部分并未完全加载。这似乎也不是这种情况，因为它的父元素被正确检索。在错误的时间获取输出是该任务早期的一个问题，这就是我将其更新为异步的原因。根据事件发生的顺序，输出收集工作正常。
当我查看 Chrome 控制台并选择每个 iframe 的 DOM 元素时，我可以正确看到文本，即使它的父级似乎没有问题，它也没有被正确拉出。如果有人对这里可能发生的事情有任何想法，任何见解都将不胜感激。