将用户的光标隐藏在iframe上.可能？

Question

我希望用户的光标隐藏在iframe上.

iframe {
  cursor: none;
}

然而,它没有做到这一点.

我需要使用JavaScript吗？JavaScript甚至可以做到吗？解决方案是什么？

Answer 1

您也可以在没有JavaScript的情况下完成.
示例:http://jsfiddle.net/dyV7L/

HTML

<div class="wrapper">
    <iframe src="other/page.html"></iframe>
    <div class="hide-cursor"></div>
</div>

CSS

.wrapper {
    position: relative;
}

.hide-cursor {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    cursor: none;
    z-index: 100;
}

Answer 2

不幸的是，我不得不求助于 js。

var iframe = document.querySelector('iframe');
var iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
iframeDoc.body.style.cursor = 'none';

这不适用于跨域，但我认为您无论如何都不应该使用类似的跨域。

假设这一切都在您自己的域上，另一个好的 js 解决方案是将样式表注入 iframe 中，将其自己的 css 更改为cursor: nonehtml 或 body。我对我的内容管理器使用了类似的策略 - 我将实际页面直接加载到管理面板中，注入一些元素和样式表，然后在网站上提供管理功能 - 加载到 iframe 中。