Verwenden Sie Ajax, um eine Vorschau des Links anzuzeigen und den Inhalt des Links anzuzeigen-js-Tutorial-php.cn

Verwenden Sie Ajax, um eine Vorschau des Links anzuzeigen und den Inhalt des Links anzuzeigen

亚连

Freigeben： 2018-05-25 15:47:18

Original

1634 Leute haben es durchsucht

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>

Nach dem Login kopieren

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;
}

Nach dem Login kopieren

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&#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;
}
}

Nach dem Login kopieren

Analyse:

var allLinks = document.getElementsByTagName("a");
for (var i=0; i< allLinks.length;i++) {
allLinks[i].onmouseover = getPreview;
}

Nach dem Login kopieren

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);

Nach dem Login kopieren

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";
}

Nach dem Login kopieren

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;

Nach dem Login kopieren

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ßen

Ajax asynchrone Übermittlung Beispielanalyse von Zeilenumbruchproblem des Datenrückgabewerts

Analyse 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!