ページにonloadイベントのJavaScriptを追加する - ASP.NET

ページにonloadイベントのJavaScriptを追加するコードを紹介します。

方法1:RegisterStartupScript()メソッドを利用する

直接Bodyタグの属性にアクセスして"onload"属性を追加する方法もありますが、ページロード時にJavaScriptの実行をするのであれば、Body内にScriptタグを記述する方法でも同じ動作になります。

Bodyタグ内にJavaScriptコードを追加する場合は、ClientScriptManagerのRegisterStartupScript() メソッドを利用します。<body>~</body>内にスクリプトを出力します。

サンプルプログラム

UI

下記のUIを作成します。(何も配置しません)


XMLのコードは下記になります。
StartUp01.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="StartUp01.aspx.cs" Inherits="StartupJavascriptDemo.StartUp01" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    
    </div>
    </form>
</body>
</html>

コード

下記コードを記述します。
StartUp01.aspx.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace StartupJavascriptDemo
{
  public partial class StartUp01 : System.Web.UI.Page
  {
    protected void Page_Load(object sender, EventArgs e)
    {
      ClientScriptManager cs = Page.ClientScript;
      Type csType = this.GetType();
      cs.RegisterStartupScript(csType, "onload", "<script type=\"text/javascript\">alert('ページ表示時に実行されます。');</script>");
    }
  }
}
解説
ClientScriptManagerのRegisterStartupScript()メソッドを呼び出すことで、<body>タグの直前にスクリプトを記述できます。書きだすスクリプトにはscriptタグも含めたJavaScriptのスクリプトを記述します。

実行結果

プロジェクトを実行します。下図の画面が表示されます。
ページ表示時にJavaScriptが実行され、アラートダイアログが表示されることが確認できました。

Webブラウザに送られるHTML
Webブラウザに送られるHTMLは下記となります。
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>

</title></head>
<body>
    <form method="post" action="StartUp01.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="(VIEWSTATEの値)" />
</div>

    <div>
    
    </div>
    
<script type="text/javascript">alert('ページ表示時に実行されます。');</script></form>
</body>
</html>

方法2:bodyタグにIDを付与し、runat="server" に指定する

bodyタグにIDを付与し、runat="server"属性を付与すると、コード側でアクセスできます。

サンプルプログラム

UI

下記のUIを作成します。(何も配置しません)

XMLのコードは下記になります。
bodyタグに、id属性を追加しIDを付与する記述と、runat="server" を追記します。(デフォルトではidやrunat="server"は追加されていません。)
StartUp02.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="StartUp02.aspx.cs" Inherits="StartupJavascriptDemo.StartUp02" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body id="pagebody" runat="server">
    <form id="form1" runat="server">
    <div>
    
    </div>
    </form>
</body>
</html>

コード

StartUp02.aspx.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;

namespace StartupJavascriptDemo
{
  public partial class StartUp02 : System.Web.UI.Page
  {
    protected void Page_Load(object sender, EventArgs e)
    {
      pagebody.Attributes.Add("onload", "alert('ページ表示時に実行されます。');");
    }
  }
}
解説
bodyタグにIDを付与し、runat="server"属性を付与すると、コードからID名でアクセスできます。bodyタグはHtmlControlsとして会使えるため、AttributesプロパティのAdd()メソッドを呼び出して属性とその値(JavaScript)を追加できます。

実行結果

プロジェクトを実行します。
下図の画面が表示されます。ページ表示時にJavaScriptが実行され、アラートダイアログが表示されることが確認できました。

Webブラウザに送られるHTML
Webブラウザに送られるHTMLは下記となります。bodyタグ内にonload属性が追加されていることが確認できます。
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>

</title></head>
<body id="pagebody" onload="alert('ページ表示時に実行されます。');">
    <form method="post" action="StartUp02.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="(VIEWSTATE値)" />
</div>

    <div>
    
    </div>
    </form>
</body>
</html>

補足

下記コードでは、FindControl()メソッドを利用しています。こちらのコードでも同様の動作となります。
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;

namespace StartupJavascriptDemo
{
  public partial class StartUp02 : System.Web.UI.Page
  {
    protected void Page_Load(object sender, EventArgs e)
    {
      HtmlControl htmlbody = (HtmlControl)Page.FindControl("pagebody");
      htmlbody.Attributes.Add("onload", "alert('ページ表示時に実行されます。');");
    }
  }
}
このページのキーワード
  • ページにonloadイベントのJSを追加する
著者
iPentecのメインプログラマー
C#, ASP.NET の開発がメイン、少し前まではDelphiを愛用
最終更新日: 2024-01-06
作成日: 2014-09-01
iPentec all rights reserverd.