2011-03-23 7 views
0

if (Google & Bing)의 두 항목을 한 번 클릭하면 iframe을 만들었고 검색을 수행 할 수 있습니다.iframe이없는 경우 jquery load

이제 li을 다시 클릭하여 iframe이 이미 있는지 확인하여 검색을 다시로드하지 않으면 어떻게됩니까? 그게 의미가 있습니까?

<HTML> 
    <HEAD> 
    <TITLE></TITLE> 
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js "></script> 
      <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js "></script> 
    <style type="text/css"> 
    iframe {width: 100%;height: 100%;max-width: 850px;min-height: 890px;overflow-x: hidden;overflow-y: auto;} 
    </style> 
    </HEAD> 

    <body> 
       <div id="search_engines" class="tabs"> 

    <ul> 
        <li><a href="#google" onclick="googleLoad();">Google</a></li> 
        <li><a href="#bing" onclick="bingLoad();">Bing</a></li> 

      </ul> 


     <div id="google"> 

      <a href="javascript: void(0)" onclick="googleLoad();" style="text-decoration: none" class="">New search</a> 
      <script type="text/javascript"> 
      function googleLoad() { 
      $("#googleIframe").html('<iframe id="googleLoad" frameborder="0" src="http:www.google.com"></iframe>'); 

      } 
      </script> 
      <div id="googleIframe"> 
      <!--Iframe goes here --> 
      </div> 
     </div> 

      <div id="bing"> 

      <a href="javascript: void(0)" onclick="bingLoad();" style="text-decoration: none" class="">New search</a> 
      <script type="text/javascript"> 
      function bingLoad() { 
      $("#bingIframe").html('<iframe id="bingLoad" frameborder="0" src="http:www.bing.com"></iframe>'); 

      } 
      </script> 
      <div id="bingIframe"> 
      <!--Iframe goes here --> 
      </div> 
     </div> 

    </div> 

    </body> 

    </HTML> 

답변

1

갈 수있는 깨끗한과 의미 론적 방법은 클릭을 연결하는 약 이벤트 인 jclery .one() 함수 (인라인 onclick= 선언 대신)를 사용하십시오. 이렇게하면 함수가 클릭 후 실행되고 후속 클릭이 다시로드 프로 시저를 트리거하지 않습니다. 당신이 구글과 빙의 IFRAME 사이에 전환 된 경우

<a id="myGoogleLink">Google</a> 

다음 지금

$('#myGoogleLink').one('click', function(){ 
    $('#googleIFrame').html("BLAH"); 
}); 

와 그 결합, 그것은 모두 완전히 다른 상황입니다.

+1

사실이 답변을 더 좋아합니다. .one 방법에 대해 몰랐습니다. +1 –

+0

@InfernalBadger ~ 일주일 전에 나도 그랬어. : D –

+0

구체적인 예를 들어 주시겠습니까? – user472285

1

그냥 코드에이 검사를 추가 : 이것은 당신이 원하는 것을 할 것입니다

function googleLoad() { 
    if(!$('#googleLoad').length) { 
     $("#googleIframe").html('<iframe id="googleLoad" frameborder="0" src="http:www.google.com"></iframe>'); 
    } 
} 

function bingLoad() { 
    if (!$('#bingLoad').length) { 
     $("#bingIframe").html('<iframe id="bingLoad" frameborder="0" src="http:www.bing.com"></iframe>'); 
    } 
} 
+0

생각이지만 새로운 검색을 클릭하고 iframe을 다시로드 할 수 있기를 원합니다. – user472285

+0

아, 그 링크를 알지 못했습니다. 리처드의 대답을 사용하는 것이 좋습니다. 그런 다음 #google 및 #bing 링크는 .one()을 사용하고 새 검색은 .bind()를 사용하여 바인딩 할 수 있습니다. –

0

:

if($('#googleLoad').length > 0) { 
    // iframe with id googleLoad exists 
}