將div中的內容複製到一個新的iframe中
P粉042455250
2023-08-17 17:03:59
<p>最終我正在嘗試一種列印特定 <code>div</code> 的技術，但我在這個問題的這一部分遇到了困難。 </p>
<p>我有一些程式碼，應該從一個 <code>div</code> 複製到一個新的 <code>iframe</code>:</p>
<pre class="brush:js;toolbar:false;">var iframe = document.createElement('iframe');
var div = document.querySelector('div#sidebar');
var content = div.innerHTML;
iframe.srcdoc = `<!DOCTYPE html><html><head></head><body>${content}</body></html>`;
document.body.append(iframe);
iframe.contentWindow.print();
</pre>
<p>我在 SO 頁面的開發者工具中嘗試了這個（我可以嘗試使用 <code>div#sidebar</code>）。 </p>
<p>我注意到，我需要將 <code>iframe</code> 加入文件才能使其正常運作。否則，<code>.contentWindow</code> 屬性為 <code>null</code>。 </p>
<p>程式碼似乎在某種程度上運作，但 <code>iframe</code> 是空的，或看起來是空的。最終印出來的是空白。 </p>
<p>在創建一個帶有複製內容的新 <code>iframe</code> 中有什麼技巧？ </p>
好的，我有一個答案。我應該更了解，因為我剛完成了一個類似主題的教學。
程式碼是有效的，但是它運行得太早了。我需要等待文檔載入完成。
這是一個可行的版本：
var iframe = document.createElement('iframe'); var div = document.querySelector('div#sidebar'); var content = div.innerHTML; iframe.srcdoc = `<!DOCTYPE html><html><head></head><body>${content}</body></html>`; document.body.append(iframe); // 等待iframe加载完成： iframe.onload = () => { iframe.contentWindow.print(); iframe.contentWindow.addEventListener('afterprint', event => { iframe.remove(); }); };