在页面加载 VB>NET 上运行 JS 函数答案

【问题标题】：Run JS Function on Page Load VB>NET在页面加载 VB>NET 上运行 JS 函数
【发布时间】：2017-09-02 00:12:14
【问题描述】：

我有一个侧边栏 div，我想在页面加载时隐藏它。我尝试使用分页器中的注册启动脚本调用 JS 函数，并添加“style="display:none;"”。我目前有一个相同的 JS 调用，但在控件单击时，它工作正常......但我希望 div 最初是隐藏的。

编辑：使用预渲染在本地主机上工作，但不在服务器上......

.aspx:

    <div id="mySidenav" class="sidenav">
        <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        Code...
        </asp:UpdatePanel>
    </div>

JS：

function openNav() {
        document.getElementById("mySidenav").style.width = "250px";
        document.getElementById("main").style.marginLeft = "250px";

    }

    function closeNav() {
        document.getElementById("mySidenav").style.width = "0";
        document.getElementById("main").style.marginLeft = "0";
        document.body.style.backgroundColor = "white";
    }

codebehind.vb:

Private Sub Page_PreRender(sender As Object, e As System.EventArgs) Handles Me.PreRender
    ScriptManager.RegisterStartupScript(Me, Me.GetType(), "InitializePage", "InitializePage();", True)
    ScriptManager.RegisterStartupScript(Me, Me.GetType(), "closeNav", "closeNav();", True)
End Sub

你知道我可以在页面加载时隐藏这个 div/关闭它吗？

【问题讨论】：

为什么需要服务器端代码参与？
@mason 如果可以的话，我想避免这样做。我比较新……
在不需要的时候涉及服务器是一种浪费。 <script>(function() { closeNav(); })();</script> 将其放入您的页面将在页面完成加载 DOM 时调用该函数。见this question。
@mason 喜欢这样吗？ $(document).ready(function () { closeNav();});
啊，你有 jQuery 吗？是的，这会起作用，但你可以让它更短。 $(function() { closeNav(); });。我假设您没有 jQuery，因为您使用的是 document.getElementById('id') 而不是 $("#id")

标签： javascript jquery css asp.net vb.net

【解决方案1】：

最简单的方法是将“封闭”样式属性添加到初始标记中。也就是说，最好将这些属性放在 CSS 中并引用它们。请参阅下面的示例：

.navopen{
width: 250px;
margin-left: 250px;
}

.navClosed{
width: 0;
margin-left: 0;
}

你的 JS 看起来像：

function openNav() {
        document.getElementById("mySidenav").className = "navOpen";
    }

    function closeNav() {
        document.getElementById("mySidenav").className = "navClosed";
    }

这可能不准确，但应该给你一个想法

【讨论】：

所以 div 的原始 CSS 将是 class=".navClosed"？
没错，虽然没有 .在前面。这。在 CSS 中表示一个类。