interface Web
js tutoriel
Utilisez ajax pour prévisualiser le lien afin de voir le contenu du lien
Utilisez ajax pour prévisualiser le lien afin de voir le contenu du lien
Utilisez CSS pour définir le style de la fenêtre contextuelle d'aperçu, utilisez JavaScript pour effectuer des requêtes sur le serveur et afficher la fenêtre contextuelle. Les amis dans le besoin peuvent s'y référer
Premier coup d'œil au code d'implémentation.
partie de code HTML
<!DOCTYPE html> <html> <head> <title>Previewing Links</title> <link rel="stylesheet"href="script05.css" rel="external nofollow" > <script src="script05.js"></script> </head> <body> <h2>A Gentle Introduction to JavaScript</h2> <ul> <li><a href="jsintro/2000-08.html" rel="external nofollow" >August column</a></li> <li><a href="jsintro/2000-09.html" rel="external nofollow" >September column</a></li> <li><a href="jsintro/2000-10.html" rel="external nofollow" >October column</a></li> <li><a href="jsintro/2000-11.html" rel="external nofollow" >November column</a></li> </ul> <p id="previewWin"> </p> </body> </html>
Ce CSS définit le style de la fenêtre contextuelle d'aperçu
#previewWin {
background-color: #FF9;
width: 400px;
height: 100px;
font: .8em arial, helvetica, sans-serif;
padding: 5px;
position: absolute;
visibility: hidden;
top: 10px;
left: 10px;
border: 1px #CC0 solid;
clip: auto;
overflow: hidden;
}
#previewWin h1, #previewWin h2 {
font-size: 1.0em;
}Ce JavaScript Faire une requête serveur et afficher une fenêtre pop-up
window.onload = initAll;
var xhr = false;
var xPos, yPos;
function initAll() {
var allLinks = document.getElementsByTagName("a");
for (var i=0; i< allLinks.length; i++) {
allLinks[i].onmouseover = getPreview;
}
}
function getPreview(evt) {
if (evt) {
var url = evt.target;
}
else {
evt = window.event;
var url = evt.srcElement;
}
xPos = parseInt(evt.clientX);
yPos = parseInt(evt.clientY);
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
}
else {
if (window.ActiveXObject) {
try {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e) { }
}
}
if (xhr) {
xhr.onreadystatechange = showContents;
xhr.open("GET", url, true);
xhr.send(null);
}
else {
alert("Sorry, but I couldn't create an XMLHttpRequest");
}
}
function hidePreview() {
document.getElementById("previewWin").style.visibility = "hidden";
}
function showContents() {
var prevWin = document.getElementById("previewWin");
if (xhr.readyState == 4) {
if (xhr.status == 200) {
prevWin.innerHTML = xhr.responseText;
}
else {
prevWin.innerHTML = "There was a problem with the request " + xhr.status;
}
prevWin.style.top = yPos+2 + "px";
prevWin.style.left = xPos+2 + "px";
prevWin.style.visibility = "visible";
prevWin.onmouseout = hidePreview;
}
}Analyse :
1.
var allLinks = document.getElementsByTagName("a");
for (var i=0; i< allLinks.length;i++) {
allLinks[i].onmouseover = getPreview;
}Voici le contenu de la fonction initAll(), qui parcourt tous les liens de la page et ajoute un gestionnaire d'événement onmouseover
sur chaque lien. Ce gestionnaire d'événements lira (comme vous le verrez ci-dessous) la page cible et affichera un aperçu aux (éventuels) visiteurs.
2.
if (evt) {
var url = evt.target;
}
else {
evt = window.event;
var url = evt.srcElement;
}
xPos = parseInt(evt.clientX);
yPos = parseInt(evt.clientY);Dans getPreview(), vous devez d'abord savoir quel fichier doit être lu, ce qui nécessite une visualisation les propriétés de l'événement. Selon le navigateur
utilisé par le visiteur, l'URL est enregistrée dans evt.target ou window.event.srcElement. Une fois que vous avez l'URL, vous pouvez obtenir la position x et y de la souris
pour une utilisation ultérieure.
3.
function hidePreview() {
document.getElementById ("previewWin").style.visibility = "hidden";
}Si vous prévoyez d'afficher l'aperçu, vous devrez le masquer à nouveau, n'est-ce pas ? La fonction de hidePreview() est de réinitialiser la visibilité de la fenêtre d'aperçu
sur cachée.
4.
var prevWin = document.getElementById("previewWin");
if (xhr.readyState == 4) {
Après avoir utilisé Ajax pour lire le fichier, entrez maintenant le showContents() fonction . Nous stockons l'élément previewWin dans prevWin
pour une utilisation ultérieure. Lorsque xhr.readyState vaut 4, il est temps d'afficher l'aperçu.
5.
if (xhr.status == 200) {
prevWin.innerHTML = xhr.responseText;
}
else {
prevWin.innerHTML = "There was a problem with the request " + xhr.status;
}
prevWin.style.top = yPos+2 + "px";
prevWin.style.left = xPos+2 +"px";
prevWin.style.visibility ="visible";
prevWin.onmouseout = hidePreview;Si tout va bien, alors xhr.status est 200 et nous voulons mettre prevWin.innerHTML Le les données ont été stockées
dans xhr.responseText. Si quelque chose ne va pas, mettez un message d'erreur dans prevWin.innerHTML.
Après cela, vous devez savoir où vous souhaitez afficher la fenêtre d'aperçu, qui correspond aux coordonnées x et y actuelles de la souris. Cette fenêtre est une popup, placez-la donc un peu en bas et à droite de la position actuelle de la souris qui a déclenché l'appel (2 pixels vers le bas et 2 pixels vers la droite).
Enfin, définissez prevWin sur visible et faites savoir à JavaScript que prevWin doit être masqué lorsque la souris quitte la fenêtre d'aperçu.
Le centre commercial en ligne SSH utilise ajax pour effectuer la vérification asynchrone du nom d'utilisateur
Soumission asynchrone Ajax Exemple d'analyse de problème de retour à la ligne de la valeur de retour des données
Analyse du problème de commande de retour des données dans la requête ajax
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!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Sujets chauds
Comment utiliser les liens magnétiques
Feb 18, 2024 am 10:02 AM
Le lien magnétique est une méthode de lien pour télécharger des ressources, qui est plus pratique et efficace que les méthodes de téléchargement traditionnelles. Les liens magnétiques vous permettent de télécharger des ressources de manière peer-to-peer sans recourir à un serveur intermédiaire. Cet article explique comment utiliser les liens magnétiques et à quoi il faut prêter attention. 1. Qu'est-ce qu'un lien magnétique ? Un lien magnétique est une méthode de téléchargement basée sur le protocole P2P (Peer-to-Peer). Grâce à des liens magnétiques, les utilisateurs peuvent se connecter directement à l'éditeur de la ressource pour finaliser le partage et le téléchargement des ressources. Par rapport aux méthodes de téléchargement traditionnelles, magnétique
Comment télécharger des liens commençant par 115:// ? Introduction à la méthode de téléchargement
Mar 14, 2024 am 11:58 AM
Récemment, de nombreux utilisateurs ont demandé à l'éditeur comment télécharger des liens commençant par 115:// ? Si vous souhaitez télécharger des liens commençant par 115://, vous devez utiliser le navigateur 115. Après avoir téléchargé le navigateur 115, jetons un œil au didacticiel de téléchargement compilé par l'éditeur ci-dessous. Introduction à la façon de télécharger des liens commençant par 115:// 1. Connectez-vous à 115.com, téléchargez et installez le navigateur 115. 2. Saisissez : chrome://extensions/ dans la barre d'adresse du navigateur 115, entrez dans le centre d'extensions, recherchez Tampermonkey et installez le plug-in correspondant. 3. Saisissez dans la barre d'adresse du navigateur 115 : Grease Monkey Script : https://greasyfork.org/en/
Mar 22, 2024 pm 09:36 PM
Faisant partie de l'écosystème WeChat, les comptes vidéo WeChat sont progressivement devenus un outil de promotion important pour les créateurs de contenu et les commerçants. Obtenir des liens vers des comptes vidéo sur cette plateforme est crucial pour le partage et la diffusion de contenu. Ce qui suit présentera en détail comment obtenir le lien du compte vidéo WeChat et comment ajouter des liens de produits au compte vidéo pour améliorer l'effet de diffusion du contenu. 1. Comment obtenir le lien du compte vidéo WeChat ? Après avoir publié une vidéo sur votre compte vidéo WeChat, le système créera automatiquement un lien vidéo. Les auteurs peuvent copier le lien après la publication pour faciliter le partage et la diffusion. Après vous être connecté à votre compte vidéo WeChat, vous pouvez parcourir la page d'accueil de votre compte vidéo. Sur la page d'accueil, chaque vidéo est accompagnée d'un lien correspondant afin que vous puissiez la copier ou la partager directement. 3. Rechercher un compte vidéo : saisissez le nom du compte vidéo dans la zone de recherche WeChat.
Quelles sont les exigences pour un lien vidéo ? Comment lier le compte vidéo aux biens ?
Mar 07, 2024 pm 01:13 PM
Avec la popularité des plateformes de vidéos courtes, de plus en plus de créateurs commencent à utiliser des comptes vidéo pour créer et promouvoir du contenu. Les comptes vidéo peuvent non seulement mettre en valeur les talents personnels, mais également réaliser une monétisation commerciale via des liens vers des produits. Cependant, pour ajouter un lien vers un compte vidéo, certaines conditions doivent être remplies. 1. Quelles sont les exigences pour un lien vidéo ? L'authentification du compte vidéo est une condition préalable à l'ajout de liens vers votre compte vidéo. Actuellement, les principales plateformes de vidéos courtes telles que Douyin et Kuaishou proposent des services de certification, qui comprennent principalement deux types : la certification personnelle et la certification institutionnelle. La certification personnelle nécessite la soumission d'informations d'identité réelles, tandis que la certification institutionnelle nécessite la fourniture de documents de certification provenant d'entreprises ou d'organisations compétentes. Après avoir terminé l'authentification, les utilisateurs peuvent ajouter des liens vers leurs comptes vidéo pour améliorer la crédibilité et l'autorité de leurs comptes. Un des liens vidéo
Comment résoudre l'erreur 403 rencontrée par la requête jQuery AJAX
Feb 20, 2024 am 10:07 AM
Titre : Méthodes et exemples de code pour résoudre les erreurs 403 dans les requêtes jQuery AJAX L'erreur 403 fait référence à une demande selon laquelle le serveur interdit l'accès à une ressource. Cette erreur se produit généralement parce que la demande manque d'autorisations ou est rejetée par le serveur. Lorsque vous effectuez des requêtes jQueryAJAX, vous rencontrez parfois cette situation. Cet article explique comment résoudre ce problème et fournit des exemples de code. Solution : Vérifiez les autorisations : assurez-vous d'abord que l'adresse URL demandée est correcte et vérifiez que vous disposez des autorisations suffisantes pour accéder à la ressource.
Comment résoudre l'erreur 403 de la requête jQuery AJAX
Feb 19, 2024 pm 05:55 PM
jQuery est une bibliothèque JavaScript populaire utilisée pour simplifier le développement côté client. AJAX est une technologie qui envoie des requêtes asynchrones et interagit avec le serveur sans recharger la page Web entière. Cependant, lorsque vous utilisez jQuery pour effectuer des requêtes AJAX, vous rencontrez parfois des erreurs 403. Les erreurs 403 sont généralement des erreurs d'accès refusé par le serveur, probablement en raison de problèmes de politique de sécurité ou d'autorisation. Dans cet article, nous verrons comment résoudre la requête jQueryAJAX rencontrant une erreur 403.
Comment créer un lien sur Doudian - Tutoriel sur le lien sur Doudian
Mar 06, 2024 am 08:40 AM
De nombreux amis ne savent toujours pas comment créer un lien sur Doudian, donc l'éditeur ci-dessous vous expliquera le tutoriel sur la façon de créer un lien sur Doudian. Si vous en avez besoin, dépêchez-vous et jetez un œil, je pense que cela sera utile à tout le monde. Étape 1 : Ouvrez d'abord le terminal informatique Doudian et entrez « Windows Product Management » dans la colonne de gauche, comme indiqué sur l'image. Étape 2 : Cliquez ensuite sur « Ajouter un produit » dans le coin supérieur droit, comme indiqué sur l'image. Étape 3 : Copiez et collez ensuite notre lien produit comme indiqué sur l'image. Étape 4 : Cliquez ensuite sur « Confirmer l'ajout », comme indiqué sur l'image. Étape 5 : Saisissez enfin l'introduction, les images et autres informations, puis cliquez sur « Confirmer » pour créer un lien sur Douyin, comme indiqué sur l'image. Ce qui précède est l'intégralité du contenu sur la façon d'ajouter des liens vers Doudian présenté par l'éditeur. J'espère que cela pourra être utile à tout le monde.
Comment obtenir des variables de la méthode PHP en utilisant Ajax ?
Mar 09, 2024 pm 05:36 PM
L'utilisation d'Ajax pour obtenir des variables à partir de méthodes PHP est un scénario courant dans le développement Web. Grâce à Ajax, la page peut être obtenue dynamiquement sans actualiser les données. Dans cet article, nous présenterons comment utiliser Ajax pour obtenir des variables à partir de méthodes PHP et fournirons des exemples de code spécifiques. Tout d’abord, nous devons écrire un fichier PHP pour gérer la requête Ajax et renvoyer les variables requises. Voici un exemple de code pour un simple fichier PHP getData.php :
