在另一个选项卡中重用 iframe (Javascript)

Question

I have this iframe in a page: document.querySelector("iframe")

It loads a PDF from a server. to avoid calling another request when the user clicks on a button i want to reuse the iframe with the pdf document from this iframe: ex: <iframe src="myAPI/loadPdf.pdf"><iframe>

When a user clicks a button:

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

This writes [object HTMLIFrameElement] on the blank page instead of the document

Answer 1

document.write() writes a string to the document. You want to append the iframe node to document.body :

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

But note that when you append the iframe you can see a request for the pdf file in the network panel, however if the browser could cache the file and the cached version is available then the cached version is used and it's not downloaded again. With that said it's actually no use to reuse the iframe since the same thing happens if you just open the window with the url to the pdf file, the cached version will be used if it's available.