2009-08-05 6 views
34

내 앱에는 내부에 iframe이있는 모달 대화 상자가 있습니다. 대화 상자가 열리면 iframe의 적절한 'src'속성을 설정하여 내용이로드되도록 jQuery 코드를 작성했습니다. 그러나 대화 상자 열기와 콘텐츠 로딩 사이의 지연 중에 iframe은 흰색 상자로 눈에 띄게 나타납니다. 나는 iframe이 투명한 배경을 선호한다.iframe 투명한 배경

iframe에 allowtransparency = "yes"를 설정해 보았습니다. 어떤 아이디어? 감사!

답변

1

프레임을 화면에서로드하지 않거나 숨긴 다음로드가 완료되면 표시하지 않는 이유는 무엇입니까? 그 자리에 로딩 아이콘을 표시하여 사용자에게로드 중임에 대한 즉각적인 피드백을 제공 할 수 있습니다.

+0

iframe의로드가 완료된 시점을 신뢰할 수있는 방법으로 알 수 없으므로. Iframe 탐색은 원격로드가 아니라 'href'속성을 설정하여 수행됩니다. – brianjcohen

45

나는 자바 스크립트를 통해 IFrame을 만들기이 사용했습니다 그리고 그것은 나를 위해 일한 : 그것은 어떤 차이가

// IFrame points to the IFrame element, obviously 
IFrame.src = 'about: blank'; 
IFrame.style.backgroundColor = "transparent"; 
IFrame.frameBorder = "0"; 
IFrame.allowTransparency="true"; 

확실하지 경우,하지만 난 DOM에 IFrame을 추가하기 전에 그 속성을 설정합니다. DOM에 추가 한 후 src를 실제 URL로 설정합니다.

+7

+1 : 지금까지는 allowTransparency에 대해 몰랐습니다. 감사합니다 :) –

29
<style type="text/css"> 
body {background:none transparent; 
} 
</style> 
(당신은 iframe에 넣어 경우) 작동 할 수

<iframe src="stuff.htm" allowtransparency="true"> 
+2

스타일에 대한 +1, 왜냐하면 나는 iframe에 대한 액세스 권한이 없습니다. – Warlock

+1

Chrome 또는 Firefox에서 나에게 적합하지 않습니다. – geotheory

1

이 없음에 SRC의 배경 색상을 설정하고 transparencey을 허용과 함께.

[WITHIN SCR PAGE STYLE] 
<style type="text/css"> 
    body 
    { 
     background:none transparent; 
    } 
</style> 

[IFRAME] 
<iframe src="#" allowtransparency="true">Error, iFrame failed to load.</iframe> 

참고 : 제 CSS는 다른 사람들과 약간 다릅니다.

관련 문제