Heim > Artikel > Web-Frontend > Verwenden Sie Ajax, um eine Vorschau des Links anzuzeigen und den Inhalt des Links anzuzeigen
Verwenden Sie Ajax, um eine Vorschau des Links anzuzeigen und den Inhalt des Links anzuzeigen
- 亚连Original
- 2018-05-25 15:47:181525Durchsuche
Verwenden Sie CSS, um den Stil des Vorschau-Popup-Fensters festzulegen, verwenden Sie JavaScript, um Serveranfragen zu stellen und das Popup-Fenster anzuzeigen. Freunde in Not können darauf verweisen
Sehen Sie sich zunächst den Implementierungscode an
HTML-Codeteil
<!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>
Dieses CSS legt den Stil des Vorschau-Popups fest
#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;
}
Dieses JavaScript veranlasst die Serveranfrage und zeigt das Popup-Fenster an
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;
}
Dies ist der Inhalt der initAll()-Funktion, die alle Links auf der Seite durchläuft und für jeden Link einen Onmouseover-Ereignishandler hinzufügt . Dieser Event-Handler liest (wie Sie unten sehen werden) die Zielseite und zeigt (möglichen) Besuchern eine Vorschau an.
2.
if (evt) {
var url = evt.target;
}
else {
evt = window.event;
var url = evt.srcElement;
}
xPos = parseInt(evt.clientX);
yPos = parseInt(evt.clientY);
In getPreview() müssen Sie zunächst herausfinden, welche Datei Sie lesen möchten. Dazu müssen Sie sich die Datei ansehen Attribute der Veranstaltung. Abhängig vom Browser, den der Besucher verwendet, wird die URL in evt.target oder window.event.srcElement gespeichert. Sobald Sie die URL haben, können Sie die X- und Y-Position der
-Maus zur späteren Verwendung abrufen.
function hidePreview() {
document.getElementById ("previewWin").style.visibility = "hidden";
}
Wenn Sie vorhaben, die Vorschau anzuzeigen, müssen Sie sie doch wieder ausblenden, oder? Die Funktion hidePreview() besteht darin, die Sichtbarkeit des Vorschaufensters auf ausgeblendet zurückzusetzen.
4.
var prevWin = document.getElementById("previewWin");
if (xhr.readyState == 4) {
Nachdem Sie Ajax zum Lesen der Datei verwendet haben, geben Sie nun showContents() ein. Funktion. Wir speichern das PreviewWin-Element zur späteren Verwendung in prevWin
. Wenn xhr.readyState 4 ist, ist es Zeit, die Vorschau anzuzeigen.
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;
Wenn alles in Ordnung ist, dann ist xhr.status 200 und die Daten, die wir in prevWin.innerHTML einfügen möchten, haben wurde in xhr.responseText gespeichert. Wenn etwas schief geht, fügen Sie eine Fehlermeldung in prevWin.innerHTML ein.
Danach müssen Sie herausfinden, wo Sie das Vorschaufenster anzeigen möchten, nämlich die aktuellen X- und Y-Koordinaten der Maus. Bei diesem Fenster handelt es sich um ein Popup. Platzieren Sie es also etwas weiter unten und rechts von der aktuellen Mausposition, die den Aufruf ausgelöst hat (2 Pixel nach unten und 2 Pixel nach rechts).
Zuletzt setzen Sie prevWin auf sichtbar und teilen Sie JavaScript mit, dass prevWin ausgeblendet werden soll, wenn die Maus das Vorschaufenster verlässt.
Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.
Verwandte Artikel:
SSH Online Mall verwendet Ajax, um die asynchrone Überprüfung des Benutzernamens abzuschließenAjax asynchrone Übermittlung Beispielanalyse von Zeilenumbruchproblem des DatenrückgabewertsAnalyse des Reihenfolgeproblems der Rückgabe von Daten in einer Ajax-Anfrage
Das obige ist der detaillierte Inhalt vonVerwenden Sie Ajax, um eine Vorschau des Links anzuzeigen und den Inhalt des Links anzuzeigen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!