cari

Rumah  >  Soal Jawab  >  teks badan

Salin kandungan div ke dalam iframe baharu

<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>
P粉042455250P粉042455250591 hari yang lalu488

membalas semua(1)saya akan balas

  • P粉306523969

    P粉3065239692023-08-18 12:19:00

    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:

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    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();

            });

        };

    balas
    0
  • Batalbalas