2010-07-13 8 views
16

jQuery를 사용하여 div에 iframe을 동적으로 삽입하려면 어떻게해야합니까?div에 동적으로 iframe을 삽입하는 방법

$(document).ready(function() { 
    $("div").html("<iframe src='http://google.com'><iframe>"); 
}); 

위 코드를 시도했지만 작동하지 않습니다.

+1

작품을 작동합니다. 이 페이지에서 Jquery 라이브러리에 대한 참조를 얻었습니까? – amelvin

+1

아래에서 언급했듯이 iframe 태그를 닫아야합니다. 또한 Google은 이제 "X-Frame-Options : SAMEORIGIN"응답 헤더를 보내므로 비어있는 iframe을 얻을 수 있으므로 다른 src로 테스트하십시오. – Muleskinner

답변

16

이 작품이 무엇 : http://jsfiddle.net/cUSVj/

비록이 같은 도메인에 있지 년의 경우이 만들어지는 후에 당신이 그것으로 많은 것을 할 수 없다 명심, 이것은 same-origin policy 당 장소에 제한 때문이다.

편집 : 난 당신이 정말로 당신의 </iframe> 닫는 태그에 / 누락, 그것은 붙여 넣기 오류라고 생각하고 태그를 폐쇄했다 ...이/브라우저가 얼마나 관대에 따라 작동하지 않을 것입니다. HTML이 유효하도록 정확하게 닫아야합니다. 그렇지 않으면 인 경우으로 시작하는 브라우저 간 문제가 발생합니다. 실제 jQuery 코드가 잘 보이는

+0

@ lam3r4370 - 환경 핸들러가 닫히지 않은 태그에 어떻게 의존하는지, 업데이트 된 답변을 참조하십시오. 질문을 다시 읽었습니다. 처음에는 그것을 보지 못했고, 맹목적으로 jsfiddle에서 해결했습니다. –

+0

예, phpDesigner의 "내부"에서 테스트했습니다. 작동하지 않았기 때문입니다 ... P .: 예, 내 붙여 넣기 오류입니다. – lam3r4370

+5

+1 내 새로운 멋진 일을 보여 주 jsfiddle.net. 어떤 바위 아래에 있었나요? – Tommy

3

올바르게 즉 사업부를 참조 할 수 없습니다

#div - would be an element with the id "div" 
.div - would be an element with the class "div" 
1

그것은, 난 그냥 그것을 테스트, 당신이해야 할 것은 작동주고 JQuery와 사업부의 ID/클래스 당신 iframe을 삽입하고 싶습니다.

예 : (id)

$("#myDiv").html("<iframe src='http://google.com'></iframe>"); 

예 : (클래스)

$(".myDiv").html("<iframe src='http://google.com'></iframe>"); 
6

당신은 내가 이런 식으로 그것을 사용했던 iframe 태그

<iframe> 
</iframe> 
1
<html> 

<head> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
</head> 


<body> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     $("#frameDiv").html("<iframe src='http://google.com'></iframe>"); 
    }); 


</script> 
<p>An IFrame should appear here</p> 
<div id="frameDiv" style="width: 400px; height: 400px;"></div> 

</body> 
4

을 닫지 않았고 나를 위해 ;-) 잘

$(".div").html("<iframe width='850' height='450' frameborder='0' scrolling='no' marginheight='0' marginwidth='0' src='http://yourlocation.com'></iframe>"); 
$(".div").css("display","block"); 
+0

이 질문은 2 년 전에 받아 들여진 대답 –

+7

사용자가 질문에 전혀 대답하지 못하도록 제한하지 않습니다. 이것은 커뮤니티이며 사용자는 그가 시도 할 수 있다고 생각하면 언제든지 대답 할 수 있습니다 –

관련 문제