Bagaimana cara mengirim HTML yang dibuat pengguna ke validator W3C untuk pemeriksaan otomatis—tanpa kesalahan lintas domain?

Saya pikir cuplikan kode di bawah ini akan membuat Anda mendapatkan efek dan pengalaman pengguna yang sama seperti yang Anda cari.

Itu ditulis menggunakan $.ajax(…) jQuery dengan beberapa DOMParser dan document.write(…) untuk menempatkan hasil gaya dan UI Pemeriksa HTML W3C ke jendela baru sesuai keinginan Anda.

var validator_baseurl= "https://validator.w3.org/nu/";
var validator_requesturl = validator_baseurl
    + "?showsource=yes&showoutline=yes";
$.ajax({
    url: validator_requesturl,
    type: "POST",
    crossDomain: true,
    data: storyhtml,
    contentType: "text/html;charset=utf-8",
    dataType: "html",
    success: function (response) {
        var results = (new DOMParser()).parseFromString(response, "text/html");
        results.querySelector("link[rel=stylesheet]").href
            = validator_baseurl + "style.css";
        results.querySelector("script").src
            = validator_baseurl + "script.js";
        results.querySelector("form").action
            = validator_requesturl;
        var newWin = window.open("about:blank",
            "Checker results", "height=825,width=700");
        newWin.document.open();
        newWin.document.write(results.documentElement.outerHTML);
        newWin.document.close();
        newWin.location.hash = "#textarea";
        setTimeout(function() {
            newWin.document.querySelector("textarea").rows = "5";
        }, 1000)
    }
});

Penjelasan

• menyebabkan permintaan POST dikirim ke Pemeriksa HTML W3C
• menjadikan teks storyhtml sebagai badan POST
• menjadikan text/html;charset=utf-8 tipe media badan POST (apa yang diharapkan pemeriksa)
• menyebabkan pemeriksa benar-benar memeriksa konten storyhtml secara otomatis
• menampilkan hasil pemeriksa di jendela baru tepat saat pertama kali dibuka, dalam satu langkah (sehingga pengguna Anda tidak perlu melakukan langkah kedua untuk mengirimkannya secara manual untuk diperiksa sendiri)
• mengganti URL relatif untuk CSS+JS frontend pemeriksa dengan URL absolut (jika tidak, dalam konteks “jendela mandiri” ini, CSS tidak akan diterapkan, dan skrip tidak akan berjalan)
• newWin.location.hash = "#textarea" diperlukan untuk membuat pemeriksa menampilkan area teks

Catatan

• sengaja menggunakan Pemeriksa HTML W3C saat ini (bukan validator markup W3C lama)

• sengaja mengirimkan konten untuk diperiksa sebagai badan POST, bukan multipart/form-data); pemeriksa mendukung multipart/form-data tetapi menjadikannya badan POST lebih mudah dan lebih baik

• bit setTimeout textarea tidak diperlukan; Saya hanya meletakkannya agar hasilnya terlihat tanpa menggulir (bagian bawah jendela baru di bawah textarea); Anda tentu saja dapat menghapusnya jika Anda mau

• menyetel tinggi dan lebar jendela baru sedikit lebih besar dari 600x600 pada kode asli pertanyaan; sekali lagi, saya hanya melakukan itu agar lebih mudah dilihat; ubahlah sesuka Anda

• menggunakan operasi DOM standar yang mungkin memiliki metode/idiom jQuery yang lebih baik (saya biasanya tidak menggunakan jQuery, jadi saya bisa membayangkan ada cara untuk menyederhanakan kode di dalamnya lebih jauh di sekitar JQuery)

• tentu saja juga dapat dilakukan tanpa menggunakan jQuery sama sekali—menggunakan standar Fetch atau XHR sebagai gantinya (dan saya juga akan dengan senang hati menambahkan contoh di sini yang menggunakan Fetch dan XHR jika diinginkan)

• diuji & berfungsi seperti yang diharapkan di Edge, Firefox, Chrome & Safari; namun seperti kode apa pun yang menggunakan document.open, pengguna Safari harus menghapus Preferensi > Keamanan > Blokir jendela pop-up