Maison >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

亚连original: 2018-05-25 15:47:181610parcourir

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&#39;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 :

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.

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.

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.

Articles Liés

Voir plus