iframe 설정 내용

Question

나는 이것을 며칠 동안 찾고 있었고 누군가가 이것에 대한 답을 도울 수 있는지 궁금해하고있었습니다.

그래서 저는 현재 사용자가 css 및 js 링크와 가능한 인라인 스크립트/스타일을 포함 할 수있는 HTML 페이지를 만들 수있는 시스템을 구축 중입니다.

원래 사용자가 div 태그를 사용하여 HTML 출력을 추가했지만 모든 추가 스타일과 스크립트가 상위 페이지에 영향을 미쳤으므로 사용할 수있는 유일한 옵션이 결정되었습니다. 콘텐츠를 삽입 할 iframe

부모 요소에 대한 부트 스트랩 링크 및 Jquery 충돌을 막으려면, 내가 아는 곳에서 샌드 박스 환경에서 iframe을 실행해야하지만 콘텐츠의 설정 방법을 모릅니다. iframe이 샌드 박스 모드에있을 때

당신은 시도 할 경우 : - iframe이가 샌드 박스 및 원점을 허용하지 않는되고

$("example iframe element").contents().find("body").html("example html inline styles etc");

이 작동하지 않고 블록 액세스 인해.

iframe을 샌드 박싱하는 것이 "부모 중 하나와 iframe에서 하나"라는 Jquery의 여러 인스턴스를 충돌하는 유일한 방법 인 것처럼 보입니다. 작동하는 noConflict를 시도했지만 충돌하는 다중 부트 스트랩이 수정되지 않습니다. parent 및 iframe 요소에로드됩니다.

누구나 차단 된 액세스 또는 다른 고유 한 컨테이너 접근 방식을 사용하지 않고 샌드 박스 처리 된 iframe에 런타임에 콘텐츠를 추가하는 방법을 알고 있습니까?

나는 그것에 대해 많은 정보를 찾을 수 없기 때문에 누구에게도 도움이 될만한 정보를 제공해 주셔서 감사합니다.

Answer 1

마침내 Javery와 Bootstrap이 iframe을 샌드 박싱하지 않고도 충돌하는 이유를 알았 기 때문에이 상황에서 문제가 무엇인지 알아 냈습니다. 샌드 박스가있는 iframe이 필요하지 않습니다. iframe에 내용을 넣으려면 아래 코드를 사용하라는 내용의 게시물이 많이 있습니다.

$("example iframe element").contents().find("body").html("example html inline styles etc"); 

위의 방법의 문제는 iframe을 열면 내부에 내용을 넣을 수 있지만 iframe의 닫는 방법을 지정하지 않는다는 것입니다.

이렇게하면 정상적인 샌드 박스가없는 iframe Jquery와 부트 스트랩이 닫히지 않아 상위 페이지로 누출되기 때문에 충돌이 발생합니다. 콘텐츠를 iframe에 직접 삽입하는 실제 방법은 연결이 적절히 차단되도록 아래 코드와 같아야합니다. 이 컨텐츠를 작성 완료 한 후에 만 ​​iframe이 내부의 내용을 수정하는 것이 아니라, 위의 코드를 수행하여

var myIframe = document.getElementById("ID OF THE IFRAME") 
var iframeDoc = myIframe.contentWindow.document; 
iframeDoc.open(); 
iframeDoc.write("HTML HERE"); 
iframeDoc.close(); 

은 또한을 닫는. 이는 Iframe이 완전히 고립 된 페이지 요소라는 목적을 고수하고 부모 페이지로 js 및 css 누출을 방지하는 데 매우 중요합니다.

이 답변으로 iframe을 사용하여이 특정 문제를 겪고 잘못된 방법을 사용하여 런타임에 콘텐츠를 추가하는 다른 사용자에게이 답변을 도움이되기를 바랍니다.