在另一个标签中重复使用iframe（JavaScript）

Question

我在页面中有此iframe：document.querySelector("iframe")

它从服务器加载PDF。 为避免在用户单击按钮时调用另一个请求，我要在此iframe中重用该iframe和pdf文档：例如：<iframe src="myAPI/loadPdf.pdf"><iframe>

当用户单击按钮时：

var pdfWindow = window.open("");
console.log(document.querySelector("iframe"));
pdfWindow.document.write(document.querySelector("iframe"));
//to avoid making 2 request, use the one that is already loaded

这会将[object HTMLIFrameElement]写在空白页上而不是文档上

Answer 1

document.write()将字符串写入文档。您要将iframe节点附加到document.body：

pdfWindow.document.body.appendChild(document.querySelector('iframe'))

但是请注意，当您添加iframe时，可以在网络面板中看到对pdf文件的请求，但是，如果浏览器可以缓存该文件并且缓存的版本可用，则缓存的版本已使用，不会再次下载。话虽如此，实际上重用iframe是没有用的，因为如果您只打开带有pdf文件网址的窗口，就会发生相同的事情，那么将使用缓存的版本。