2009-02-10 5 views
2

가능한 중복 :
fb like button creates a white background on page onload in all ie versions콘텐츠를로드하기 전에 IFRAME 영역의 색을 변경하거나 제어 할 수 있습니까?

나는 내용의 부분이 iframe으로로드 사이트가 있습니다.

내가 겪고있는 문제는 페이지 자체가로드 될 때까지 iFrame의 내부 콘텐츠가 흰색이고 콘텐츠의 배경색이 다른 경우 (파란색)입니다. 그래서 내용이로드 될 때까지 화면에 흰색 사각형이 나타납니다.

내용이있을 때까지 빈 IFrame에서 렌더링 할 색상을 지정하는 방법이 있습니까?

여기에 잘못된 방법을 사용하고 있습니다. 콘텐츠를 표시 할 준비가 될 때까지 페이지를 렌더링하지 못하게하는 좋은 방법이 있습니까?

업데이트 : "흰색 영역"비트가 IE 고유 인 것처럼 보입니다.

답변

3

그것은 너무 어렵지 않다 :

<iframe id="IFR" src="time.php" style="background-color: #f00;" />

편집 : IE에서 테스트 무시 - 그것은 파이어 폭스에서 작업을 수행합니다. 예 : http://beta.tagcloud.com/contain.html

이 예에서는 페이지가 빠르게 빨간색으로 바뀌고 iframe이로드 될 때 (5 초 후) 검정색으로 바뀝니다.

+0

작동하지 않습니다. 여전히 흰색으로 깜박입니다. –

1

콘텐츠를로드하기 전에 iframe의 문서를 설정하고 스타일을 설정할 수 있습니다.

아니면 Ajax를 사용할 수 있으며 이러한 문제는 없습니다. = (은 물론, 작업에 적합한의 경우 가정.)

+0

글쎄 내가 뭘하려고했는데 WordPress에서 콘텐츠를로드하고 클라이언트가 메인 레이아웃을 망쳐 놓지 않고 워드 프레스에서 "페이지"를 편집 할 수 있습니다. –

1

이것은 나를 괴롭히는 것이었지만 실제로 IE6과 7에서 작동하는 솔루션을 발견했습니다. 다른 브라우저에서는 테스트하지 않았지만 Firefox는 제대로 작동하는 것으로 보입니다.

로드 할 때 iframe이 표시되지 않는 경우 문제가 해결되지만 iframe에 경고가 표시되면 즉시 onload가 실행되는 것으로 보입니다. 페이지로드시 한 번 두 번 onload가 실행 된 것으로 나타났습니다. 다시 iframe 페이지가로드되면 다시 ...

 

<iframe id="theFrame" src="frame.html" style="display:none;" onload="loadFrame();"></iframe> 

//and here is the associated javascript 
loadCount = 1; 
function loadFrame() { 
    if(loadCount > 1) { //this keeps the script from displaying the frame on the first fire 
    document.getElementById('theFrame').style.display=''; 
    return; 
    } 
    loadCount++; 
} 
0

iframe이 준비 될 때까지 표시하지 않는 가장 간단한 방법입니다. 이렇게하면 iframe 아래에서 원하는 배경을 설정할 수 있습니다. 당신은 배경 설정과 같이로드 될 때까지 iframe을 보여주는 방지 : 당신의 방문자가 JS들이 iframe을 참조하지 않을 꺼져있는 경우

<div style="background-color:#XXXXX"> 
    <iframe src="..." style="visibility:hidden;" onload="this.style.visibility='visible';"></iframe> 
</div> 

유일한 단점입니다. 그게 당신이 체크 아웃에 대한 우려가 있다면 http://css-tricks.com/prevent-white-flash-iframe/

관련 문제