iframe не будет динамически изменять размер

Question

Это задавали много раз, но я спрашиваю, потому что никакое решение не сработало для меня, и я не нашел много подходящих решений. Я хочу статическую ширину, но динамическая высота основывается на внутреннем контенте.

Я размещаю блог на субдомене и вставляю его через iframe на страницу в моем основном домене. Я мог бы установить статическую высоту и прокрутку, чтобы пользователи могли использовать блог, но мне нужно что-то, что выглядит лучше. Когда я делаю новые сообщения или пользователь нажимает на раздел комментария, я хочу, чтобы iframe мог автоматически настраивать размер, чтобы он мог отображать весь контент без полосы прокрутки.

До сих пор я не нашел решений, которые работают, главным образом потому, что многие из них связаны с страницами, которые находятся в одном домене.

Answer 1

Поскольку у вас есть контроль над содержимым в iframe, вы можете попробовать окно message событий.

Добавьте это к содержанию кадра:

// post a message to the top window with information about the height 
window.onload = function(){ 
    top.postMessage(document.body.scrollHeight, '*'); 
} 

И это на страницу, содержащую IFRAME:

// listen for the message and set the iframe height when it arrives 
window.addEventListener("message", function(event){ 
    document.getElementById('test').style.height = event.data+'px'; 
}, false); 

<iframe id="test" src="test.html"/> 

---

В ответ на ваш комментарий. Ниже приведены некоторые способы обновления высоты iframe при изменении содержимого iframe.

1.Mutation Events

// listen to all descendants of the body and if there are any modifications, post an update to the top window 
document.body.addEventListener("DOMSubtreeModified", function(){ 
    top.postMessage(document.body.scrollHeight, '*'); 
}, false); 

Такой подход был амортизируется. Это замена, но он еще не полностью поддерживается:

2.Mutation Observers

// create a MutationObserver to listen for modification to the body and post an update to the top window 
var observer = new MutationObserver(function(){ 
    top.postMessage(document.body.scrollHeight, '*'); 
}); 
observer.observe(document.body, {childList: true, subtree: true}); 

Я бы с первым вариантом, пока второй не лучше поддерживается

Answer 2

Просто думал, что я добавьте это offsetHeight надежнее чем scrollHeight для разработки размера iFrame. Пока размер тела равен 0. Проблема заключается в том, что ScrollHeight будет только увеличивать размер страницы, а не уменьшать ее. Маржа выпуска can be overcome, но много кода, если вы заботитесь о IE8.

MutationEvents мертвые, используйте MutationObserver. Хотя это не работает в IE10 и ниже, поэтому вам нужно вернуться к setInterval, который вы должны использовать с таймером , если вы не хотите, чтобы пользователь видел мерцание экрана. RequestAnimationFrame также полезен для устранения мерцания экрана.

Возможно, вам будет интересно ознакомиться с https://github.com/davidjbradshaw/iframe-resizer, в котором рассматриваются все эти проблемы.