2011-05-16 4 views
9

이 코드 부분이 있습니다. 페이지가로드되면 모든 div가로드되지만 아직 표시되지 않습니다. 클릭 할 때 div의 내용로드를 시작하는 방법입니까? 이제 페이지 인해 둔화 모든 사업부의로드 div iframe 만 클릭하십시오

<a href="#?w=550" rel="popup_add_dossier" class="poplight" title="'.$lang['form_add'].'"><img src="images/icon/new.png" ></a> 

<div id="popup_add_dossier" class="popup_block"> 
<iframe src="add_dossier.php" frameborder="0" scrolling="no" width="550" height="400"> 
+1

왜 동적으로 특정 DOM 이벤트 대신 iframe 대응의에 사업부에서 내용을로드하는 AJAX 기술을 사용하지 않는? –

+1

JavaScript와 HTML 만 관련되어있을 때 왜이 질문은'php' 태그가 붙어 있습니까? –

답변

14

당신이 요소를 클릭 할 경우에만 DIV 내부의 iframe을로드 의미합니까? 그렇다면 iframe 태그에서 iframe src 속성을 삭제하고 요소를 클릭 할 때만 src를 설정할 수 있습니다. iframe을에

:

<iframe id='ifr' frameborder="0" scrolling="no" width="550" height="400"> 

클릭 할 수있는 요소 :

onClick='document.getElementById("ifr").src="add_dossier.php";' 
+0

위대한 soltion 난 이미지를 onclick 추가로 작동하도록 얻을 수 없습니다. div 표시되지만 비어 있습니다. – Muiter

+0

iframe에 ID를 추가 했습니까? 오류가 발생하면 javascript 콘솔을보십시오 – mck89

+0

예, 있습니다. 오류는 Uncaught입니다. SyntaxError : Unexpected token} 이것은 완전한 라인입니다 : echo ''; – Muiter

3

jQuery를 통해 작업을 쉽게 처리 할 수 ​​있습니다!

아래로드 <head> 섹션.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script> 
<script> 
jQuery(function(){ 
    $("iframe").each(function(){ 
     this.tmp = this.src; 
     this.src = ""; 
    }) 
    .parent(".popup_block") 
    .click(function(){ 
     var frame = $(this).children("iframe")[0]; 
     console.log(frame);  frame.src = frame.tmp; 
    }); 
}); 
</script> 
1
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script> 
<script type="text/javascript"> 
$(function(){ 
    $('#button').click(function(){ 
     if(!$('#iframe').length) { 
       $('#iframeHolder').html('<iframe id="iframe" src="http://google.com" width="700" height="450"></iframe>'); 
     } 
    }); 
}); 
</script> 

<a id="button">Button</a> 
<div id="iframeHolder"></div> 
관련 문제