크롬 확장 콘텐츠 스크립트의 동적 콘텐츠에 iframe 크기 조정

Question

내 웹 사이트에 현재 웹 페이지 (예 : www.google.com)에 이 포함 된 <div>을 생성하는 콘텐츠 스크립트가 있습니다. 페이지를 iframe에로드하지만 내용이 동적이어야하므로 배경 페이지에 먼저 sendRequest을 사용하여 HTML 묶음을 게시합니다. 그런 다음 iframe 페이지에서 배경 페이지 (다시 sendRequest)를 쿼리하고 HTML을 가져 와서 페이지 본문에 추가합니다.

동적 콘텐츠를 추가 할 때 iframe 크기가 올바르지 않아서 스크롤 막대가 생기는 문제가 있습니다. 다음과 같이하고 싶습니다.

iframe.addEventListener("DOMContentLoaded", function(event) { 
    div.style.height = iframe.style.height = iframe.contentDocument.body.scrollHeight; 
    div.style.width = iframe.style.width = iframe.contentDocument.body.scrollWidth; 
}, false); 

불행히도이 문제는 두 가지가 있습니다. 먼저 DOMContentLoaded 이벤트가 실행되지 않습니다 (이유는 무엇입니까?). 둘째로 iframe이 다른 도메인에서로드되기 때문에 어쨌든 iframe.contentDocument에 액세스 할 수 없습니다.

iframe에 sendRequest을 사용하여 호스팅 페이지의 크기를 게시 할 수 있습니다. 그러나 iframe을 팝업 창에 삽입 할 때도 동일한 코드를 사용하므로 요청을 보낼 수있는 쉬운 방법이 없습니다 (내용 스크립트에 chrome.tabs.sendRequest을 사용하지만 팝업 창에는 chrome.extension.sendRequest).

방법에 대한 아이디어가 있으십니까?

Answer 1

조금 더 주위에 찔러서 해결책을 찾았습니다. 그것은 동적 콘텐츠를로드 일단은 iframe은, 호출

var size = { height: document.body.scrollHeight, width: document.body.scrollWidth }; 
top.postMessage(JSON.stringify(size), "*"); 

부모 창에는 다음이 포함

window.addEventListener("message", function(event) { 
    var size = JSON.parse(event.data); 
    iframe.style.height = div.style.height = size.height + "px"; 
    iframe.style.width = div.style.width = size.width + "px"; 
});