为什么这个js脚本在回发后无法在asp.net中运行?

时间:2012-01-21 13:42:50

标签: jquery asp.net

我有这段代码:

 if (Page.IsPostBack)
    {
        Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "Javascript", "alert('test');jQuery('html, body').animate({ scrollTop: jQuery('.newslettersubscribe').position().top }, 'slow');",true);
    }

我不明白为什么滚动到页面底部的div不起作用。

请注意alert('test')正在出现......

我确实在页面上有一个班级newslettersubscribe的div。

更新: - 使用脚本管理器加载我的js文件:

<asp:ScriptManager ID="ScriptManager1" runat="server" >
    <Scripts>
        <asp:ScriptReference Path="~/js/jquery-1.4.2.min.js" />
        <asp:ScriptReference Path="~/js/cufon-yui.js" />
        <asp:ScriptReference Path="~/js/helvetica_neue.js" />
        <asp:ScriptReference Path="~/js/jquery.cycle.all.js" />
        <asp:ScriptReference Path="~/js/default.js" />
        <asp:ScriptReference Path="~/js/swfobject-2.1.js" />
    </Scripts>
</asp:ScriptManager>

所以我需要找到一种在加载这些外部js文件后运行这个内联脚本的方法......

更新2 :在与dknaack聊天讨论后,我们发现position也存在问题。我在他的推荐下用offset替换了,现在它正在工作!!!

非常感谢 dknaack

3 个答案:

答案 0 :(得分:3)

我已经尝试过您的代码了。

问题是你不要等到DOM满载。

将您的RegisterClientScriptBlock更改为此。

Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "Javascript", "alert('test');jQuery(function(){jQuery('html, body').animate({ scrollTop: jQuery('.newslettersubscribe').position().top }, 'slow');});", true);

查看此jsFiddle Demonstration

更新

确保您的jQuery<version>.js文件高于您的脚本。看看你加载的页面的Html源代码。您应该将jQuery文件添加到站点管理员的<head>部分。

答案 1 :(得分:2)

string jsScript1 = @"
jQuery(function () {
   alert('test');
   jQuery('html, body')
     .animate({ scrollTop: jQuery('.newslettersubscribe').position().top }, 'slow');
});"

if (Page.IsPostBack)
    {
        Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "Javascript", jsScript1,true);
    }

尝试在C#代码中使用漂亮的js,也需要在DOM完成加载后运行此动画 - 通过将函数传递给jQuery()

来执行此操作

答案 2 :(得分:0)

我看到两个问题。首先,您可能希望使用ScriptManager.RegisterStartupScript而不是Page.RegisterClientScriptBlock。这会将您的脚本放在页面底部而不是顶部。脚本块更适用于您希望在以后调用的页面上放置的函数。

正如其他答案所提到的,第二个是你应该将动画代码包装在某个客户端生命周期事件中。你可以像这样挂钩jQuery的ready事件:

jQuery(function() { /* Your Code */ });

当DOM准备好被操作时,但在页面实际完成加载之前,将执行您的代码。如果你想等到页面加载完毕,你可以这样做:

jQuery(window).load(function() { /* Your Code */ });