javascript 加载 ifram 时自动计算高度，不显示滚动条、附带loading效果

loader.js 实现，加载 ifram 页面，设置ifram尺寸

(function (w, d) {
  if (typeof d.voting_plugin_iframes == 'undefined') {
    d.voting_plugin_iframes = [];
    w.addEventListener('message', function (event) {
      const y = d.voting_plugin_iframes?.find((item) => item.origin == event.origin);
      if (y && event.data?.iframe == 'loader' && event.data?.info) {
        const { u, e } = event.data?.info;
        if (e == 'size') {
          const { w, h } = event.data?.info;
          d.voting_plugin_iframes.forEach((iframe) => {
            if (iframe.url == u) {
              const pw = iframe.el.offsetWidth;
              if (w > pw) iframe.el.setAttribute('width', w + 'px');
              iframe.el.setAttribute('height', h + 'px');
              iframe.el.setAttribute('width', w + 'px');
              iframe.loader.remove();
            }
          });
        }
        if (e == 'get_curl') {
          event.source.postMessage({ e: 'curl', u, curl: window.location.href }, event.origin);
        }
      }
    });
  }

  try {
    const list = d.querySelectorAll('script[data-loader="true"]');
    for (let i = 0; i < list.length; i++) {
      const c = list[i];
      const s = c.getAttribute('src');
      const init = c.getAttribute('data-init');
      const o = s.match(/^https?:\/\/[^/]+/)[0];
      const q = getUrlParam('q', s);
      const u = `${o}/poll/${q}?type=iframe`;
      if (!init) {
        const element = d.createElement('div');
        element.style = `
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
        `;
        const el = loader();
        element.appendChild(el);
        d.body.appendChild(element);

        const n = d.createElement('iframe');
        n.setAttribute('src', u);
        n.setAttribute('seamless', 'seamless');
        n.setAttribute('frameborder', 'no');
        n.setAttribute('width', '100%');
        n.setAttribute('height', '0px');
        n.setAttribute('sandbox', 'allow-popups allow-scripts allow-same-origin');
        n.setAttribute('id', q);
        n.setAttribute('style', 'border: 0px; background: transparent; opacity: 1; overflow: visible; transition: height 150ms ease-out, opacity 100ms ease-out 150ms;');
        d.voting_plugin_iframes.push({ url: u, el: n, origin: o, id: q, loader: el });

        element.appendChild(n);
        c.parentNode.insertBefore(element, c);
        c.setAttribute('data-init', 'true');
      }
    }
  } catch (error) {
    console.error('[voting_plugin_iframes]', error);
  }

  function loader() {
    const el = d.createElement('div');
    el.style = `
      width: 50px;
      height: 50px;
      margin: 25px;
      border-radius: 50%;
      position: relative;
      overflow: hidden;
    `;

    const icon = d.createElement('div');
    icon.style = `
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 80%;
      height: 80%;
      border: 10px dotted #079d50;
      border-radius: 50%;
    `;
    el.appendChild(icon);

    let angle = 0;
    function animate() {
      angle += 2;
      if (angle > 360) angle -= 360;
      el.style.transform = `rotate(${angle}deg)`;
      requestAnimationFrame(animate);
    }

    requestAnimationFrame(animate);

    return el;
  }

  function getUrlParam(paramName, url = window.location.href) {
    const paramValue = new URL(url).searchParams.get(paramName);
    return paramValue;
  }
})(window, document);

ifram 页面，size回传loader.js

<script>
	updateSize();

  // 监听高度变化
  function updateSize() {
    $('body').css('overflow-y', 'hidden');
    const w = $('main').width();
    const h = $('main').height();
    const u = window.location.href;
    const info = { e: 'size', w, h, u };
    parent.postMessage({ iframe: 'loader', info }, '*', []);
    setTimeout(() => {
      if (document_height != h) {
        updateSize();
        document_height = h;
      }
    }, 300);
  }
</script>

使用loader.js

<script data-loader="true" src="loader.js"></script>