javaScript作為外部檔案引用時要注意

來源:互聯網
上載者:User

   在實現某個功能的時候,發現了一個奇怪的問題:單頁面應用js沒有問題,但是如果應用masterpage,在套用外部js檔案時,根據設定的id得到的對象始終為NULL:

   *******************************引用一段文字說明 問題所在*******************************
ASP.Net 提供了代碼和頁面分離的機制,在大多數情況下,這種機制工作得非常好。但是,如果需要使用用戶端java指令碼來做些工作,你就會遇到麻煩了。問題出在你在設計階段為server端控制項設定的ID值和頁面運行時控制項實際的ID值不一致。例如,建立一個Web site,增加一個 aspx page,在頁面上加入一個text box控制項:

<asp:TextBox ID="mytext" Runat=server></asp:TextBox>    
運行這個頁面,從View source中會看到運行時的結果:

<Input name="mytext" type="text" id="mytext" />
這時我們看到設計階段的ID值和運行時控制項的ID值是一樣的,沒有問題,這是因為這是一個單純的aspx頁面。如果在頁面中包含一個使用者自訂的web control或使用了master pages (ASP.NET 2.0),情況就不樂觀了。我們增加一個新的user control名為mycontrol.ascx. 在mycontrol.ascx中加入同樣的text box。再把這個自訂控制項加入到一個aspx 頁面, 將此控制項的ID設定為myControl. 在瀏覽器中運行這個頁面,得到的html是這樣的:

<Input name="myControl:mytext" type="text" id="myControl_mytext" />
text box控制項的設計階段ID= mytext,但運行時得到的ID=myControl_mytext。也就是在原來的ID前面增加了包含text box控制項的容器myControl的ID。在使用master pages時,所有的aspx 頁面都是被包含在一個容器中的, 而且還常常會有容器的嵌套。如果在用戶端使用JavaScript去按照ID尋找控制項就會失敗

  *******************************************************************************************
  通常這個時候,就要利用控制項的ClientID屬性來獲得運行時ID:
 1.在Masterpage的header部分加入對外部js檔案的參考,那麼所有應用此模板的頁面都可以應用這個js檔案

 <script src ="JScript.js" language ="javascript" type ="text/javascript" ></script>

2.JS檔案定義:
      function showTip(id,oevent,address)
      ...{
        var div=document.getElementById(id);
        var result=DbOp.getDetail(address).value;
        var arrs=result.split(","); 
        var show="The ID IS :"+arrs[0]+"<br>"+"The name IS :"+arrs[1];
        div.innerHTML=show;
        div.style.visibility="visible";
        div.style.left=oevent.clientX+5;
        div.style.top=oevent.clientY+5;
      }
      
      function hidTip(id,oevent)
      ...{
       var div=document.getElementById(id);
        div.style.visibility="hidden";
      }

3。子頁面:<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
  <div>
    
      <div id="divshow"  runat ="server"  >
        
      </div>
      <div id="div2"  runat ="server" style =" border :solid 1px red; background :#f0f0f0; visibility :hidden ; position :absolute">
       xxxxx
      </div>
    </div>
</asp:Content>

4.CS://some code...
  
gv.Rows[i].Cells[2].Attributes.Add("onMouseover", "showTip('"+div2.ClientID+"',event,'" + address + "')");
            gv.Rows[i].Cells[2].Attributes.Add("onMouseout", "hidTip('"+div2.ClientID+"',event)");

//code here ...

結合上篇文章,就可以實現行為和表現(js和html)的分離。

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.