Bagaimana cara menyembunyikan elemen dalam HTML? Teks tersembunyi pada tampilan kode JavaScript tersembunyi JavaScript di halaman.

Deskripsi: Ada situasi ketika Anda tidak ingin menarik seluruh konten halaman sekaligus. Misalnya, di bagian " FAQ."Hanya untuk menarik nama-nama pertanyaan. Dan jika seseorang tertarik pada jawaban atas pertanyaan tertentu, ia dapat membuka jawabannya, dan ketika dia menonton, lalu tutup. Ini menciptakan kenyamanan halaman dan kekompakannya. Dan untuk ini saya disiapkan sederhana script pada JavaScriptmemungkinkan Anda untuk membuka, atau menyembunyikan teks tertentu (secara umum, elemen tertentu), yaitu, buat teks Tersembunyi di JavaScript.

Hasil: Klik pada nama pertanyaannya. Jika Anda mengklik lagi, jawabannya akan kembali menempel.

Pertanyaan 1.

Jawab nomor 1.

Pertanyaan # 2.

Jawab nomor 2.

Kode javascript (sisipan antar tag dan):

Kode HTML (sisipan antar tag dan):

Pertanyaan 1.



Pertanyaan # 2.


Jujur, tidak perlu bagi pengembang, kebanyakan kode JavaScript yang mudah dilihat di browser, dan oleh karena itu tidak ada alasan khusus untuk menyembunyikan kode Anda. Ini, jadi untuk berbicara, terlihat, apa yang tidak bisa disembunyikan. Namun, ada orang-orang yang sangat malu untuk menunjukkan kepada siapa pun kepada siapa pun, mengingat bahwa properti ini tidak dapat mencuri, mengatakan perpustakaan. Anda telah membuat layanan online, secara khusus menciptakan pustaka kompleks yang kuat yang melakukan operasi tertentu, tidak ada analog layanan Anda, tidak ada perpustakaan Anda, dan secara alami Anda tidak ingin skrip Anda melihat masing-masing (pengembang) dan dapat dilakukan pada Anda Contohnya serupa, bahkan lebih baik. Tentu saja, tidak ada yang salah dengan melakukan sesuatu yang lebih baik, itu adalah evolusi, tetapi dari sudut pandang bisnis, pesaing hanya ada di tangan.

Apa yang dibutuhkan untuk ini?

Anda hanya perlu memahami algoritma dan mencoba memperbaikinya, dan saya menceritakan kembali pengalaman Anda karena saya melakukan skrip tersembunyi. Hal pertama yang kita butuhkan adalah menguji tugas di server (lokal) nyata, saya akan melakukan ini dengan denwer server lokal.

tapi)Untuk pengujian, buat direktori di server.
Saya melanjutkan virtual disk., Saya punya drive ini r, pergi ke sana pergi ke folder rumah

Buat direktori skrip, dan di dalam Buat folder www, sebagai hasilnya, Anda akan berhasil: home / script / www / - setelah itu, pastikan untuk memperbarui server (restart denwer)

b) Buat file index.php - misalnya, ini adalah milik kami halaman Utama Situs, dan di sini kita perlu menghapus skrip tersembunyi. Juga buat folder "JS" di direktori ini.

Untuk tugas kami, permintaan AJAX akan diperlukan, untuk ini Anda dapat menggunakan fungsi rasional Anda, tetapi jika proyek Anda akan tumbuh menjadi ukuran yang akan memerlukan penggunaan efek khusus, acara, sambungkan perpustakaan, dan saya terhubung di muka jQuery, jadi Di akar folder "JS» Tambahkan jQuery.js.

Lalu buat di folder yang sama folder baruSkrip yang perlu kita sembunyikan akan disimpan di dalamnya. Saya akan menyebutnya "Keamanan":

di)Kami merekrut kode pratinjau di index.php


Seperti yang Anda lihat, ada blok

PHP mengasumsikan peran membaca skrip Anda yang akan diblokir di server dan tidak dapat diterapkan pada mereka.

Tapi pertama-tama mari kita buat skrip kita yang ingin kita sembunyikan.


d) Di folder keamanan, buat script1.js dan script2.js, dengan konten tersebut, masing-masing:


Misalnya, itu sudah cukup! Sekarang, agar tidak mungkin untuk menghubungi mereka, Anda perlu menanyakannya di server, ini dilakukan berkat file.htaccess.

Htaccess adalah file konfigurasi yang ditetapkan oleh pengembang, pengguna server ini.

Htaccess memiliki konten seperti:

Setelah itu, atas permintaan:

Anda akan melihat ini:

Dengan demikian, folder keamanan Anda disembunyikan dari mata mencongkel, itu tidak dapat diakses.

Jika Anda mencoba menghubungkan skrip:

Lalu bagaimanapun, file Anda tidak akan dieksekusi, karena mereka tersembunyi secara global oleh server

e)Kembali ke Program Blok PHP di index.php

Intinya adalah bahwa PHP memiliki akses ke semua file di server, terlepas dari apakah mereka tersembunyi atau tidak, yaitu, jika Anda mendaftar:


Lalu B. kasus ini Kami akan melihat isi skrip tersembunyi kami.

Namun, dari server lain, isi skrip kami tidak dapat dilihat, dan pesan kesalahan dikembalikan 500. Ini adalah tangan kami, sehingga situs lain tidak akan dapat membaca file tersembunyi kami.

e)Beginilah hasil akhirnya akan terlihat:

Dan sekarang kita berurusan dengan bagaimana semuanya bekerja. jQuery mengeksekusi permintaan pos (ini membantu untuk menghindari lubang di index.php) pada server "index.php? js \u003d hasil", ada cek, jika permintaan dari server kami (stros () fungsi dan alamat kami Server "http: / / script" - C untuk akun contoh ini), maka skrip memeriksa post-variabel, yaitu, alamat skrip tersembunyi kami, dan memberikan hasil teks. Metode jquery selesai () mendapat respons dalam bentuk konten teks ini, dan teks ini dapat dikonversi ke JavaScript berfungsi, ini membuat fungsi lintas-trem standar eval ();

Akhirnya

Kami mendapatkan hasil kami, skrip kami tidak dapat dilihat secara statis atau dinamis melalui konsol browser, tetapi mudah untuk melihat pekerjaan mereka. Skrip ini dan fungsinya mudah dieksekusi. Namun, perlu untuk berpikir dengan baik untuk menerapkan teknik ini, seperti dalam hal ini masalah kinerja, kecepatan dinaikkan. Fungsi eval (kode) di antara pengembang JavaScript Ini dianggap jahat, dan disarankan untuk menggunakan analognya dari fungsi baru ('return' + kode), meskipun yang terakhir tidak tahu bagaimana menentukan fungsi di dalamnya, yaitu, jika definisi fungsi dicatat dalam variabel Anda , Kode \u003d "tes fungsi () (peringatan (1);); Tes (); ", kode tidak akan dipenuhi, yang berarti eval () mendekati semua kasus kehidupan, kebenaran memiliki nuansa sendiri, yang masih perlu dibaca.

Apakah pernah menyembunyikan Anda untuk bersembunyi dari outsiders di halaman skrip Anda, yang mengimplementasikan penampilan indah yang tidak realistis dari menu atau melakukan tindakan lain yang tidak ingin Anda lihat segera di setiap situs kedua?
Jika demikian, metode yang dijelaskan dalam artikel ini akan bermanfaat bagi Anda dalam hubungannya dengan proses kode. Pada saat yang sama, saya akan membuat reservasi sekaligus bahwa metode ini bukan 100%, tetapi dari sebagian besar non-profesional dan bagian dari para profesional itu akan melindungi.

Teori

Misalkan kita memiliki halaman nojs.php, dan di atasnya Script.js Script yang perlu disembunyikan. Browser dan pengguna dapat memperoleh skrip dari server dengan cara berikut:
  1. Memuat skrip yang langsung diposting di halaman atau dimuat dengan DOM;
  2. Lihat skrip di jendela Kode Sumber Halaman;
  3. Menyimpan halaman dengan semua file pada hard drive;
  4. Memasukkan URL langsung di bilah alamat.
Dalam kasus pertama, browser harus mentransmisikan http header http_referer.
Dalam kasus kedua dan ketiga, ditransmisikan bukan oleh semua browser (Chrome, Firefox akan mengeluarkan skrip yang sebelumnya diunduh dari cache; Opera, yaitu dimuat skrip lagi, tetapi tanpa mengirim referensi).
Dalam kasus keempat, pengarah tidak ditransfer ke salah satu dari empat browser ini.
Jika Anda memberikan JavaScript secara dinamis dengan memeriksa header referensi dalam kueri, maka kami akan segera melindungi dari opera dan IE, tetapi untuk Crome dan Firefox harus datang dengan sesuatu untuk merekam. Kami akan terlebih dahulu mengunduh satu skrip, yang pada gilirannya akan memuat skrip lain, sementara kedua unduhan akan diperiksa untuk referensi HTTP. Metode ilmiah ditemukan bahwa jika Anda secara dinamis membuat skrip pada halaman dokumen

Praktek

nojs.php.
Halaman ini membawa tujuan untuk mengunduh script1.php
Temukan js.
Setelah 10 detik, Anda akan melihat karya skrip tersembunyi dalam bentuk alert, klik tautan setelah waspada, untuk memastikan bahwa peristiwa juga tidak jatuh. Pada tautan ini Anda dapat melihat skrip tersembunyi
script1.php.
Tugasnya: Unduh Script2.php secara dinamis, jika ada header referensi. Kali dapat dikurangi, tergantung pada perkiraan waktu skrip tersembunyi.
script2.php.
Tugasnya: Berikan skrip akhir jika ada header referer

HASIL

Akibatnya, kami mendapatkan bahwa kami tidak dapat melihat di halaman asli halaman, atau mengunduh atau menyimpan skrip tersembunyi dengan sarana empat browser yang diuji. Secara umum, Anda dapat melihatnya dengan dua cara:
  • Buka tautan secara langsung mengarah pada script2.php dan terletak di halaman situs kami;
  • Pembentukan permintaan HTTP menunjukkan header referer di dalamnya.
Tingkatkan efektivitas kulit dengan metode ini:
  1. Menggunakan mod-rewrite, mengganti server script1.js dan script2.js ke script1.js dan script2.js ke script1.php dan script2.php, sehingga pada halaman ada semua file JS yang biasa, sejak PHP bergegas tajam;
  2. Buat naskah fiktif serumit mungkin, masuk akal dan membingungkan sehingga orang yang mencoba membongkarnya cukup dituangkan sebelum kesadaran akan apa yang dia tertipu;
  3. Kode pemrosesan.

Halo, pembaca.
Dalam artikel kecil ini kami ingin memberi tahu Anda cara mengoptimalkan kategori dengan benar untuk toko online.
Ketika kita mulai mengoptimalkan teks, Anda pertama-tama mengatur halaman untuk relevansi maksimum. Bagaimana cara melakukannya .
Tetapi dalam situasi ini, masalah berikut terjadi - Anda harus menyelesaikan terlalu banyak teks, dan ini tidak cocok dengan desain situs.
Jadi, Anda perlu menyembunyikan bagian dari teks dari penggunaTetapi jika tiba-tiba pengunjung ingin membacanya, sehingga ia dapat dengan mudah membukanya.

Solusi yang menarik diimplementasikan di Internet Hypermarket "Socket". Misalnya, kategori:

Ketika kami mengklik tautan ini, itu terbuka deskripsi lengkap tanpa me-reboot halaman. Jika Anda ingin menerapkan keputusan yang sama, maka dijelaskan di bawah ini bagaimana dilaksanakan dalam praktiknya.
Momen ini dapat diselesaikan karena bahasa pemrograman JavaScript.
Javascript awalnya dibuat untuk membuat halaman web "hidup."
Untuk mengatur halaman Web skrip javascript, Anda perlu memasukkan deskriptor. Kode dapat ditempatkan seperti pada badan header (antara tag ) dan dalam tubuh halaman (antara tag ).
Untuk bekerja skrip, Anda perlu membuat fungsi yang akan digunakan di bagian mana pun dari situs. Kami akan menggunakan fungsi fungsi SH ()

Untuk menampilkan operasi skrip, Anda harus meletakkannya di tempat yang ditentukan dalam formulir ini.

Baca lebih banyak ...



FUNGSI SH () dipanggil di sini.
Ke teks tersembunyi default terbuka dalam perubahan kode tampilan: tidak ada pada tampilan: Blok.

Berikut adalah contoh dari apa yang terjadi setelah menerapkan fungsi ke teks:

Dalam contoh ini, 3000 karakter SEO-Text disembunyikan di halaman, yang dieja untuk mempromosikan situs. Ketika Anda mengklik tautan itu sendiri, tautan "Selengkapnya ..." akan hilang berkat gaya gaya.Display ditunjukkan dalam fungsi.
Jadi Anda dapat menerapkan fungsi ini. Jika Anda memiliki pertanyaan, tanyakan pada komentar.

Solusi paling sederhana untuk menampilkan / menyembunyikan elemen HTML dokumen menggunakan JavaScript. Detail Deskripsi esensi proses dan fitur-fiturnya.

Cara konvensional untuk mengering (Eng. menyembunyikan) atau menunjukkan (eng. menunjukkan.) Elemen HTML dari dokumen tidak mungkin. Untuk melakukan ini, gunakan properti CSS display. atau visibilitas.. Perbedaan di antara mereka adalah itu visibilitas.Meskipun itu membuat elemen HTML tidak terlihat, tetapi tempat yang dia tempati, tetap di belakangnya. Jelas bahwa itu jauh lebih sering digunakan display..

display. (dari bahasa Inggris. display.) - Properti multiguna yang menentukan bagaimana elemen harus ditampilkan dalam dokumen.

Daftar kemungkinan nilai properti CSS display., dipahami oleh berbagai browser, tidak hebat, tetapi ini cukup.

  • blok - Elemen ditampilkan sebagai blok. Penggunaan nilai ini untuk elemen-elemen yang disematkan, seperti tag rentang, menyebabkannya berperilaku seperti blok, I.E. Mendayung berlangsung di awal dan akhir konten.
  • di barisan - Item ditampilkan sebagai built-in. Penggunaan nilai ini untuk elemen blok, seperti tag div, menyebabkannya berperilaku seperti built-in, I.E. Kontennya akan dimulai dengan tempat elemen sebelumnya berakhir.
  • daftar barang. - Elemen ditampilkan sebagai blok dan penanda daftar ditambahkan.
  • tidak ada - Menyembunyikan elemen dalam dokumen. Tempat yang ditempati oleh mereka tidak disediakan dan halaman web terbentuk seperti elemen dan tidak ada.

Jelas bahwa untuk mengubah properti CSS dari elemen HTML tertentu, Anda harus menggunakan bahasa pemrograman skrip. Dalam kasus kami, itu adalah Javascript. Tapi semuanya sudah beres.

Pertama-tama, Anda perlu memutuskan dengan tepat cara menghubungi elemen HTML dari dokumen. Untuk melakukan ini, Anda dapat menggunakan metode objek Getelemetbyid dari objek dokumen, yang mengembalikan referensi ke elemen HTML dari ID atribut ID. Sebagai contoh:

dokumen.getelemetbyid ("Tes")

Sekarang kita perlu mengakses sifat-sifat gaya elemen HTML yang sesuai. Ini menggunakan properti gaya. Sebagai contoh:

document.getelemetbyid ("Tes"). Gaya.display

Tetap hanya untuk membuat elemen kontrol yang akan menggeser nilai properti CSS display., pada acara apa pun, misalnya onclick (klik mouse). Perlu memperhatikan fakta bahwa untuk menyelesaikan tugas, Anda harus memeriksa nilai properti CSS saat ini display. Dan ubah ke "yang berlawanan". Dalam kasus kami, untuk bersembunyi, kami akan menggunakan nilainya tidak ada, dan untuk ditampilkan "Kosong". Dalam kasus kedua, kami menghapus properti CSS display. Dalam elemen yang sesuai, yang akan memungkinkan untuk bekerja dengan benar dengan blok dan elemen HTML tertanam.

Untuk kejelasan, saya akan memberikan contoh berikut:

Perubahan

Harap dicatat bahwa tag div memiliki atribut gaya dengan tampilan: tidak ada nilai. Lewat sini? Kami menentukan nilai properti CSS display. Secara default, sama tidak ada. Elemen HTML pada awalnya akan disembunyikan.