Lebih baik hidup melalui bookmarklets

mata teras

Bookmark Applet adalah kod JavaScript kecil yang tertanam dalam penanda buku pelayar yang meningkatkan fungsi pelayar web dan memudahkan aliran kerja pemaju web.
Applet Bookmark mempunyai pelbagai kegunaan, dari tugas navigasi mudah ke operasi yang lebih kompleks, seperti mengubahsuai kandungan halaman, menganalisis struktur halaman, dan juga mengautomasikan tugas di laman web.
Walaupun applet penanda buku umumnya selamat dan boleh dipercayai, mereka boleh menyebabkan konflik ruang nama. Masalah ini boleh dielakkan dengan mewujudkan fungsi tanpa nama dengan skop pembolehubah sendiri sebagai applet penanda buku.
Untuk applet bookmark kompleks, ada cara untuk memintas had panjang penanda buku di beberapa pelayar. Pelaksanaan applet bookmark sebenar boleh dihoskan pada pelayan web sebagai fail .js luaran, manakala applet penanda buku boleh mengandungi stub beban untuk memuatkan sisa skrip.

Applet Bookmark adalah cara mudah untuk menambah fungsi ke pelayar web anda dan boleh menjadi tambahan yang berguna kepada aliran kerja pemaju web. Dalam artikel ini, saya akan menunjukkan beberapa applet penanda berguna, memberikan petua untuk membina applet penanda halaman anda sendiri, dan menunjukkan beberapa teknik canggih untuk memanfaatkan sepenuhnya alat -alat yang kuat ini. Applet bookmark adalah coretan kod JavaScript pendek yang tertanam dalam penanda buku pelayar. Apabila penanda buku dipilih, kod JavaScript dilaksanakan. Secara ajaib, pelaksanaan ini berlaku dalam konteks halaman semasa

. Applet penanda buku boleh mengakses model objek dokumen penuh halaman dan boleh mengubahnya dan menggunakan maklumat di dalamnya untuk memulakan tetingkap baru atau mengalihkan penyemak imbas ke laman web lain. Sekiranya anda tidak pernah cuba menggunakan applet penanda buku sebelum ini, disarankan agar anda mencubanya sebelum membaca artikel ini. Kedua -dua www.bookmarklets.com dan www.favelets.com menyediakan koleksi applet yang besar, dan Jesse Ruderman mempunyai koleksi applet penanda buku di www.squarewree.com/bookmarklets. Applet Pembangunan Web Jesse harus menjadi tambahan kepada mana-mana pelayar pemaju web. Applet bookmark sesuai untuk semua pelayar moden yang menyokong JavaScript, tetapi beberapa pelayar lebih mesra daripada yang lain. Internet Explorer 6 untuk Windows mempunyai had saiz penanda buku 508-aksara yang menjengkelkan, yang sangat mengehadkan skop applet penanda halaman yang tersedia untuk penyemak imbas ini, walaupun teknologi yang akan saya sampaikan kemudian memberikan ubat separa. Untuk memanfaatkan applet bookmark, saya cadangkan anda menggunakan pelayar berasaskan Mozilla, seperti Firefox yang sangat baik, yang juga dilengkapi dengan banyak alat yang berguna untuk membantu perkembangan applet penanda halaman. Walau bagaimanapun, salah satu pesona pembangunan applet penanda buku adalah bahawa masalah penyemak imbas yang sering melanda perkembangan JavaScript yang teruk dapat dielakkan: tidak ada masalah dalam membangunkan applet penanda buku untuk pelayar tertentu (terutama applet penanda buku yang digunakan oleh individu), jadi pemaju benar-benar boleh melakukan apa-apa penyemak imbas yang membolehkan mereka lakukan.

variasi applet penanda buku biasa

Jika anda telah melihat mana -mana laman web yang disebutkan di atas, anda harus mempunyai beberapa idea tentang pelbagai ciri yang boleh ditawarkan oleh applet. Jenis applet yang paling mudah dan paling biasa adalah applet bookmark navigasi mudah, yang mengambil URL halaman semasa dan melewati laman web lain. Contoh klasik ialah Applet Penanda Bookmark, yang mengalihkan pengguna ke perkhidmatan pengesahan HTML atau CSS dalam talian pada halaman semasa. Applet penanda buku ini sangat mudah dibuat, tetapi boleh disesuaikan dengan beberapa kegunaan yang sangat berguna. Saya sangat suka membuat edit halaman ini Applet Bookmark untuk laman web yang dikuasakan oleh sistem pengurusan kandungan berasaskan web. Banyak sistem sedemikian membenamkan ID dalam URL laman web awam, yang secara langsung sesuai dengan ID yang digunakan dalam URL bentuk yang digunakan dalam sistem pengurusan tapak untuk mengedit kandungan halaman tersebut. Edit halaman ini Bookmark Applet mengekstrak URL halaman semasa dan menggunakannya untuk segera mengalihkan pengguna ke antara muka pengeditan halaman. Sebagai contoh, bayangkan tapak dengan URL berikut:

<code>http://www.site.com/articles/123</code>

Laman ini juga mempunyai antara muka pengurusan yang dilindungi kata laluan, yang menyediakan antara muka "edit halaman" di alamat berikut:

<code>http://www.site.com/admin/edit-article?id=123</code>

applet "Edit halaman ini" dari laman web di atas boleh dilaksanakan seperti ini:

javascript:document.location='http://www.site.com/admin/edit-article?id='+document.location.href.split('/').pop()

Konsep ini boleh diperluaskan jika anda mempunyai kawalan ke atas sistem pengurusan kandungan yang anda gunakan di laman web anda. Sebagai contoh, di tapak di mana ID dalaman artikel tidak terdedah dalam URL, sebaliknya anda boleh memberikan ID dalam tag meta HTML, yang kemudiannya boleh diberikan kepada edit applet halaman ini melalui DOM. Banyak applet penanda buku mengubahsuai halaman semasa dalam beberapa cara. Contoh -contoh biasa termasuk applet penanda buku untuk "menghapuskan" kandungan yang menjengkelkan, seperti animasi flash yang tidak diingini, dan juga imej yang mengubah saiz saiz yang biasa digunakan untuk iklan spanduk. Ini boleh menjadi menarik, tetapi biasanya terhad oleh keperluan untuk mengaktifkan secara manual setiap kali halaman dimuatkan. Apa yang lebih berguna ialah applet penanda buku yang membantu pemaju web menganalisis struktur halaman dan juga mengubahsuai struktur halaman ("masa nyata"). Applet kegemaran saya dari jenis ini ialah "gaya ujian" Jesse Ruderman, "Edit Style", dan "nenek moyang" dari koleksi pembangunan webnya. Yang terakhir menunjukkan hierarki elemen HTML yang membawa kepada bahagian halaman di bawah kursor tetikus, yang berguna untuk memikirkan cara memohon CSS ke halaman. Dua yang pertama membenarkan CSS halaman semasa diubahsuai "masa nyata", dengan itu memberikan maklum balas segera mengenai perubahan reka bentuk yang berpotensi. Applet Bookmark Mozilla Image My My My menjadikan setiap imej bukan Background pada halaman "Dragable", yang mungkin juga membantu apabila mempertimbangkan tweak reka bentuk halaman. Trik JavaScript yang berguna tetapi sering diabaikan ialah keseluruhan halaman HTML boleh dibenamkan dalam applet penanda buku. Cuba masukkan perkara berikut secara langsung di bar url penyemak imbas:

javascript:'<h1>This is HTML</h1>'

Penyemak imbas harus memaparkan HTML yang diberikan dalam rentetan. Ia melakukan ini kerana rentetan dinilai sebagai ungkapan, dan hasilnya kemudian dipaparkan dalam tetingkap penyemak imbas semasa. Trik yang sama juga boleh digunakan untuk menjadikan penyemak imbas anda menjadi kalkulator yang terlalu ditentukan:

<code>http://www.site.com/articles/123</code>

Kadang -kadang ia berguna untuk menulis applet penanda buku yang membenamkan seluruh halaman dengan cara ini, terutamanya jika mereka memerlukan antara muka pengguna yang lebih kompleks daripada kotak mengesahkan () dan prompt () mudah.

input teks tambahan

Saya menghabiskan banyak masa dalam talian menatap kotak Textarea. Tiga blog yang saya kemas kini dikekalkan melalui Textarea, seperti laman web yang saya usahakan di tempat kerja dan pelbagai forum dalam talian yang saya ambil bahagian. Textarea ada di mana -mana. Mereka juga jauh dari cara terbaik untuk memproses teks, terutamanya jika dibandingkan dengan perisian editor teks khusus. Applet bookmark boleh membuat pengendalian Textareas jauh kurang menyakitkan dan dapat memberikan mereka ciri -ciri tambahan yang berguna. Contoh kegemaran saya mengenai Applet Bookmark yang dipertingkatkan adalah satu lagi dari Jesse Ruderman: Blogidate XML Faedah-Applet Mozilla/Firefox Bookmark yang memeriksa sama ada teks dalam setiap Textarea di halaman adalah XML yang berstruktur dengan baik dan mengubah warna latar belakang Textarea dengan sewajarnya. Ini berguna untuk menangkap kesilapan mudah dalam XHTML sebelum menerbitkannya ke laman web ini. Jesse juga mempunyai satu set applet penanda buku HTML yang menggunakan Validator WDG untuk menyemak sintaks serpihan HTML dalam Textarea. Alat lain yang sering saya gunakan ialah pelanjutan saya HTML Shorthand Bookmark Applet. Ia menggunakan satu siri transformasi mudah untuk teks dalam Textarea:

1. blok teks yang dipisahkan antara satu sama lain dengan garis kosong dibalut dengan tanda perenggan
2. Tukar baris bermula dengan = simbol ke #### tajuk
3. garis bermula dengan * menjadi senarai bullet

Contoh:

<code>http://www.site.com/admin/edit-article?id=123</code>

menjadi:

javascript:document.location='http://www.site.com/admin/edit-article?id='+document.location.href.split('/').pop()

• Senarai 1
• Senarai 2

Versi yang lebih pendek sesuai untuk IE. Pelancaran ini Sokongan Tajuk Sokongan untuk menampung had 508 aksara: HTML yang dilanjutkan dengan IE. Singkatan HTML Extended:

javascript:'<h1>This is HTML</h1>'

Singkatan HTML Extended iaitu:

javascript:1 + 4;

Kod sumber yang tidak dijangka (sebelum ruang dikeluarkan) kelihatan seperti ini:

<code>= Header

Paragraph

* list 1
* list 2</code>

alat penciptaan applet bookmark

Anda boleh membuat applet penanda halaman menggunakan hanya editor teks -atau, jika anda sangat yakin, anda boleh menaipnya terus ke medan penanda buku baru dalam penyemak imbas anda. Walau bagaimanapun, untuk kandungan yang lebih kompleks daripada applet penanda navigasi mudah, masuk akal untuk menggunakan alat khusus. Jika anda menggunakan Firefox, anda sudah boleh mengakses beberapa pembantu penciptaan applet yang berguna. Konsol JavaScript Firefox adalah alat debugging yang berharga. Firefox Jesse Ruderman dan applet shell Mozilla menyediakan javascript interaktif yang dipasang pada konteks halaman semasa, cara yang baik untuk mencuba teknologi baru sebelum menyerahkannya kepada editor teks. Walaupun applet bookmark tidak boleh mengandungi rehat garis, kod sumber mesti diindentifikasi untuk menulis lebih daripada beberapa kenyataan. Applet Bookmark Newline Bookmark saya (di bawah) adalah alat untuk mengeluarkan tab, garis baru, dan pelbagai ruang dari blok kod JavaScript. Dalam banyak kes, ini adalah semua yang anda perlu lakukan untuk membuat applet penanda buku dari blok mudah kod, walaupun anda perlu ingat untuk menamatkan setiap baris dengan titik koma sebelum menukar. Applet penanda buku juga merupakan contoh halaman HTML yang tertanam dalam applet penanda buku. Keluarkan Break Line:

<code>http://www.site.com/articles/123</code>

Elakkan konflik skop berubah -ubah

Masalah yang berpotensi yang diperkenalkan oleh applet penanda buku adalah konflik ruang nama: Apa yang berlaku jika applet penanda buku anda menggunakan atau mentakrifkan semula pembolehubah yang skrip lain pada halaman sudah digunakan? Satu teknik untuk mengelakkan masalah ini adalah dengan menggunakan nama pemboleh ubah rawak yang tidak mungkin digunakan, tetapi ini akan menjadikan kod applet penanda halaman lebih sukar untuk dibaca dan akan meningkatkan panjang applet yang tidak perlu. Penyelesaian yang lebih baik adalah untuk mewujudkan fungsi tanpa nama dengan skop pembolehubahnya sendiri sebagai applet penanda buku. Inilah cara ia berfungsi:

<code>http://www.site.com/admin/edit-article?id=123</code>

Fungsi () {} bahagian di sini adalah fungsi tanpa nama - fungsi yang namanya tidak diisytiharkan. Dengan melampirkan fungsi dalam kurungan dan menambah () pada akhirnya, fungsi itu akan dilaksanakan sekali selepas penciptaan, iaitu, ketika applet penanda buku diaktifkan. Selagi pembolehubah dalam badan fungsi tanpa nama diisytiharkan dengan kata kunci "VAR", mereka terhad kepada skop fungsi dan tidak mengganggu pembolehubah dengan nama yang sama di seluruh dokumen. Terima kasih kepada sifat fungsi JavaScript, anda juga boleh mengisytiharkan fungsi lain dalam fungsi tanpa nama tanpa menambahkannya ke skop global dokumen.

Masukkan skrip lebih lama

Saya menyebut sebelum ini bahawa ada cara untuk memintas had Internet Explorer pada panjang penanda buku. Pendekatan ini juga membolehkan applet penanda buku dalam JavaScript yang diindikasikan standard tanpa perlu menyimpan keseluruhan skrip pada satu baris, menjadikannya teknik yang berguna untuk applet penanda buku yang lebih kompleks yang dilaksanakan oleh mana -mana pelayar. Caranya adalah untuk menjadi tuan rumah pelaksanaan applet bookmark sebenar sebagai fail .js luaran pada beberapa pelayan web. Applet penanda buku kemudian hanya perlu memasukkan kod "stub" yang digunakan untuk memuatkan skrip yang lain - ini dapat dicapai dengan mudah dengan had 508 aksara. Berikut adalah kod program mini yang memuatkan penanda halaman stub, inden untuk kebolehbacaan:

<code>http://www.site.com/articles/123</code>

Selepas mengeluarkan ruang, kod di atas (tolak url skrip luaran) mencapai 193 aksara. Kod ini mempunyai satu kelemahan: ia tidak berfungsi dengan versi Macintosh IE5. Jika sokongan Macintosh versi IE5 penting untuk applet penanda buku anda, Liorean juga mempunyai versi lanjutan stub beban yang menggunakan pengesanan penyemak imbas untuk memenuhi penyemak imbas itu pada masa yang sama.

bacaan selanjutnya

Cara terbaik untuk mengetahui tentang applet penanda halaman adalah melihat applet penanda buku yang ditulis oleh orang lain:

• www.bookmarklets.com
• www.favelets.com
• www.squarefree.com/bookmarklets/

Saya harap pelayaran cepat applet penanda buku ini akan memberi inspirasi kepada anda untuk mencuba membuat applet bookmark anda sendiri.

Soalan Lazim Mengenai Applet Bookmark

apakah applet penanda buku? Bagaimana mereka berfungsi?

Bookmark Applet adalah coretan kod JavaScript kecil yang disimpan dalam URL dalam penanda buku pelayar web. Apabila anda mengklik pada penanda buku, kod JavaScript berjalan pada halaman semasa dan bukannya memuatkan halaman baru. Ini membolehkan anda menambah ciri -ciri baru ke laman web anda, mengautomasikan tugas berulang dan juga bermain permainan tanpa memasang sebarang perisian atau sambungan.

Bagaimana untuk membuat applet penanda buku?

Mewujudkan applet bookmark semudah mencipta penanda buku. Daripada memasukkan URL, anda memasukkan sekeping kod JavaScript. Kod ini dilaksanakan apabila anda mengklik pada penanda buku. Anda boleh menulis kod anda sendiri atau mencari applet bookmark pra-buatan dalam talian.

adakah applet bookmark selamat?

Applet Bookmark biasanya selamat dan boleh dipercayai kerana mereka berjalan di penyemak imbas anda dan tidak dapat mengakses sistem fail komputer anda. Walau bagaimanapun, seperti mana -mana kod, mereka boleh digunakan secara berniat jahat. Pastikan hanya menggunakan applet bookmark dari sumber yang dipercayai dan memahami fungsi kod sebelum menggunakannya.

Bolehkah saya menggunakan applet bookmark di mana -mana laman web?

secara teorinya, applet penanda buku boleh digunakan di mana -mana laman web. Walau bagaimanapun, sesetengah laman web mungkin telah melaksanakan langkah -langkah keselamatan untuk mengelakkan applet penanda buku daripada bekerja. Di samping itu, fungsi applet penanda buku mungkin bergantung kepada struktur laman web yang digunakannya.

Mengapa applet penanda buku saya tidak berfungsi?

Mungkin terdapat beberapa sebab mengapa applet penanda halaman anda tidak berfungsi. Laman web di mana anda cuba menggunakannya mungkin telah melaksanakan langkah -langkah keselamatan untuk mengelakkan applet penanda buku daripada bekerja. Kod dalam applet bookmark boleh tamat tempoh atau tidak serasi dengan Laman Web. Atau mungkin terdapat kesilapan dalam kod itu sendiri.

bagaimana debug applet bookmark?

Debugging bookmark applets boleh menjadi agak rumit kerana mereka tidak mempunyai persekitaran debugging tradisional. Walau bagaimanapun, anda boleh menggunakan alat pemaju penyemak imbas untuk memeriksa kod dan melihat sebarang mesej ralat. Anda juga boleh cuba menjalankan kod di konsol penyemak imbas untuk melihat apakah ia berfungsi di sana.

Bolehkah saya menggunakan applet bookmark pada peranti mudah alih saya?

Ya, anda boleh menggunakan applet bookmark pada peranti mudah alih anda. Walau bagaimanapun, proses menambah dan menggunakannya boleh menjadi lebih rumit daripada pada pelayar desktop. Anda mungkin perlu menanda kod JavaScript secara manual, kerana pelayar mudah alih umumnya tidak menyokong kaedah seret dan drop yang digunakan pada penyemak imbas desktop.

Bolehkah saya berkongsi applet bookmark dengan orang lain?

Ya, anda boleh berkongsi applet penanda buku dengan orang lain. Hanya hantar mereka kod JavaScript dan arahan tentang cara menambahkannya ke penanda halaman mereka. Walau bagaimanapun, ingat untuk berkongsi hanya applet penanda halaman dari sumber yang dipercayai dan anda memahami fungsi kod tersebut.

Bolehkah saya menggunakan applet bookmark untuk menukar penampilan laman web?

Ya, anda boleh menggunakan applet bookmark untuk mengubah penampilan laman web. Ini dilakukan dengan mengendalikan CSS laman web. Walau bagaimanapun, perubahan ini hanya bersifat sementara dan akan hilang selepas menyegarkan halaman.

Bolehkah saya menggunakan applet bookmark untuk melaksanakan tugas secara automatik di laman web?

Ya, anda boleh menggunakan applet bookmark untuk melaksanakan tugas secara automatik di laman web. Ini boleh menjadi apa -apa dari mengisi borang untuk mengklik butang. Walau bagaimanapun, fungsi applet penanda halaman bergantung kepada struktur laman web dan tugas yang anda ingin lakukan secara automatik.

Atas ialah kandungan terperinci Lebih baik hidup melalui bookmarklets. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!