1. 홈
  2. 질의 응답
  3. JavaScript가 표시되는지 확인하는 방법은 무엇입니까?

JavaScript가 표시되는지 확인하는 방법은 무엇입니까?

2012-05-07 5 views

답변

8

당신이 (당신이 패널 컨트롤의 올바른 클라이언트 ID를 사용하고 있는지 돈을 위해 서버 측의 패널의 가시성, 작동 document.getElementById()에 의해 반환 된 값의 체크를 설정하는 경우에 한해 가정 하드 코딩하지 마세요).

데모는 클라이언트 측 findPanel() 함수의 체크 표시를 참조하십시오. 파일 패널의 가시성을 전환

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
    <title></title> 
    <script type="text/javascript"> 
     function findPanel() { 
      var panel = document.getElementById("<%= pnlMyPanel.ClientID %>"); 
      if (panel) { 
       alert("Panel is visible"); 
      } 
      else { 
       alert("Panel is not visible"); 
      } 

//  // And this would work too: 
//  alert((<%= pnlMyPanel.Visible.ToString().ToLower() %>) ? "Panel is visible": "Panel is not visible"); 

     } 
    </script> 
</head> 
<body> 
    <form id="form1" runat="server"> 
    <div> 
     <asp:Panel runat="server" ID="pnlMyPanel"> 
      <p> 
       This is a panel.</p> 
     </asp:Panel> 
     <asp:Button runat="server" ID="btnToggle" Text="Toggle panel visibility..." /> 
     <input type="button" value="Do client-side visibility check..." onclick="javascript:findPanel();" /> 
    </div> 
    </form> 
</body> 
</html>

에 다음 코드 뒤에 코드-btnToggle은 클릭 할 때 :

protected void Page_Load(object sender, EventArgs e) 
{ 
    btnToggle.Click += new EventHandler(btnToggle_Click); 
} 

void btnToggle_Click(object sender, EventArgs e) 
{ 
    pnlMyPanel.Visible = !pnlMyPanel.Visible; 
}

출처

2012-05-07 05:45:12

+0

내 답변을 업데이트했습니다. 'Panel.Visible'이 true/false이지만 계정 및 jQuery 효과 (적용되는 경우)를 고려하지 않음을 명심하십시오. . –

+0

감사합니다 이반, 도움이 필요합니다. 정말 도움이됩니다. –

+0

나는 이것에 관해서 하나의 질문을 가지고있다. (var panel = document.getElementById ("<% = pnlMyPanel.ClientID %>")) 위의 대신에 var panel = document.getElementById (masterpage의 contenplaceholderid.panelid)를 쓸 경우, 그것은 작동합니다 –

1

Visible 속성이 false이면 클라이언트에 전혀 보내지지 않습니다 (심지어 숨김). ASP.NET은 서버 측에서이를 실행합니다. 따라서 document.getElementById(<%= panel.ClientID %>)을 사용하여 검색 할 수 있으며 결과가 비어 있으면 보이지 않습니다.

출처

2012-05-07 05:30:06 McGarnagle

+0

OP는 JavaScript에서이 작업을 수행하려고합니다. –

+0

@RobCooper 와우, 친구. ASP.NET을 사용한 적이 있습니까? 패널 (** 서버 컨트롤 **)이 보이지 않으면 자바 스크립트에서 전혀 볼 수 없습니다. – McGarnagle

+0

비꼬아주세요. OP는 서버 측 코드에서 보이지 않게 만든 경우에 명시되지 않았습니다. –

1

패널은 서버 측 제어입니다. 표시되는 값이 true이면 페이지 소스에서 동일한 ID를 가진 div를 볼 수 있습니다. 표시되는 값이 false 인 경우, 그 패널 부분은 클라이언트 브라우저에 전혀 보내지지 않습니다.

한 가지 방법은 자바 스크립트에서 ID를 확인하는 것입니다. jquery에서 if ($ ("# mypanel"). exists())는 첵 할 수 있습니다. 자바 스크립트에서 이것을 확인하십시오 How to check if element exists in the visible DOM?

출처

2012-05-07 05:37:57

3

jQuery를 사용하는 경우 visible selector을 사용해 보셨습니까?

예컨대 :

if ($("#test").filter(":visible")​​​​​​​​.length > 0) { 
    /* visible */ 
} else { 
    /* invisible */ 
}

패널이 서버 측에서 숨겨져있는 경우, 또한 어떤 jQuery를 (효과/전환 등) 해고 한 경우 패널 숨겨진이 작동합니다. exists을 확인하거나 getElementById이 반환하는 경우는 그렇지 않습니다.

하면 자바 스크립트 에 클라이언트 측 ID를 삽입해야하고 체크 :visible, 이것은 빠른 당신 조회를 유지합니다. 알라 워드 프로세서 :

때문에 : 볼이 jQuery를 확장 아니라 CSS 사양의 일부이며, :visible 네이티브 DOM querySelectorAll() 방법에 의해 제공되는 성능 향상을 이용할 수 없습니다 사용하여 쿼리. :visible을 사용하여 요소를 선택할 때 최상의 성능을 얻으려면 먼저 순수 CSS 선택기를 사용하여 요소를 선택한 다음 .filter(":visible")을 사용하십시오.

출처

2012-05-07 05:38:51

+1

다시 질문해야합니다. ASP.NET 웹 양식을 사용해 본 적이 있습니까? ? – McGarnagle

+3

다시 말하지만 풍자를 분출하기 전에 서버 측에 숨겨진 패널과 관계없이 원하는 결과를 반환한다고 생각할 수 있습니다. jQuery가 요소를 찾을 수 없으면 빈 배열을 반환합니다. jsFiddle을 실행하고 직접보십시오. –

3

간단한 방법은 자바 스크립트에 ASP.NET에서 현재 눈에 보이는 값을 전달하는 것 직접.

<script type="text/javascript> 
    function IsPanelVisible() { 
     return <%= pnlMessages.Visible.ToString().ToLower() %> 
    } 
</script>

출처

2012-05-07 05:58:58

+0

JavaScript가 해석하지 않기 때문에 '반환 <% = pnlMessages.Visible.ToString(). ToLower() %>;'로 변경해야하지만 좋은 지적입니다. 부울 값으로 "참"(소문자 여야 함) –

+0

@IvanKarajas 맞습니다. 고마워요. 제안을 반영하도록 업데이트되었습니다. –

관련 문제

 관련 문제