2012-12-28 4 views
0

저는 일부 웹 페이지 상단에 iframe 고정 위치를 삽입해야하는 크롬 확장 프로그램을 개발 중입니다. 수정 될 페이지를 제어 할 권한이 없습니다. 지금은 iframe을 삽입 할 수 있지만 페이지의 일부는 숨겨져 있지만 공간을 예약 할 수 있기를 원합니다. 문제는 페이지의 본문에 여백 또는 패딩을 추가 할 때 페이지의 다른 고정 요소가 원래 위치와 일치하지 않는다는 것입니다.자바 스크립트로 페이지에 요소를 삽입하고 그에 따라 페이지를 아래로 이동하십시오.

어떻게하면 페이지 상단에 표시되고 그 아래에 아무 것도 숨기지 않거나 그 밖의 위치를 ​​엉망으로 만들 수있는 자바 스크립트 요소를 삽입 할 수 있습니까?

+0

-webkit-transform: translate(-*your_block_height*px) 어떻게 프레임에서 페이지 교체에 대한? – user123444555621

+0

답장을 보내 주셔서 감사합니다. 그러나 일부 웹 사이트는 프레임에 너무 친절하지 않습니다. – CalumMc

+0

그리고이 사이트가 표시 될 수있는 사이트를 제어 할 수 없으므로 문제가 될 수 있습니다. – CalumMc

답변

1

방법에 대한 다음, 몸 -webkit-transform: translateY(*your_block_height*px)에 적용되는 첫 번째 자식으로 몸에 iframe을 추가하고 적용

+0

그게 내가 한 짓이야, 고마워. 미래의 독자들은 크롬에 버그가 있다는 점에 유의하십시오. -webkit-transform은 고정 된 위치가 '고정'되는 것을 멈추지 만 파이어 폭스를 대신 사용할 것입니다. – CalumMc

0

고정 된 요소를 순환하고 삽입 된 요소의 높이와 같은 양만큼 "상단"특성을 늘립니다.

var myTop; 

$('body div').each(function(){ 
    if($(this).css('position')=='fixed'){ 
     myTop = $(this).css('top'); 
     $(this).css('top',mytop + 100); 
    }; 
}); 

저는이 작업을 100 % 할 수 있도록 약간의 연구와 조정이 필요하다고 확신합니다. 예를 들어 '본문 div'선택자는 고정 된 div 만 100 픽셀만큼 이동합니다. 당신은 자세한 내용은 여기를 찾아보실 수 있습니다 :

하지만 단지 일부 페이지에 느린 과정이 될 수 당신이 경고하는. 다른 사람이 더 나은 방법을 가지고있을 수 있습니다.

+0

감사합니다. 그러나 브라우저에서 아마 더 빠르기 때문에 anton_byrna의 CSS 접근 방식을 사용하기로 결정했습니다. – CalumMc

관련 문제