Question

我有多个内容页面，这些内容页面再次从主页面派生，

每个内容页面在加载时都需要一些初始化程序事件，主页面也是如此。

目前我正在这样做

母版页

<script type="javascript"> 
$(document).ready({
// Initialize my master page events code
});
</script>
<asp:ContentPlaceHolder ID="cphSalesTrackerScripts" runat="server">
</asp:ContentPlaceHolder>

内容第1页

 <asp:Content ID="cntBodyScripts" contentPlaceHolderID="cphSalesTrackerScripts" runat="server">
  <script type="javascript"> 
   $(document).ready({
   // Initialize my content page 1 events  code
});
</script>
</asp:Content>

内容第2页

 <asp:Content ID="cntBodyScripts" contentPlaceHolderID="cphSalesTrackerScripts" runat="server">
  <script type="javascript"> 
   $(document).ready({
   // Initialize my content page 2 events  code
});
</script>
</asp:Content>

我正在学习最佳编码技术Here

它说

每页只使用一个文档就绪处理程序。

所以如何管理每个内容页面的single ready ...因为主页面和内容页面在浏览器中一起呈现，并且在我的场景中有two ready handler

Answer 1

将脚本放在预页脚文件中并在所有页面上调用它，然后放置一个document.ready并将所有函数，自定义js内容移动到那里：

Jquery(document).ready(function() {
   // some code

   // other code
}

Answer 2

我在使用多个document.ready时看不到问题。但是，如果你只想拥有一个，你可以做两件事：

在主页的<script>标记内包含占位符。然后，在您的内容页面中，您必须仅提供JavaScript代码，而不包含<script>代码
在主脚本中公开回调，并在内容页面中提供回调。如果可用，请从主页面调用它。

第二个想法是这样的：

在母版页中：

$(document).ready({
  // Initialize my master page events code

  // run the content page callback if available
  if (window.contentCallback) { contentCallback(); };
});

在内容页面中：

window.contentCallback = function() {
  // content page code to run on document.ready
};

请注意，我正在使用全局对象window在内容页面和母版页之间共享它。这真是一个非常糟糕的主意，但使用ASP.NET使得必须进行这种黑客攻击。

但是，你可以通过至少在你自己的对象中包含回调来改进它，而不是用很多东西污染全局：

在母版页中：

window.MyApp = {}; // Create empty object

$(document).ready({
  // Initialize my master page events code

  // run the content page callback if available
  if (MyApp.contentCallback) { contentCallback(); };
});

在内容页面中：

MyApp.contentCallback = function() {
  // content page code to run on document.ready
};

Answer 3

在您的母版页中，

getNotificationSettings()

在所有内容页面中：

    <script src="/js/global.js" type="text/javascript"></script>
    <asp:ContentPlaceHolder ID="AdditionalScripts" runat="server" />

    <script type="text/javascript">
        $(document).ready(function () {
            initMain(window.jQuery, window); // Code in global.js
            initPage(window.jQuery, window);
        });
    </script>

最后在pageX.js：

<asp:Content runat="server" ContentPlaceHolderID="AdditionalScripts">
  <script src="/js/pageX.js" type="text/javascript"></script>    
</asp:Content>

在Content-Master页面中避免多个document.ready

3 个答案: