如何在使用jquery加载页面时禁用用户输入?

I have a heavy-jquerized page with some links, various user inputs and such.

我有一个很重的jquerized页面，有一些链接，各种用户输入等等。

I use jquery, with actions defined in a

我使用jquery，在a中定义动作

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

block.

块。

But while the page is loading (or, even worse - reloading), and a user clicks a link, the href action from it is triggered, as the javascript isn't loaded / active yet.

但是当页面正在加载(或者更糟糕的是重新加载)，并且用户单击一个链接时，它的href操作被触发，因为javascript还没有加载/激活。

I wanted to block it somehow. One way that came to my mind is to put a transparent div over whole document, that would recieve the click events instead of the layer below it. Then, in my .ready function in javascript, I could hide that div making it possible to use the page.

我想以某种方式阻止它。我想到的一种方法是在整个文档中放置一个透明的div，它将接收单击事件，而不是它下面的层。然后，在javascript的.ready函数中，我可以隐藏div，这样就可以使用页面了。

Is it a good practice? Or should I try some diffrent approach?

这是一个好习惯吗?或者我应该尝试不同的方法吗?

5 个解决方案

#1

Another option is to use the jQuery BlockUI plugin (which probably usew the same or similar idea behind the scenes).

另一个选择是使用jQuery BlockUI插件(它可能在幕后使用相同或类似的思想)。

#2

If you don't want your links to act like links (ie their href is never meant to followed), why make them links in the first place? You'd be better served by making your clickable elements a div or span (something without a default action), and attaching the click handler as per normal.

如果你不想让你的链接表现得像链接一样(也就是说，他们的href永远不会被跟踪)，为什么要让它们成为链接呢?您最好将可单击的元素设置为div或span(没有默认动作)，并将单击处理程序按正常方式添加。

I'd really advise against blocking the ui with a div - it seems the entirely wrong approach, making the page non-functional to someone with JS disabled, as well as blocking other common tasks like copying text.

我真的建议不要用div阻塞ui——这似乎是完全错误的方法，使页面对禁用JS的人不起作用，以及阻止其他常见的任务，比如复制文本。

In light of the clarification, to block the UI only if JS is enabled, but not yet loaded, I'd suggest the following.

根据澄清，只有在启用JS时才阻塞UI，但还没有加载，我建议如下。

HTML (first thing after body):

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;
}

Or, if you prefer not to use document.write, leave the UIBlocker div as straight HTML at the top of body, but have the following in head

或者，如果您不喜欢使用文档。编写，将UIBlocker div作为直接的HTML放在主体的顶部，但是要记住以下内容

HTML:

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

This will ensure it does not block for non-JS enabled browsers

这将确保它不会阻塞非js的浏览器。

#3

A transparent div could work, assuming it’s positioned above everything. (I’m never quite clear how visible an element has to be to receive click events.)

一个透明的div可以工作，假设它的位置高于一切。(我从来都不太清楚要接收单击事件，元素必须有多可见。)

You might want to make the div visible though; it could be equally confusing for visitors if they can see everything on the page, but not click it.

您可能想让div是可见的;如果访问者能看到页面上的所有内容，而不是点击它，那么他们同样会感到困惑。

You’ll probably need to use JavaScript to make the div as tall as the page though.

不过，您可能需要使用JavaScript将div设置为与页面一样高。

#4

The overlay DIV should work. Another option would be to place all the content inside a hidden container visibility: hidden then toggle to visible as the last $(document).ready statement.

DIV覆盖应该有效。另一种选择是将所有内容放在隐藏容器的可见性中:hidden然后切换为visible为最后的$(document)。准备语句。

#5

As you said it yourself javascript isn't loaded yet. Maybe the css isn't loaded either.

正如您自己所说，javascript还没有加载。也许css也没有加载。

so something with visual element will not work i think. IF you want to do some with the viaual elements (css) you have to hardcode it in the html node <tagname style="blabla">

所以我认为有视觉元素的东西是行不通的。如果您想对viaual元素(css)进行一些操作，您必须在html节点中硬编码

You could possibly add the href behavious in a later stadium when the js is loaded.

你可能会在后面的体育场里添加href行为，当js加载时。

What you get is a <span> with a title and this should set the behaviour or something. I used a title, but can be a different attribute.

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

This doesn't use any jquery, only for loading

它不使用任何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;
}

#1