如何解决iframe 定位从光标处关闭
对于一个副项目，我正在构建一个扩展，当光标悬停在它上面时，它会提供任何链接的 iframe 预览。 hovering over a link at the top of a page 时一切正常，但页面向下滚动时出现问题。由于某种原因，iframe 将自身向上移动到预期位置： like this
我使用了鼠标悬停功能并使用了 e.pageX 和 e.pageY 并将该位置应用到 iframe 使用 iframe.style.top = e.pageY + 'px' 和 iframe.style.left = e.pageX +'px'。
// document.getElementById('activate').onclick = function (){
// }
var MOUSE_VISITED_CLASSNAME = 'crx_mouse_visited';
var prevDOM = null;
var iframe = document.createElement('iframe');
var p = document.createElement('p');
p.id = 'linky';
iframe.id = 'linky2'
// iframe.is="x-frame-bypass"
p.style.display = "inline-block";
past = true
function upTo(el,tagName) {
tagName = tagName.toLowerCase();
if (el.nodeName == "A") {
return el;
}
while (el && el.parentNode) {
el = el.parentNode;
if (el.tagName && el.tagName.toLowerCase() == tagName) {
return el;
}
console.log("TAG",el.tagName);
}
return null;
}
document.addEventListener('mousemove',function(e) {
console.log(e.pageX,e.pageY)
let srcElement = e.srcElement;
console.log(srcElement.result)
var x = upTo(srcElement,'A');
// if(x){
// console.log("BPOO",document.getElementById(srcElement.id));
// var x = srcElement.id;
// console.log(x);
// var el = document.getElementById(x).parentElement.nodeName;
// var link = document.getElementById(x).parentElement;
// console.log("AAA");
// console.log("ELELELLELE",el);
// }
// else{
// var el = "B";
// var link = srcElement;
// }
if (x == null && prevDOM != srcElement && srcElement.nodeName != 'SPAN' && srcElement.nodeName != 'A' && iframe != null && srcElement.nodeName != "IFRAME") {
past = true;
iframe.remove();
// p.remove();
console.log("REMOVE");
} else if (past && (srcElement.nodeName == 'A' || x != null)) {
if (prevDOM != null) {
prevDOM.classList.remove(MOUSE_VISITED_CLASSNAME);
}
srcElement.classList.add(MOUSE_VISITED_CLASSNAME);
prevDOM = srcElement;
console.info(srcElement.currentSrc);
console.log("AAAA");
console.log(srcElement.href);
var html = x.href;
console.log(html);
try {
document.body.appendChild(p);
// p.style.top = e.pageY + 'px'
// p.style.left = e.pageX + 'px'
// p.innerHTML = html;
console.log(e.pageX,e.pageY);
document.body.appendChild(iframe);
console.log("BOBO O")
console.log(e.clientX + 'px',e.clientY + 'px')
iframe.contentwindow.document.open();
iframe.contentwindow.document.write(html);
iframe.contentwindow.document.location.href = html;
iframe.contentwindow.document.close();
iframe.style.top = e.pageY + 'px'
iframe.style.left = e.pageX + 'px'
console.log("EEEEEEEEEEE",e.pageX + 'px',e.pageY + 'px');
console.log("IFRAMemmEME",iframe.style.left + 'px',iframe.style.top + 'px');
} catch (err) {
console.log("AAA");
}
past = false
console.log("BBB");
console.dir(srcElement);
}
},false);.crx_mouse_visited {
background-clip: #bcd5eb!important;
outline: 1px dashed #e9af6e!important;
}
iframe {
width: 800px;
height: 520px;
border: 1px solid black;
}
iframe {
zoom: 0.75;
-moz-transform: scale(0.75);
-moz-transform-origin: 0 0;
}
/*
.Box{
display: none;
width: 100%;
} */
/* a:hover + .Box,.Box:hover{
display: block;
position: relative;
z-index: 100;
} */
body {
min-height: 500px;
border: 1px solib blue;
}
#cursorText {
position: absolute;
border: 1px solid blue;
}
#linky {
position: absolute;
/* padding: 100px;
background-color: black;
margin: 100px; */
}
#linky2 {
position: absolute;
background-color: white;
/* -moz-transform: scale(0.45,0.45);
-webkit-transform: scale(0.45,0.45);
-o-transform: scale(0.45,0.45);
-ms-transform: scale(0.45,0.45); */
/* transform: scale(1,1); */
/* -moz-transform-origin: top left;
-webkit-transform-origin: top left;
-o-transform-origin: top left;
-ms-transform-origin: top left;
transform-origin: top left; */
/* padding: 100px;
background-color: black;
margin: 100px; */
}
#linky3 {
position: absolute;
background-color: white;
/* padding: 100px;
background-color: black;
margin: 100px; */
}<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<Meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>PointView</title>
<script src="popup.js"></script>
<link rel="stylesheet" href="main.css">
</head>
<body>
<button id="activate">activate</button>
<a id="AAA" href="https://play.typeracer.com/">aaa</a>
<p>fdsafd </p>
<p>dsfadsfasfas</p>
<p>fdsafasf fdfas</p>
<p>fdsfsadfsadffdsaf</p>
<br><br>
<br>
<a id="AAA" href="https://play.typeracer.com/">asdasdsadsaaaa</a>
<br>
<a id="AAA" href="https://play.typeracer.com/">asdasdsadsaaaa</a>
<br>
<a id="AAA" href="https://play.typeracer.com/">asdasdsadsaaaa</a>
<br><a id="AAA" href="https://play.typeracer.com/">asdasdsadsaaaa</a>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<a id="AAA" href="https://play.typeracer.com/">asdasdsadsaaaa</a>
<a id="AAA" href="https://play.typeracer.com/">asdasdsadsaaaa</a>
<a id="AAA" href="https://play.typeracer.com/">asdasdsadsaaaa</a>
<a id="AAA" href="https://play.typeracer.com/">asdasdsadsaaaa</a>
<a id="AAA" href="https://play.typeracer.com/">asdasdsadsaaaa</a>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<!-- <embed src="https://stackoverflow.com" type="text/html"/> -->
</body>
</html>为什么会这样？？ 谢谢。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
