在 iFrame 上使用自定义光标答案

【问题标题】：Use custom cursor over an iFrame在 iFrame 上使用自定义光标
【发布时间】：2013-09-18 18:43:45
【问题描述】：

我正在使用以下代码在单击按钮时更改光标：

$("#mybutton").click(function(){
       $("*").css("cursor", "url('images/cur_circle_01.png'), auto");
   });

光标按预期变化，但只要我将鼠标移到 iframe 上，光标就会恢复正常。

有没有办法解决这个问题？预期的行为是根据按钮单击来更改鼠标指针。

【问题讨论】：

标签： jquery iframe cursor

【解决方案1】：

老问题，但值得回答。我使用 div 作为覆盖，而不是将光标添加到元素上，我只是将它放在 div 上。这样，iframe 的外观就像有一个光标在它上面。重要的是在加载完成后将其关闭，否则您将无法单击任何内容。（调整大小和位置以适合 iframe 窗口）。

<style>
    #overlay{
        display:none;
        position: absolute;
        width:100px;
        height:100px;
        top:0;
        left:0;
        z-index:10000;
        cursor: wait !important;
    }
</style>

<div id="overlay"></div>
<iframe id="myiframe" sr=""></iframe>
<input id="mybutton" type="button" value="Click Me" />

<script>
    //Show overlay, load iframe src
    $("#mybutton").click(function(){
        $('#overlay').show();
        $('#myiframe').attr('src','https://www.google.com');
    });

    //Hide overlay after load of iframe.
    $('#myiframe').load(function () {
        $('#overlay').hide();
    });
</script>

Google 不会在 JSFiddle 上加载 Iframe，但这为您提供了一个可行的思路。 https://jsfiddle.net/tbkyjwLn/2/

【讨论】：

【解决方案2】：

当光标位于<iframe> 上时，您无法控制光标。这是因为浏览器正在渲染一个完全不同的网页，它自己的 HTML 和 JS 在您的主 HTML 文档中执行。

【讨论】：