ajax를 사용하여 링크 미리보기를 통해 링크 내용을 확인하세요.
- 亚连원래의
- 2018-05-25 15:47:181578검색
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는 창 re
#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. 페이지의 모든 링크를 통해 각 링크에 onmouseover 이벤트 핸들러를 추가하세요. 이 이벤트 핸들러는 (아래에서 볼 수 있듯이) 대상 페이지를 읽고 (가능한) 방문자에게 미리보기를 표시합니다.
2.var allLinks = document.getElementsByTagName("a");
for (var i=0; i< allLinks.length;i++) {
allLinks[i].onmouseover = getPreview;
}
getPreview()에서 먼저 읽고 싶은 파일을 찾아야 하며, 이를 위해서는 이벤트의 속성을 살펴봐야 합니다. 방문자가 사용하는 브라우저에 따라 URL은 evt.target 또는 window.event.srcElement에 저장됩니다. URL이 있으면 나중에 사용할 수 있도록 마우스의 x 및 y 위치를 얻을 수 있습니다.
3.
if (evt) {
var url = evt.target;
}
else {
evt = window.event;
var url = evt.srcElement;
}
xPos = parseInt(evt.clientX);
yPos = parseInt(evt.clientY);
미리보기를 보여주실 예정이라면 다시 숨겨주셔야겠죠? hidePreview()의 기능은 미리보기 창의 가시성을 숨김으로 재설정하는 것입니다.
4.
var prevWin = document.getElementById("previewWin");
Ajax를 사용하여 파일을 읽은 후 이제 showContents() 함수를 입력합니다. 나중에 사용하기 위해 prevWin
에 PreviewWin 요소를 저장합니다. xhr.readyState가 4이면 미리보기를 표시할 차례입니다.
function hidePreview() {
document.getElementById ("previewWin").style.visibility = "hidden";
}
모든 것이 정상이라면 xhr.status는 200이고 prevWin.innerHTML에 넣으려는 데이터는 이미 xhr.responseText에 저장되어 있습니다. 문제가 발생하면 prevWin.innerHTML에 오류 메시지를 넣으세요.
이후에는 현재 마우스 x 및 y 좌표인 미리보기 창을 표시할 위치를 찾아야 합니다. 이 창은 팝업 창이므로 호출을 트리거한 현재 마우스 위치의 약간 아래 오른쪽(아래로 2픽셀, 오른쪽으로 2픽셀)에 배치합니다.
마지막으로 prevWin을 표시로 설정하고 마우스가 미리보기 창을 떠날 때 prevWin이 숨겨져야 함을 JavaScript에 알립니다.
위 내용은 제가 여러분을 위해 정리한 내용입니다. 앞으로 여러분에게 도움이 되기를 바랍니다.
관련 기사:
Ajax 비동기 제출 데이터 반환 값 줄 래핑 문제 예시 분석
위 내용은 ajax를 사용하여 링크 미리보기를 통해 링크 내용을 확인하세요.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!