2011-02-11 3 views
0

..HTML 페이지의 본문에서 특정 지점에 iframe을 배치 하시겠습니까? 나는 다음있어

var insertbeforenode = document.body; 


var outerdiv = doc.createElement('div'); 
outerdiv.id = '_dialog_div'; 
outerdiv.style.display = "none"; 

var overlay = doc.createElement("link"); 
overlay.href = chrome.extension.getURL("overlay.css"); 
overlay.rel = "stylesheet"; 
overlay.type = "text/css"; 
outerdiv.appendChild(overlay); 

var iFrame = doc.createElement('iframe'); 
iFrame.id = '_dialog_iframe'; 
iFrame.name = '_dialog_iframe'; 

outerdiv.appendChild(iFrame); 
doc.body.appendChild(outerdiv); 

그러나 예상대로 내가하고 싶은 것이 아닙니다 페이지 하단에 outerdiv을 추가합니다. insertbeforenode 전에 삽입하고 싶습니다. insertbeforenode.parentNode.insertBefore(outerdiv, insertbeforenode);을 시도했지만 Chrome에서 작동하지 않는 것으로 보입니다. 누구든지 해결책이 있습니까?

편집 : 그냥 내가 만들 찾고 있어요 효과가있다 명확히하기 위해 ...

<html> 
    <head></head> 
    <iframe here> </iframe here> 
    <body> </body> 
</html> 
+0

만약 내가이 권리를 읽고 있다면 * ''전에 삽입하려고합니까? 그게 니가 쫓고있는거야? –

+0

예, 이렇게하면 파이어 폭스에서 달성하려고하는 효과가 있지만, Chrome에서 'insertbeforenode.parentNode.insertBefore (outerdiv, insertbeforenode);'를 수행하면 효과가 없습니다. – Skizit

+0

@Skizit HEAD와 BODY 만 HTML 요소 내에서 유효합니다. 수행하려는 작업이 표준화되지 않았습니다. 당신은 진지하게 당신의 접근 방식을 재고해야합니다. –

답변

0

나는 파이어 폭스에서이 작업을 수행 할 때 :이 같은 모습

<html> 
    <head></head> 
    <iframe> </iframe> 
    <body> </body> 
</html> 

:

<html> 
    <head></head> 
    <body> 
     <iframe></iframe> 
    </body> 
</html> 

그러나 사용자 의견 및 메모는 사용자가 기본 콘텐츠의 모양을 변경하지 않고 페이지 전체에 iframe을 붙여 넣으십시오. 당신이 정말로 원하는 것은

이 구조 : 당신이 iframeposition:absolute;을 설정 한 다음

<html> 
    <head></head> 
    <body> 
     <!-- Normal content goes here --> 
     <iframe> 
      <!-- Added iframe goes at the bottom --> 
     </iframe> 
    </body> 
</html> 

; 그것을 평소에 widthheight 줄; top, leftmarginstocenter으로 설정하십시오. iframe에서 z-index 값으로 재생해야하지만 페이지의 콘텐츠에 따라 달라질 수 있습니다.

<body>의 맨 아래에 절대적으로 배치 된 요소를 추가하는 것은 일반적으로 수행하려는 작업을 수행하는 일반적인 방법이며 iframe을 처리 할 수있는 모든 브라우저에서 거의 동일하게 작동합니다.

다음은 간단한 예입니다. http://jsfiddle.net/ambiguous/KrjBv/. 이미 JavaScript를 수행하는 방법을 알고 있으며 CSS 포지셔닝을 설명하려고하므로 jQuery를 사용하여 노이즈를 줄입니다.

관련 문제