Высота содержимого iframe увеличивается с каждым изменением размера iframe для соответствия содержимому

Question

Я хочу изменить размер iframe, чтобы соответствовать его содержимому, но каждый раз, когда я делаю это, высота содержимого увеличивается на постоянное значение, и мне нужно изменить размер iframe снова. И так далее.

Codepen

HTML:

<iframe style="width: 100%; max-width: 400px; box-shadow: 0 0 0 1px #000;"></iframe>

JS:

const html = `<div>
      line 1<br>
      line 2<br>
      <table style="width:100%; height:100%;">
          <tbody>
              <tr>
                  <td style="text-align: center; background: #ddd;">table content</td>
              </tr>
          </tbody>
      </table>
   </div>`;

window.addEventListener('load', () => {
    const iframe = document.querySelector('iframe');

    iframe.contentWindow.document.body.style.margin = 0;
    iframe.contentWindow.document.body.innerHTML = `
    <div id="root">                             <!-- iframe will be resized by its offsetHeight -->
        <div style="clear: both;"></div>        <!-- clear fix, just in case -->
        <div id="content-root">${ html }</div>  <!-- custom content goes here -->
        <div style="clear: both;"></div>        <!-- clear fix, just in case -->
    </div>`;

    const rootEl = iframe.contentWindow.document.querySelector('#root');

    // Resize iframe with interval.
    // Since the content of the iframe is not changing, 
    // the height of the iframe should not change starting from the second iteration
    setInterval(() => {
        iframe.style.height = rootEl.offsetHeight + 'px';
    }, 2000);
});

Answer 1

Наиболее вероятная причина этого - содержимое iframe переполняет его элемент body. Попробуйте установить переполнение, скрытое для элемента body в iframe.

Если это не сработает, вам нужно найти другой метод для расчета размера вашего контента. Или присмотритесь к css в iframe.

Вы можете взглянуть на исходный код библиотеки под названием iframe-resizer, которая содержит несколько различных способов сделать это, и просто поднять тот, который работает для вас

Answer 2

add frameborder = "0" scrolling = "no" onload = "resizeIframe (this)" в HTML.

<iframe style="width: 100%; max-width: 400px; box-shadow: 0 0 0 1px #000;" frameborder="0" scrolling="no" onload="resizeIframe(this)" ></iframe>

Удалить ниже из сценария java.

, 2000