javascript - 如何在没有纵横比假设的情况下使 iframe 响应？

无法使用 Javascript 与不同来源的 iFrame 进行交互以获取它的大小；唯一的方法是使用window.postMessage设置targetOrigin为您的域或*iFrame 源中的通配符。您可以代理不同源站点的内容并使用srcdoc，但这被认为是一种hack，它不适用于 SPA 和许多其他更动态的页面。

同源 iFrame 大小

假设我们有两个相同的原点 iFrame，一个是短高度，一个是固定宽度：

<!-- iframe-short.html -->
<head>
  <style type="text/css">
    html, body { margin: 0 }
    body {
      width: 300px;
    }
  </style>
</head>
<body>
  <div>This is an iFrame</div>
  <span id="val">(val)</span>
</body>

和一个长高的 iFrame：

<!-- iframe-long.html -->
<head>
  <style type="text/css">
    html, body { margin: 0 }
    #expander {
      height: 1200px; 
    }
  </style>
</head>
<body>
  <div>This is a long height iFrame Start</div>
  <span id="val">(val)</span>
  <div id="expander"></div>
  <div>This is a long height iFrame End</div>
  <span id="val">(val)</span>
</body>

我们可以使用我们将发送到父窗口的load事件获取 iFrame 大小：iframe.contentWindow.documentpostMessage

<div>
  <iframe id="iframe-local" src="iframe-short.html"></iframe>
</div>
<div>
  <iframe id="iframe-long" src="iframe-long.html"></iframe>
</div>

<script>

function iframeLoad() {
  window.top.postMessage({
    iframeWidth: this.contentWindow.document.body.scrollWidth,
    iframeHeight: this.contentWindow.document.body.scrollHeight,
    params: {
      id: this.getAttribute('id')
    }
  });
}

window.addEventListener('message', ({
  data: {
    iframeWidth,
    iframeHeight,
    params: {
      id
    } = {}
  }
}) => {
  // We add 6 pixels because we have "border-width: 3px" for all the iframes

  if (iframeWidth) {
    document.getElementById(id).style.width = `${iframeWidth + 6}px`;
  }

  if (iframeHeight) {
    document.getElementById(id).style.height = `${iframeHeight + 6}px`;
  }

}, false);

document.getElementById('iframe-local').addEventListener('load', iframeLoad);
document.getElementById('iframe-long').addEventListener('load', iframeLoad);

</script>

我们将为两个 iFrame 获得适当的宽度和高度；您可以在此处在线查看并在此处查看屏幕截图。

不同来源的 iFrame 大小破解（不推荐）

此处描述的方法是一种hack，如果绝对必要并且没有其他方法，则应该使用它；它不适用于大多数动态生成的页面和 SPA。该方法使用代理获取页面 HTML 源代码以绕过 CORS 策略（cors-anywhere这是一种创建简单 CORS 代理服务器的简单方法，它有一个在线演示https://cors-anywhere.herokuapp.com）然后将 JS 代码注入该 HTML 以使用postMessage并发送大小iFrame 到父文档。它甚至处理 iFrame resize（与 iFrame 结合width: 100%）事件并将 iFrame 大小发送回父级。

`patchIframeHtml`：

修补 iFrame HTML 代码并注入自定义 Javascript 的函数，该 Javascript 将用于postMessage将 iFrame 大小发送到父级 onload和 on resize。如果参数有值origin，则 HTML<base/>元素将使用该原始 URL 附加到头部，因此，HTML URI 之类/some/resource/file.ext的将被 iFrame 内的原始 URL 正确获取。

function patchIframeHtml(html, origin, params = {}) {
  // Create a DOM parser
  const parser = new DOMParser();

  // Create a document parsing the HTML as "text/html"
  const doc = parser.parseFromString(html, 'text/html');

  // Create the script element that will be injected to the iFrame
  const script = doc.createElement('script');

  // Set the script code
  script.textContent = `
    window.addEventListener('load', () => {
      // Set iFrame document "height: auto" and "overlow-y: auto",
      // so to get auto height. We set "overlow-y: auto" for demontration
      // and in usage it should be "overlow-y: hidden"
      document.body.style.height = 'auto';
      document.body.style.overflowY = 'auto';

      poseResizeMessage();
    });

    window.addEventListener('resize', poseResizeMessage);

    function poseResizeMessage() {
      window.top.postMessage({
        // iframeWidth: document.body.scrollWidth,
        iframeHeight: document.body.scrollHeight,
        // pass the params as encoded URI JSON string
        // and decode them back inside iFrame
        params: JSON.parse(decodeURIComponent('${encodeURIComponent(JSON.stringify(params))}'))
      }, '*');
    }
  `;

  // Append the custom script element to the iFrame body
  doc.body.appendChild(script);

  // If we have an origin URL,
  // create a base tag using that origin
  // and prepend it to the head
  if (origin) {
    const base = doc.createElement('base');
    base.setAttribute('href', origin);

    doc.head.prepend(base);
  }

  // Return the document altered HTML that contains the injected script
  return doc.documentElement.outerHTML;
}

`getIframeHtml`：

如果useProxy设置了参数，则使用代理获取页面 HTML 绕过 CORS 的函数。postMessage发送大小数据时，可能会有其他参数传递给。

function getIframeHtml(url, useProxy = false, params = {}) {
  return new Promise(resolve => {
    const xhr = new XMLHttpRequest();

    xhr.onreadystatechange = function() {
      if (xhr.readyState == XMLHttpRequest.DONE) {
        // If we use a proxy,
        // set the origin so it will be placed on a base tag inside iFrame head
        let origin = useProxy && (new URL(url)).origin;

        const patchedHtml = patchIframeHtml(xhr.responseText, origin, params);
        resolve(patchedHtml);
      }
    }

    // Use cors-anywhere proxy if useProxy is set
    xhr.open('GET', useProxy ? `https://cors-anywhere.herokuapp.com/${url}` : url, true);
    xhr.send();
  });
}

消息事件处理函数与"Same origin iFrame size"中的完全相同。

我们现在可以在 iFrame 中加载一个跨域域，并注入我们的自定义 JS 代码：

<!-- It's important that the iFrame must have a 100% width 
     for the resize event to work -->
<iframe id="iframe-cross" style="width: 100%"></iframe>

<script>
window.addEventListener('DOMContentLoaded', async () => {
  const crossDomainHtml = await getIframeHtml(
    'https://en.wikipedia.org/wiki/HTML', true /* useProxy */, { id: 'iframe-cross' }
  );

  // We use srcdoc attribute to set the iFrame HTML instead of a src URL
  document.getElementById('iframe-cross').setAttribute('srcdoc', crossDomainHtml);
});
</script>

我们将让 iFrame 调整到其内容的全高，即使使用overflow-y: autoiFrame 主体也不需要任何垂直滚动（它应该是overflow-y: hidden这样我们不会在调整大小时滚动条闪烁）。

你可以在这里在线查看。

再次注意到这是一个 hack，应该避免它；我们无法访问跨域iFrame 文档，也无法注入任何东西。

javascript - 如何在没有纵横比假设的情况下使 iframe 响应？

问题描述

解决方案

同源 iFrame 大小

不同来源的 iFrame 大小破解（不推荐）

`patchIframeHtml`：

`getIframeHtml`：

推荐阅读

javascript - 如何在没有纵横比假设的情况下使 iframe 响应？

问题描述

解决方案

同源 iFrame 大小

不同来源的 iFrame 大小破解（不推荐）

patchIframeHtml：

getIframeHtml：

推荐阅读

`patchIframeHtml`：

`getIframeHtml`：