鼠标位置在 iframe 上

Mouse position over iframe

本文关键字：iframe 位置 鼠标      更新时间：2023-09-26

我有一个div，在左边充当侧边栏，然后其余的（在右边）是一个IFrame。我的侧边栏的宽度为 50，我希望每当鼠标朝向右侧时，它就会隐藏，然后当鼠标"进入 <50 区域"时，侧边栏再次显示。

这是否可能，或者跨域访问存在问题？

我认为如果我正确理解了你的问题，这不是关于捕获鼠标位置（基于 pageX/pageY 原则）; 而是你想简单地在mouseenter和mouseleave（悬停）上触发操作。

您可以通过正确构建 DOM 然后按照您想要的方式设置样式来实现这些结果。

无需预测鼠标的位置，我们可以简单地指示何时显示以及何时隐藏内容。在此方案中，我们使用所需的50px，并根据用户的操作"显示/隐藏"。请参阅下面的工作 jsFiddle：

编辑

由于性能问题，我选择使用.css()而不是.animate()。如果您想调整它，请告诉我。

http://jsfiddle.net/YGmN3/3/

也许是这样的：

.HTML

<div id="sidebar" style="float:left; width:50px; background-color:green; height:250px;"></div>

.JS

$("html").mousemove(function(event) 
{
    var xPos = event.pageX;
    if (xPos <= 50) 
    {
        $("#sidebar").show();
    }
    else 
    {
        $("#sidebar").hide();
    }
});​

http://jsfiddle.net/5VEzx/

当你开始使用iframes时，肯定会涉及一些复杂问题 - 这是行不通的：

<Doctype! html>
<html>
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <style>
          body iframe {
              margin-left: 100;
              border: 2px solid red;
          }
        </style>
        <script type="text/javascript" src="jquery.js"></script>
        <script>
          $(function(){
              $(document).on('mousemove', function(evt){
                  $('#pagex').text(evt.pageX);
              });
          })
        </script>
    </head>
    <body>
      <div id="pagex"></div>
        <iframe id="theframe">
          <div id="innepage"></div>
        <script type="text/javascript">
              $(document).on('mousemove', function(evt){
                      console.log(evt);
                  $('#innerpage').text(evt.pageX);
              });
        </script>
        </iframe>
    </body>
</html>

事实上，我无法在 iframe 内成功触发的任何地方放置一个mousemove侦听器。

我知道 iframe 有自己的规则，但我也知道可以与它们互动，因为人们一直在这样做。不幸的是，我实际上并没有与他们合作，所以我没有答案。

相关文章：