用ajax实现预览链接可以看到链接的内容
用CSS设置预览弹出窗口的样式、用JavaScript进行服务器请求并且显示弹出窗口,需要的朋友可以参考下
首先先看实现代码
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>
这个CSS设置预览弹出窗口的样式
#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;
}这个JavaScript进行服务器请求并且显示弹出窗口
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;
}
}分析：
1.
var allLinks = document.getElementsByTagName("a");
for (var i=0; i< allLinks.length;i++) {
allLinks[i].onmouseover = getPreview;
}这是initAll()函数的内容，它遍历页面上的所有链接，并且在每个链接上添加onmouseover事件
处理程序。这个事件处理程序将（你下面将看到的）读取目标页面并且向（可能的）访问者显示预览。
2.
if (evt) {
var url = evt.target;
}
else {
evt = window.event;
var url = evt.srcElement;
}
xPos = parseInt(evt.clientX);
yPos = parseInt(evt.clientY);在getPreview()中，首先需要查明要读取哪个文件，这就要查看事件的属性。根据访问者使用的
浏览器不同，URL保存在evt.target或window.event.srcElement中。获得了URL之后，就可以获得
鼠标的x和y位置供以后使用。
3.
function hidePreview() {
document.getElementById ("previewWin").style.visibility = "hidden";
}如果打算显示预览，将需要再次隐藏它，对吗？hidePreview()函数的作用是将预览窗口的可见性
重新设置为隐藏。
4.
var prevWin = document.getElementById("previewWin");
if (xhr.readyState == 4) {
使用Ajax读取文件之后，现在进入了showContents()函数。我们将previewWin元素存储在prevWin
中以备后用。当xhr.readyState为4时，就该显示预览了。
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;如果一切正常，那么xhr.status为200，而且我们希望放在prevWin.innerHTML中的数据已经存
在于xhr.responseText中了。如果出现了问题，就在prevWin.innerHTML中放一个错误消息。
在此之后，需要查明要在哪里显示预览窗口，也就是当前的鼠标x和y坐标。这个窗口是一个弹
出窗口，所以将它放在触发该调用的当前鼠标位置向下和向右一点儿的地方（向下和向右各2像素）。
最后，将prevWin设置为可见，并且让JavaScript知道，当鼠标离开预览窗口时，应该隐藏prevWin。
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
以上是用ajax实现预览链接可以看到链接的内容的详细内容。更多信息请关注PHP中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
如何使用磁力链接
Feb 18, 2024 am 10:02 AM
磁力链接是一种用于下载资源的链接方式，相比传统的下载方式更为便捷和高效。使用磁力链接可以通过点对点的方式下载资源，而不需要依赖中介服务器。本文将介绍磁力链接的使用方法及注意事项。一、什么是磁力链接磁力链接是一种基于P2P（Peer-to-Peer）协议的下载方式。通过磁力链接，用户可以直接连接到资源的发布者，从而完成资源的共享和下载。与传统的下载方式相比，磁
115://开头的链接怎么下载？下载方法介绍
Mar 14, 2024 am 11:58 AM
最近有很多用户都在问小编，115://开头的链接怎么下载？想要下载115://开头的链接需要借助115浏览器，大家下载好115浏览器后，再来看看下面小编整理好的下载教程吧。 115://开头的链接下载方法介绍 1、登录115.com，下载115浏览器并安装。 2、在115浏览器地址栏输入：chrome://extensions/，进入扩展中心，搜索Tampermonkey，安装对应插件。 3、在115浏览器地址栏输入： 油猴脚本：https://greasyfork.org/en/
如何获取微信视频号链接？微信视频号怎么添加商品链接？
Mar 22, 2024 pm 09:36 PM
微信视频号作为微信生态系统的一部分，已经逐渐成为内容创作者和商家的重要推广工具。在这个平台上获取视频号链接对于分享和传播内容至关重要。下文将详细介绍如何获取微信视频号链接，以及如何在视频号中添加商品链接，提升内容的传播效果。一、如何获取微信视频号链接？在微信视频号中发布视频后，系统会自动创建一个视频链接。作者可以在发布后复制该链接，方便进行分享和传播。登录微信视频号后，您可以浏览自己的视频号主页。在主页上，每个视频都附有相应的链接，方便您直接复制或分享。3.搜索视频号：在微信搜索框中输入视频号名
PHP 与 Ajax：构建一个自动完成建议引擎
Jun 02, 2024 pm 08:39 PM
使用PHP和Ajax构建自动完成建议引擎：服务器端脚本：处理Ajax请求并返回建议(autocomplete.php)。客户端脚本：发送Ajax请求并显示建议(autocomplete.js)。实战案例：在HTML页面中包含脚本并指定search-input元素标识符。
解决jQuery AJAX请求遇到403错误的方法
Feb 20, 2024 am 10:07 AM
标题：解决jQueryAJAX请求出现403错误的方法及代码示例403错误是指服务器禁止访问资源的请求，通常会导致出现这个错误的原因是请求缺少权限或者被服务器拒绝。在进行jQueryAJAX请求时，有时候会遇到这种情况，本文将介绍如何解决这个问题，并提供代码示例。解决方法：检查权限：首先要确保请求的URL地址是正确的，同时验证是否有足够的权限来访问该资
解决jQuery AJAX请求403错误的方法
Feb 19, 2024 pm 05:55 PM
jQuery是一个流行的JavaScript库，用于简化客户端端的开发。而AJAX则是在不重新加载整个网页的情况下，通过发送异步请求和与服务器交互的技术。然而在使用jQuery进行AJAX请求时，有时会遇到403错误。403错误通常是服务器禁止访问的错误，可能是由于安全策略或权限问题导致的。在本文中，我们将讨论如何解决jQueryAJAX请求遭遇403错误
视频号挂链接需要什么条件？视频号带货怎么挂链接？
Mar 07, 2024 pm 01:13 PM
随着短视频平台的盛行，越来越多的创作者开始利用视频号来创作和推广内容。视频号不仅可以展示个人才能，还可以通过带货链接来实现商业变现。但是，要在视频号中添加链接，必须符合一定的条件。一、视频号挂链接需要什么条件？视频号认证是在视频号中添加链接的前提条件。目前，主要的短视频平台如抖音、快手等都提供认证服务，主要包括个人认证和机构认证两种类型。个人认证需要提交真实身份信息，而机构认证则需要提供相关企业或组织的认证材料。完成认证后，用户可以在视频号中添加链接，提升账号的可信度和权威性。视频号挂链接的一个
可以删除downloads文件夹吗？
Feb 19, 2024 pm 03:38 PM
downloads可以删除吗近年来，随着数字化时代的来临，我们生活中出现了越来越多的数字化产品和服务。而随之而来的，就是我们对于数字化内容的需求与日俱增。在日常生活和工作中，我们经常需要下载各种各样的文件，如文档、图片、音频和视频等等。而这些下载的文件，通常都被保存在一个名为“downloads”（下载）的文件夹之中。然而，随着时间的推移，我们经常会发现，“
