Use ajax to preview the link to see the content of the link
Use CSS to set the style of the preview pop-up window, use JavaScript to make server requests and display the pop-up window. Friends in need can refer to it
First look at the implementation code
html code part
<!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>
This CSS sets the style of the preview pop-up window
#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;
}This JavaScript makes a server request and Show pop-up window
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;
}
}Analysis:
1.
var allLinks = document.getElementsByTagName("a");
for (var i=0; i< allLinks.length;i++) {
allLinks[i].onmouseover = getPreview;
}This is the content of the initAll() function, which iterates through all links on the page and adds an onmouseover event
handler on each link. This event handler will (as you'll see below) read the target page and display a preview to (possible) visitors.
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(), you first need to find out which file you want to read, so you need to check the properties of the event . Depending on the
browser used by the visitor, the URL is saved in evt.target or window.event.srcElement. Once you have the URL, you can get the x and y position of the
mouse for later use.
3.
function hidePreview() {
document.getElementById ("previewWin").style.visibility = "hidden";
}If you plan to show the preview, you will need to hide it again, right? The function of the hidePreview() function is to reset the visibility of the preview window to hidden.
4.
var prevWin = document.getElementById("previewWin");
if (xhr.readyState == 4) {
After using Ajax to read the file, now enter the showContents() function . We store the previewWin element in prevWin
for later use. When xhr.readyState is 4, it's time to show the preview.
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; is stored in xhr.responseText. If something goes wrong, put an error message in prevWin.innerHTML.
After this, you need to find out where you want to display the preview window, which is the current mouse x and y coordinates. This window is a pop-up window, so place it slightly down and to the right of the current mouse position that triggered the call (2 pixels down and 2 pixels to the right).
Finally, set prevWin to visible and let JavaScript know that prevWin should be hidden when the mouse leaves the preview window.
The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.
Related articles:
SSH online mall uses ajax to complete asynchronous verification of user namesAjax asynchronous submission Example analysis of line wrapping problem of data return valueAnalysis of order problem of returning data in ajax request
The above is the detailed content of Use ajax to preview the link to see the content of the link. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1662
14
1419
52
1313
25
1262
29
1235
24
How to use magnet links
Feb 18, 2024 am 10:02 AM
Magnet link is a link method for downloading resources, which is more convenient and efficient than traditional download methods. Magnet links allow you to download resources in a peer-to-peer manner without relying on an intermediary server. This article will introduce how to use magnet links and what to pay attention to. 1. What is a magnet link? A magnet link is a download method based on the P2P (Peer-to-Peer) protocol. Through magnet links, users can directly connect to the publisher of the resource to complete resource sharing and downloading. Compared with traditional downloading methods, magnetic
How to download links starting with 115://? Download method introduction
Mar 14, 2024 am 11:58 AM
Recently, many users have been asking the editor, how to download links starting with 115://? If you want to download links starting with 115://, you need to use the 115 browser. After you download the 115 browser, let's take a look at the download tutorial compiled by the editor below. Introduction to how to download links starting with 115:// 1. Log in to 115.com, download and install the 115 browser. 2. Enter: chrome://extensions/ in the 115 browser address bar, enter the extension center, search for Tampermonkey, and install the corresponding plug-in. 3. Enter in the address bar of 115 browser: Grease Monkey Script: https://greasyfork.org/en/
How to get the WeChat video account link? How to add product links to WeChat video account?
Mar 22, 2024 pm 09:36 PM
As part of the WeChat ecosystem, WeChat video accounts have gradually become an important promotion tool for content creators and merchants. Getting links to video accounts on this platform is crucial for sharing and disseminating content. The following will introduce in detail how to obtain the WeChat video account link and how to add product links to the video account to improve the dissemination effect of the content. 1. How to get the WeChat video account link? After posting a video on your WeChat video account, the system will automatically create a video link. Authors can copy the link after publishing to facilitate sharing and dissemination. After logging in to your WeChat video account, you can browse the homepage of your video account. On the home page, each video is accompanied by a corresponding link so you can copy or share it directly. 3. Search video account: Enter the video account name in the WeChat search box
PHP and Ajax: Building an autocomplete suggestion engine
Jun 02, 2024 pm 08:39 PM
Build an autocomplete suggestion engine using PHP and Ajax: Server-side script: handles Ajax requests and returns suggestions (autocomplete.php). Client script: Send Ajax request and display suggestions (autocomplete.js). Practical case: Include script in HTML page and specify search-input element identifier.
How to solve the 403 error encountered by jQuery AJAX request
Feb 20, 2024 am 10:07 AM
Title: Methods and code examples to resolve 403 errors in jQuery AJAX requests. The 403 error refers to a request that the server prohibits access to a resource. This error usually occurs because the request lacks permissions or is rejected by the server. When making jQueryAJAX requests, you sometimes encounter this situation. This article will introduce how to solve this problem and provide code examples. Solution: Check permissions: First ensure that the requested URL address is correct and verify that you have sufficient permissions to access the resource.
What are the requirements for a video link? How to link the video account with goods?
Mar 07, 2024 pm 01:13 PM
With the popularity of short video platforms, more and more creators are beginning to use video accounts to create and promote content. Video accounts can not only showcase personal talents, but also realize commercial monetization through product links. However, to add a link to a video account, certain conditions must be met. 1. What are the requirements for a video link? Video account authentication is a prerequisite for adding links to your video account. Currently, major short video platforms such as Douyin and Kuaishou provide certification services, which mainly include two types: personal certification and institutional certification. Personal certification requires the submission of real identity information, while institutional certification requires the provision of certification materials from relevant companies or organizations. After completing the authentication, users can add links to their video accounts to enhance the credibility and authority of their accounts. One of the video link
Can I delete the downloads folder?
Feb 19, 2024 pm 03:38 PM
Can downloads be deleted? In recent years, with the advent of the digital age, more and more digital products and services have appeared in our lives. What follows is that our demand for digital content is increasing day by day. In our daily life and work, we often need to download a variety of files, such as documents, pictures, audios, videos, etc. These downloaded files are usually saved in a folder called "downloads". However, over time we often find that,"
How to solve jQuery AJAX request 403 error
Feb 19, 2024 pm 05:55 PM
jQuery is a popular JavaScript library used to simplify client-side development. AJAX is a technology that sends asynchronous requests and interacts with the server without reloading the entire web page. However, when using jQuery to make AJAX requests, you sometimes encounter 403 errors. 403 errors are usually server-denied access errors, possibly due to security policy or permission issues. In this article, we will discuss how to resolve jQueryAJAX request encountering 403 error
