Salin kandungan div ke dalam iframe baharu
P粉042455250
2023-08-17 17:03:59
<p>Akhirnya saya mencuba teknik yang mencetak <kod>div</code> tetapi saya terperangkap pada bahagian soalan ini. </p>
<p>Saya mempunyai beberapa kod yang harus disalin daripada <kod>div</kod> kepada <kod>iframe</code>: </p>
<pre class="brush:js;toolbar:false;">var iframe = document.createElement('iframe');
var div = document.querySelector('div#sidebar');
kandungan var = div.innerHTML;
iframe.srcdoc = `<!DOCTYPE html><html><head></head><body>${content}</body></html>`;
document.body.append(iframe);
iframe.contentWindow.print();
</pra>
<p>Saya mencuba ini dalam alat pembangun pada halaman SO (saya boleh cuba menggunakan <code>div#sidebar</code>). </p>
<p>Saya perasan bahawa saya perlu menambah <kod>iframe</code> Jika tidak, sifat <code>.contentWindow</code> ialah <code>null</code>. </p>
Kod <p>nampaknya berfungsi sedikit sebanyak, tetapi <kod>iframe</code> Cetakan akhir kosong. </p>
<p>Sebarang petua dalam mencipta <kod>iframe</code> dengan kandungan yang disalin? </p>
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Baiklah, saya ada jawapan. Saya sepatutnya tahu lebih baik kerana saya baru sahaja selesai mengajar topik yang sama.
Kod berfungsi, tetapi ia berjalan terlalu awal. Saya perlu menunggu sehingga dokumen selesai dimuatkan.
Berikut ialah versi yang berfungsi:
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(); }); };