Question

我想了解一旦有母版页，部分和一些JavaScript代码时出现的事情的顺序。

假设我有一个包含脚本的母版页：

<%@ Master Language="C#" ... %>

<head>
    <asp:ContentPlaceHolder ID="HeadContent" runat="server" />
    // header stuff
</head>

<body>
// Html stuff here

</body>

<script type="text/javascript">
     function foo () {
};
</script>

现在我有一个页面，Index.aspx，它继承自这个Master页面，并在其中包含：

<script type="text/javascipt">
    foo();
</script>

如果我在chrome的控制台中收到"foo() is not defined"错误消息，会发生什么？如果我从Master页面获取脚本块并将其移动到其标题，则一切正常。

所以我的问题是 -

事物的顺序是什么，先发生什么？ Index.aspx渲染是否在Master页面完全加载之前发生，因此Index.aspx页面还不知道Master页面底部的定义是什么？（如果它在顶部会很好吗？）我相信这个答案是肯定的。
更令人费解的问题 - 如果主页面的渲染尚未完全在服务器端完成，那么来自Index.aspx页面的javascript是如何调用的？相当于这个短语 - 如果我有一个A页渲染B渲染C渲染（等等），那么第一个被调用的javascript是C页面上的那个（或者最后一个被调用的）？
< / LI>

Answer 1

有点不同。首先，所有内容，即页面本身及其使用的所有母版页，都在服务器上呈现，以生成HTML标记。然后将此标记发送到客户端，由浏览器显示。同样在客户端，所有javascript都被执行。因此，就javascript执行而言，定义javascript的文件（页面A，页面B，页面C，主页面）并不重要。然而，重要的是javascript块在最终页面中出现的顺序。

考虑一下这个例子。母版页：

<%@ Master Language="C#" ... %>

<head>
    <asp:ContentPlaceHolder ID="HeadContent" runat="server" />
    // header stuff
</head>

<body>
    // Html stuff here
    <asp:ContentPlaceHolder ID="BodyContent" runat="server" />
</body>

<script type="text/javascript">
     function foo () {
    };
</script>

现在是子页面：

<%@ Page Master="... %>

<asp:Content ContentPlaceHolderID="BodyContent" runat="server">
    <script type="text/javascipt">
        foo();
    </script>
</asp:Content>

在最终页面的这个布局中，您将拥有以下javascript块的顺序：

<script type="text/javascipt">
    foo();
</script>
...
<script type="text/javascript">
     function foo () {
    };
</script>

因此，foo的调用在定义之前就会发生，这会导致你得到的错误。这就是我相信你的情况。

但是，如果将master中的js块移动到头部，则生成的HTML块会反转：

<script type="text/javascript">
     function foo () {
    };
</script>
...
<script type="text/javascipt">
    foo();
</script>

首先定义

foo，然后调用，这很好。

希望这澄清了这个过程。

Answer 2

该函数必须在被调用之前出现。所以：

<script type="text/javascript">
     function foo () {
    };
</script>

必须出现在

之前

<script type="text/javascript">
    foo();
</script>

此外，foo（）永远不会运行，因为你在脚本类型中有拼写错误，在javascript中缺少'r'。

如果您在母版页中定义了函数并希望从继承的页面调用它们，则可以添加脚本占位符：

<%@ Master Language="C#" ... %>
<html>
    <head>
        <asp:ContentPlaceHolder ID="HeadContent" runat="server" />
    </head>
    <body>
        <asp:ContentPlaceHolder ID="BodyContent" runat="server" />
        <script type="text/javascript">
            function foo () {
            };
        </script>
        <asp:ContentPlaceHolder ID="ScriptContent" runat="server" />
    </body>
</html>

主，部分渲染和Javascript调用

2 个答案: