如何使用jQuery在加载页面时禁用用户输入？

Question

我带有一些链接、各种用户输入等的重度jquery页面。

我使用jQuery，在一个定义了操作的文件中：

$(document).ready( function() {
  ....
} );

阻止用户在页面加载（甚至更糟的是重新加载）时点击链接并触发其href操作，因为JavaScript尚未加载/激活。我想要在某种程度上阻止它。我想到的一种方法是在整个文档上放置一个透明的div，该div将接收点击事件，而不是下面的图层。然后，在我的javascript的.ready函数中，我可以隐藏该div，使其能够使用页面。

这是一个好习惯吗？还是我应该尝试其他方法？

- kender

---

你可以尝试一下那种方法。 - Krunal

Answer 1

另一种选择是使用jQuery BlockUI插件（可能在幕后使用相同或类似的思路）。

- Konamiman

---

是的，请不要自己动手。IE6与固定定位的div元素不兼容，需要很多技巧才能让它正常工作。 - Dumb Guy

我认为BlockUI也依赖于DOMLoaded，因此它无法解决问题-在页面加载时阻止。 - K Prime

Answer 2

如果您不想让链接像链接一样运作（即它们的href从未被点击过），为什么要首先将它们设置为链接呢？您最好将可点击元素设置为div或span（没有默认操作的内容），并按照正常方式附加单击处理程序。

我真的不建议使用div来阻止用户界面-这似乎是完全错误的方法，因为它会使禁用JS的人无法使用页面，同时也会阻止其他常见任务，如复制文本。

在澄清问题后，只有在启用但尚未加载JS时才阻止UI，我建议采用以下方法。

HTML（在body之后的第一件事）：

<script type="text/javascript">document.write('<div id="UIBlocker">Please wait while we load...</div>')</script>

CSS:

#UIBlocker 
{ 
    position: fixed; /* or absolute, for IE6 */
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

或者，如果您不想使用 document.write，将 UIBlocker div 作为纯 HTML 放置在 body 顶部，但在 head 中添加以下内容。

HTML:

<noscript>
    <style type="text/css">
        #UIBlocker { display: none !important; }
    </style>
</noscript>

这将确保它不会阻塞非JS启用的浏览器。

- K Prime

---

当JavaScript被禁用时，我尽可能获取尽可能多的功能。拥有像链接一样的链接可以让它正常工作... - kender

所以你希望页面保持原样的功能，只有在启用但尚未加载JS时才被阻止？ - K Prime

确切地说...那就是我想要的（如果不可能的话，我会放弃与非JS客户端的兼容性）。 - kender

此外，将链接保留为链接可以使非键盘浏览成为可能。我自己有时会使用插件来突出显示页面上的链接，并通过在键盘上输入数字来选择它们... - kender

好的，那么请参考我的修改后的答案。 - K Prime

Answer 3

一个透明的 div 可以使用，假设它位于所有元素之上。 （我从来不清楚一个元素必须有多可见才能接收到点击事件。）

但您可能希望使 div 可见；如果访问者可以看到页面上的所有内容但无法点击，则同样会令人困惑。

然而，您可能需要使用JavaScript将 div 的高度设置为整个页面的高度。

- Paul D. Waite

Answer 4

正如你所说，JavaScript 还没有加载。也许 CSS 也没有加载。

因此，我认为某些可视元素将无法工作。如果您想对可视元素（CSS）进行一些操作，您必须在 HTML 节点中硬编码它：<tagname style="blabla">

当 JavaScript 加载后，您可能会在稍后的阶段添加 href 行为。

您得到的是一个带有标题的 <span>，这应该设置行为或其他内容。我使用了一个标题，但可以是不同的属性。

这不使用任何 jQuery，仅用于加载。

    $(document).reade(function () {
        relNoFollow();
    });

function relNoFollow() {
    var FakeLinks = document.getElementsByTagName('span');

    if( FakeLinks.length > 0 ) {
        for( var i = 0; i < FakeLinks.length; i++ ) {
            if( FakeLinks[i].title.indexOf( 'http://' ) != -1 ) {
                FakeLinks[i].onmouseout     = fakelinkMouseOut;
                FakeLinks[i].onmouseover    = fakelinkMouseOver;
                FakeLinks[i].onclick        = fakelinkClick;
            }
        }
    }
}

function fakelinkMouseOver() {
    this.className = 'fakelink-hover';
}

function fakelinkMouseOut() {
    this.className = 'fakelink';
}

function fakelinkClick() {
    window.location.href = this.title;
}

- Robert Cabri

Answer 5

覆盖层DIV应该正常工作。另一个选项是将所有内容放在一个隐藏的容器内visibility: hidden，然后在最后一个$(document).ready语句中切换为visible。

- leepowers