cari

Rumah  >  Soal Jawab  >  teks badan

Buka dokumen pengiraan menggunakan window.open() dan data: skema

Saya mempunyai halaman web yang dijalankan dalam penyemak imbas yang menjana dokumen HTML terkira yang ingin saya buka dalam tab penyemak imbas baharu.

Cara mudah dan kotor adalah dengan melakukan ini:

const w = window.open('', '_blank');
w.document.open();
w.document.write(htmlContents);
w.document.close();

Mudah sahaja. Tetapi ini mempunyai beberapa akibat yang janggal yang saya tidak suka. Iaitu, URL tab baharu mesti menghala suatu tempat , tetapi memandangkan dokumen baharu dikira secara dinamik, tiada apa yang boleh menunjuk kepadanya. Jika saya tidak menentukan URL, ia akan menggunakan URL halaman web saya. Jadi jika seseorang memuat semula tab yang mengandungi dokumen yang dijana, dokumen itu hilang dan contoh baharu halaman web saya dimuatkan di tempatnya. Ini boleh mengelirukan pengguna.

Saya rasa perkara yang lebih sesuai dengan keperluan saya ialah menggunakan URI data. Saya hanya mengekodkan keseluruhan kandungan halaman web ke dalam URI itu sendiri dan kemudian menggunakan window.open() untuk membuka URI tersebut. Ia hodoh, tetapi secara semantik konsisten dengan matlamat saya: dokumen pengiraan serba lengkap yang tidak boleh dinavigasi keluar secara tidak sengaja pada penyegaran halaman.

Saya membina konsep untuk ini yang saya rasa sangat mudah, seperti berikut: 

const doc = encodeURIComponent('<html><body><p>Hello, world!</p></body></html>');
window.open(`data:text/html;charset=utf-8,${doc}`, '_blank');

Jika saya menjalankan kod ini, tetingkap baharu berkelip pada skrin untuk satu bingkai dan kemudian ditutup serta-merta. Tiada ralat berlaku.

Apa salah saya?

P粉752479467P粉752479467231 hari yang lalu574

membalas semua(1)saya akan balas

  • P粉085689707

    P粉0856897072024-04-07 09:10:30

    Nampaknya semua pelayar moden sengaja menyekat penggunaan URI data tersebut. luar biasa.

    Satu lagi tanda pada papan tulis ialah "Perkara sempurna yang saya perlukan telah diambil daripada kami baru-baru ini". Nah.

    Di sisi positifnya, ini nampaknya melakukan semua yang saya mahukan dengan lebih baik: 

    const html = '
    Hello, world!
    ';
const blob = new Blob([html], { type: 'text/html'});
const url = URL.createObjectURL(blob);
window.open(url, '_blank');

    balas
    0
  • Batalbalas