简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Buka dokumen pengiraan menggunakan window.open() dan data: skema
P粉752479467
P粉752479467 2024-04-06 15:06:34
0
1
523

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粉752479467
P粉752479467

membalas semua(1)
P粉085689707
P粉0856897072024-04-07 09:10:30 Tingkat 1

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');
Suka +0
Tambah Balasan
Topik popular
Lagi>
Artikel popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！