时间戳

首页 > 解决方案 > iframe 定位偏离光标

javascript - iframe 定位偏离光标

问题描述

对于一个附带项目，我正在构建一个扩展程序，当光标悬停在任何链接上时，它会提供任何链接的 iframe 预览。将鼠标悬停在页面顶部的链接上时一切正常，但是当页面向下滚动时会出现问题。由于某种原因，iframe 会自行向上移动，然后移动到预期的位置： 像这样

我使用了鼠标悬停功能并使用了 e.pageX 和 e.pageY，并使用 iframe.style.top = e.pageY + 'px' 和 iframe.style.left = e.pageX +'px' 将该位置应用于 iframe。

// 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>

为什么会这样？？谢谢你。

标签： javascripthtmlgoogle-chrome-extensionmouseover

解决方案

推荐阅读