Meilleur vivant à travers des signets

Points de base

• L'applet de signets est un petit code JavaScript intégré dans les signets de navigateur qui améliorent les fonctionnalités d'un navigateur Web et simplifient le flux de travail des développeurs Web.
• L'applet Bookmark propose un large éventail d'utilisations, des tâches de navigation simples aux opérations plus complexes, telles que la modification du contenu de la page, l'analyse de la structure de la page et même l'automatisation des tâches sur le site Web.
• Bien que les applets de signet sont généralement sûrs et fiables, ils peuvent provoquer des conflits d'espace de noms. Ce problème peut être évité en créant des fonctions anonymes avec sa propre portée variable en tant qu'applications de signets.
• Pour les applets de signets complexes, il existe un moyen de contourner la limite de longueur des signets dans certains navigateurs. L'implémentation réelle de l'applet de signets peut être hébergée sur un serveur Web en tant que fichier .js externe, tandis que l'applet de signet peut contenir un talon de chargement pour charger le reste des scripts.

L'applet Bookmark est un moyen facile d'ajouter des fonctionnalités à votre navigateur Web et peut être un ajout utile au flux de travail des développeurs Web. Dans cet article, je vais souligner quelques applications de signets utiles, fournir des conseils sur la création de vos propres applets de signets et démontrer des techniques avancées pour tirer le meilleur parti de ces outils puissants. Les applets de signets sont de courts extraits de code javascript intégrés dans les signets de navigateur. Lorsqu'un signet est sélectionné, le code JavaScript est exécuté. MAGICALEMENT, cette exécution a lieu dans le contexte de la page actuelle . L'applet Bookmark peut accéder au modèle d'objet de document complet de la page et peut les modifier et utiliser les informations pour démarrer une nouvelle fenêtre ou rediriger le navigateur vers un autre site. Si vous n'avez jamais essayé d'utiliser l'applet de signets auparavant, il est recommandé de l'essayer avant de lire le reste de cet article. Www.bookmarklets.com et www.favelets.com offrent une grande collection d'applications de signets, et Jesse Ruderman possède une collection d'applications de signets sur www.squarefree.com/bookmarklets. L'applet Bookmark de développement Web de Jesse devrait en particulier être un ajout incontournable au navigateur de tout développeur Web. Les applets de signets conviennent à tous les navigateurs modernes qui prennent en charge JavaScript, mais certains navigateurs sont plus sympathiques que d'autres. Internet Explorer 6 pour Windows a une limite de taille de signet de budget de 508 caractères ennuyeuse, qui limite gravement la portée des applets de signets à la disposition de ce navigateur, bien que la technologie que je couvrira plus tard offre un remède partiel. Pour tirer le meilleur parti de l'applet de signets, je vous recommande d'utiliser un navigateur basé à Mozilla, comme l'excellent Firefox, qui est également livré avec de nombreux outils utiles pour aider à développer l'applet de signets. Cependant, l'un des charmes du développement d'applet de signets est que le problème du croisement qui afflige souvent le développement grave JavaScript peut être évité: il n'y a aucun problème à développer des applets en signet pour un navigateur spécifique (en particulier les applets en signets utilisés par les individus), afin que les développeurs puissent réellement faire tout ce que le navigateur leur permet de faire.

Variants de l'applet de signets communs

Si vous avez parcouru l'un des sites mentionnés ci-dessus, vous devriez avoir une idée de la vaste gamme de fonctionnalités que les applets de signets peuvent offrir. L'applet de signet de signet le plus simple et le plus courant est l'applet de signet de navigation simple, qui prend l'URL de la page actuelle et la transmet à un autre site. Un exemple classique est l'applet de signet de vérification, qui redirige les utilisateurs vers le service de vérification HTML ou CSS en ligne sur la page actuelle. Ces applets de signets sont très simples à créer, mais peuvent être adaptés à certaines utilisations très utiles. J'aime vraiment créer l'applet d'évacuation de cette page pour les sites Web alimentés par un système de gestion de contenu basé sur le Web. Beaucoup de ces systèmes intégrent les ID dans les URL de la page du site public, qui correspondent directement aux ID utilisés dans les URL de formulaire utilisé dans le système de gestion du site pour modifier le contenu de cette page. La modification de cette page Bookmark Applet extrait l'URL de la page actuelle et l'utilise pour rediriger immédiatement les utilisateurs vers l'interface d'édition de la page. Par exemple, imaginez un site avec l'URL suivante:

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

Le site dispose également d'une interface de gestion protégé par mot de passe, qui fournit l'interface "Modifier la page" à l'adresse suivante:

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

L'applet "Modifier cette page" du site ci-dessus peut être implémenté comme ceci:

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

Ce concept peut être considérablement élargi si vous avez un certain contrôle sur le système de gestion de contenu que vous utilisez sur votre site. Par exemple, dans un site où l'ID interne d'un article n'est pas exposé dans une URL, vous pouvez à la place fournir l'ID dans la balise HTML Meta, qui peut ensuite être fournie à l'applet de signet de modification de cette page via le DOM. De nombreux applications de signets modifient la page actuelle d'une manière ou d'une autre. Les exemples courants incluent les applications de signets pour "éliminer" le contenu ennuyeux, tels que les animations flash indésirables, et même les images qui redimensionnent à des tailles couramment utilisées pour les bannières publicitaires. Ceux-ci peuvent être intéressants, mais sont généralement limités par la nécessité d'activer manuellement chaque fois que la page est chargée. Ce qui est plus utile, c'est une applet de signet qui aide les développeurs Web à analyser la structure des pages et même à modifier la structure des pages ("en temps réel"). Mes applets préférés de ce type sont le "style de test" de Jesse Ruderman, le "style d'édition" et "Ancestor" de sa collection de développement Web. Ce dernier montre la hiérarchie des éléments HTML menant à la section de page sous le curseur de la souris, qui est utile pour déterminer comment appliquer CSS à la page. Les deux premiers permettent au CSS de la page actuelle d'être modifié "en temps réel", fournissant ainsi des commentaires instantanés sur les modifications de conception potentielles. Mon applet de signet de drag de Mozilla fait chaque image non-fond de la page "glisserable", qui peut également être utile lorsque vous envisagez des ajustements de la conception de la page. Une astuce JavaScript utile mais souvent négligée est que toute la page HTML peut être intégrée dans une applet de signet. Essayez de saisir ce qui suit directement dans la barre d'URL du navigateur:

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

Le navigateur doit afficher le HTML rendu dans la chaîne. Il le fait car la chaîne est évaluée comme une expression, et le résultat est ensuite affiché dans la fenêtre du navigateur actuel. La même astuce peut même être utilisée pour transformer votre navigateur en une calculatrice trop spécifiée:

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

Parfois, il peut être utile d'écrire des applets de signets qui intègrent des pages entières de cette manière, surtout s'ils nécessitent une interface utilisateur plus complexe que les cases simples Confirm () et invite ().

Entrée du texte auxiliaire

Je passe beaucoup de temps en ligne à regarder la boîte TextArea. Les trois blogs que j'ai mis à jour sont maintenus via TextArea, tout comme les sites que je développe au travail et divers forums en ligne auxquels je participe. TextArea est partout. Ils sont également loin de la meilleure façon de traiter le texte, en particulier par rapport au logiciel de rédacteur de texte dédié. Les applications de signets peuvent rendre la manutention de textaas beaucoup moins douloureuse et leur fournir des fonctionnalités supplémentaires utiles. Mon exemple préféré de l'applet de signets améliorés de TextArea est un autre de Jesse Ruderman: Blogated XML Avantages - Une applet de signet Mozilla / Firefox qui vérifie si le texte de chaque Textarea sur la page est en conséquence de la couleur d'arrière-plan de la Textarea. Ceci est utile pour capturer des erreurs simples dans XHTML avant de la publier sur le site. Jesse a également un ensemble d'applications de signets de vérification HTML qui utilisent le validateur WDG pour vérifier la syntaxe des fragments HTML dans TextArea. Un autre outil que j'utilise souvent est mon extension l'applet de signets HTML HTML. Il applique une série de transformations simples au texte dans TextArea:

1. Les blocs de texte séparés les uns des autres par des lignes vides sont enveloppés de marques de paragraphe
2. Convertir les lignes commençant par le symbole = #### Title
3. Lignes commençant par * devenir une liste à puces

Exemple:

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

devient:

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

• Liste 1
• Liste 2

La version plus courte convient à IE. Cette version sacrifie le support de titre pour s'adapter à la limite de 508 caractères: sténographie HTML étendue, c'est-à-dire. Abréviation HTML étendue:

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

Abréviation HTML étendue IE:

javascript:1 + 4;

Le code source non expliqué (avant que l'espace ne soit supprimé) ressemble à ceci:

<code>= Header

Paragraph

* list 1
* list 2</code>

Tool de création de l'applet de signets

Vous pouvez créer des applets de signets en utilisant uniquement un éditeur de texte - ou, si vous êtes très confiant, vous pouvez les taper directement dans le nouveau champ de signets de votre navigateur. Cependant, pour le contenu plus complexe qu'une simple applet de signet de navigation, il est logique d'utiliser des outils dédiés. Si vous utilisez Firefox, vous pouvez déjà accéder à des aides utiles de création d'applet de signets. La console JavaScript de Firefox est un précieux outil de débogage. Les applications de signet de Shell Bookmark de Jesse Ruderman et de Mozilla fournissent une invite JavaScript interactive attachée au contexte actuel de la page, un excellent moyen d'essayer de nouvelles technologies avant de les soumettre à un éditeur de texte. Bien que les applets de signets ne puissent pas contenir des pauses de ligne, le code source doit être en retrait pour avoir écrit plus de quelques instructions. Mon applet Bookmark de supprimer Newline (ci-dessous) est un outil pour supprimer les onglets, les Newlines et plusieurs espaces des blocs de code JavaScript. Dans de nombreux cas, c'est exactement tout ce que vous devez faire pour créer une applet de signet à partir d'un simple bloc de code, bien que vous ne vous souveniez pas de résilier chaque ligne avec un point-virgule avant de vous convertir. L'applet Bookmark est également un exemple de pages HTML intégrées dans l'applet de signets. Supprimer les pauses de ligne:

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

Évitez les conflits de portée variable

Un problème potentiel introduit par les applications de signets est le conflit d'espace de noms: que se passe-t-il si votre applet de signet utilise ou redéfinit les variables que les autres scripts de la page utilisent déjà? Une technique pour éviter ce problème consiste à utiliser des noms de variables aléatoires qui ont peu de chances d'avoir été utilisé, mais cela rendra le code d'applet de signet plus difficile à lire et augmentera la longueur inutile de l'applet de signets. Une meilleure solution consiste à créer des fonctions anonymes avec sa propre portée variable en tant qu'applet de signet. Voici comment cela fonctionne:

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

La fonction () {} partie ici est une fonction anonyme - une fonction dont le nom n'est pas déclaré. En entourant la fonction entre parenthèses et en ajoutant () à la fin, la fonction sera exécutée une fois immédiatement après la création, c'est-à-dire au moment où l'applet de signet est activé. Tant que les variables dans le corps de la fonction anonyme sont déclarées avec le mot-clé "var", elles sont confinées à la portée de la fonction et n'interfèrent pas avec les variables avec le même nom dans le reste du document. Grâce à la fonction de fonction de JavaScript, vous pouvez même déclarer d'autres fonctions dans des fonctions anonymes sans les ajouter à la portée globale du document.

Ajouter les scripts plus longs

J'ai mentionné plus tôt qu'il existe un moyen de contourner la limite d'Internet Explorer sur la longueur des signets. Cette approche permet également d'écrire des applications de signets en JavaScript en retrait standard sans avoir à garder l'intégralité du script sur une seule ligne, ce qui en fait une technique utile pour les applications de signets plus complexes implémentées par n'importe quel navigateur. L'astuce consiste à héberger l'implémentation réelle de l'applet de signets en tant que fichier .js externe sur un serveur Web. L'applet Bookmark doit alors inclure le code "Stub" utilisé pour charger le reste des scripts - cela peut être facilement atteint avec une limite de 508 caractères. Ce qui suit est le mini code de programme qui charge les signets de talon, les retraits de lisibilité:

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

Après avoir supprimé l'espace, le code ci-dessus (moins l'URL de script externe) atteint 193 caractères. Ce code présente un inconvénient: il ne fonctionne pas avec la version Macintosh IE5. Si la prise en charge de la version Macintosh IE5 est importante pour votre applet Bookmark, Liorean a également une version étendue du talon de charge qui utilise la détection du navigateur pour satisfaire ce navigateur en même temps.

lecture complémentaire

La meilleure façon de connaître les applications de signets est de visualiser les applets de signets écrits par d'autres:

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

J'espère que cette navigation rapide de l'applet Bookmark vous inspirera pour essayer de créer votre propre applet de signet.

FAQ sur les applets de signet

Quelle est l'applet de signets? Comment fonctionnent-ils?

L'applet de signets est un petit extrait de code javascript stocké dans une URL dans un signet de navigateur Web. Lorsque vous cliquez sur un signet, le code JavaScript s'exécute sur la page actuelle au lieu de charger la nouvelle page. Cela vous permet d'ajouter de nouvelles fonctionnalités à votre site Web, d'automatiser les tâches répétitives et même de jouer à des jeux sans installer de logiciel ou d'extensions.

Comment créer une applet de signets?

La création d'une applet de signets est aussi simple que la création d'un signet. Au lieu d'entrer dans une URL, vous entrez un morceau de code JavaScript. Ce code est exécuté lorsque vous cliquez sur un signet. Vous pouvez écrire votre propre code ou trouver des applications de signets pré-faites en ligne.

L'applet de signets est-il sûr?

Les applications de signets sont généralement sûres et fiables car elles s'exécutent dans votre navigateur et ne peuvent pas accéder au système de fichiers de votre ordinateur. Cependant, comme n'importe quel code, ils peuvent être utilisés avec malveillance. Assurez-vous d'utiliser uniquement des applications de signets à partir de sources de confiance et de comprendre les fonctionnalités du code avant de l'utiliser.

Puis-je utiliser l'applet Bookmark sur un site Web?

Théoriquement, l'applet de signets peut être utilisé sur n'importe quel site Web. Cependant, certains sites Web peuvent avoir mis en œuvre des mesures de sécurité pour empêcher les applications de signets de fonctionner. De plus, la fonctionnalité de l'applet de signets peut dépendre de la structure du site Web qu'il utilise.

Pourquoi mon applet de signet ne fonctionne-t-il pas?

Il peut y avoir plusieurs raisons pour lesquelles votre applet de signet ne fonctionne pas. Les sites Web sur lesquels vous essayez de les utiliser peuvent avoir mis en œuvre des mesures de sécurité pour empêcher les applications de signets de fonctionner. Le code de l'applet Bookmark peut être expiré ou incompatible avec le site Web. Ou il peut y avoir des erreurs dans le code lui-même.

Comment déboguer l'applet de signets?

Les applets de signet de débogage peuvent être un peu délicats car ils n'ont pas d'environnement de débogage traditionnel. Cependant, vous pouvez utiliser les outils de développeur du navigateur pour vérifier le code et afficher tous les messages d'erreur. Vous pouvez également essayer d'exécuter le code dans la console du navigateur pour voir si cela fonctionne là-bas.

Puis-je utiliser l'applet Bookmark sur mon appareil mobile?

Oui, vous pouvez utiliser l'applet Bookmark sur votre appareil mobile. Cependant, le processus d'ajouter et de les utiliser peut être plus compliqué que sur un navigateur de bureau. Vous devrez peut-être mettre en signet le code JavaScript manuellement, car les navigateurs mobiles ne prennent généralement pas en charge la méthode de glisser-déposer utilisée sur les navigateurs de bureau.

Puis-je partager des applets de signets avec d'autres?

Oui, vous pouvez partager les applications de signets avec d'autres. Envoyez-leur simplement du code JavaScript et des instructions sur la façon de l'ajouter à leurs signets. Cependant, n'oubliez pas de partager uniquement des applications de signets à partir de sources de confiance et vous comprenez les fonctionnalités du code.

Puis-je utiliser l'applet Bookmark pour modifier l'apparence du site Web?

Oui, vous pouvez utiliser l'applet Bookmark pour modifier l'apparence du site Web. Cela se fait en exploitant le CSS du site Web. Cependant, ces modifications ne sont que temporaires et ne seront perdues après avoir rafraîchi la page.

Puis-je utiliser l'applet Bookmark pour effectuer automatiquement des tâches sur le site Web?

Oui, vous pouvez utiliser l'applet Bookmark pour effectuer automatiquement des tâches sur le site Web. Cela peut être quelque chose, de remplir le formulaire à cliquer sur un bouton. Cependant, la fonctionnalité de l'applet de signets dépendra de la structure du site Web et des tâches que vous souhaitez effectuer automatiquement.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!