调整跨域iframe的高度

Question

我正在尝试将数据从 eBay 提取到 iframe。问题是它没有调整其内容的高度，并在下面留下很大的间隙。我尝试采用 iframe Body 的 offsetHeight，但由于它是 CROSS-DOMAIN，我无法从中提取任何属性。请让我知道是否有任何方法可以通过 JS 甚至 CSS 来实现。 我已经尝试了所有可以从 StackOverflow 找到的方法，但它似乎不适用于这里。

<script>
  function onLoad() {
    console.log(
      "height",
      document.getElementById("target").contentWindow.document.body.offsetHeight
    );
  }
</script>
<div class="test">
  <iframe
    id="target"
    sandbox="allow-scripts allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-top-navigation"
    onload="onLoad()"
    class="iframe"
    frameborder="0"
    height="auto"
    width="100%"
    src="https://vi.vipr.ebaydesc.com/ws/eBayISAPI.dll?ViewItemDescV4&amp;item=383383822672&amp;t=0&amp;tid=310&amp;category=171228&amp;seller=walrus_0&amp;excSoj=1&amp;excTrk=1&amp;lsite=3&amp;ittenable=false&amp;domain=ebay.co.uk&amp;descgauge=1&amp;cspheader=1&amp;oneClk=2&amp;secureDesc=1"
    title="Sellers description of item"
  ></iframe>
</div>

Here is a pen to visualize

Answer 1

有一种方法可以实现这一点，但您需要使用代理进行跨域请求。你可以用 PHP 做到这一点。使用以下代码创建一个 php 文件 - content.php：

<?php
$queryString = substr($_SERVER["QUERY_STRING"], 4);
$fileContents = file_get_contents($queryString);
echo $fileContents;
?>

上面的代码是一个简单的 PHP 代理服务器，用于消除 cors 问题。

您的 HTML 将如下所示：

<div id="iframeHolder">
    <iframe id="iframe"
    onload='iframeResizer()'
    scrolling="no"
    sandbox="allow-scripts allow-popups allow-popups-to-escape-sandbox allow-same-origin"
    src="content.php?url=https://vi.vipr.ebaydesc.com/ws/eBayISAPI.dll?ViewItemDescV4&amp;item=383383822672&amp;t=0&amp;tid=310&amp;category=171228&amp;seller=walrus_0&amp;excSoj=1&amp;excTrk=1&amp;lsite=3&amp;ittenable=false&amp;domain=ebay.co.uk&amp;descgauge=1&amp;cspheader=1&amp;oneClk=2&amp;secureDesc=1" height="100%" width="100%" ></iframe>
   </div>

    <script type="text/javascript">
      function iframeResizer(){
        let iframeHolder = document.getElementById('iframeHolder')
      let iframe = document.getElementById('iframe')
      let iframeHeight
      let iframeHolderHeight

      iframeHeight = iframe.contentWindow.document.body.offsetHeight;
      console.log(iframeHeight)
      iframeHolderHeight = iframeHolder.style.height = iframeHeight + 'px'
      }

    </script> 

而 css 将类似于：

#iframeHolder{
        height: 100%;
        position: relative;
      }

      iframe{
        position: absolute;
        height: 100%;
        top: 0;
        left: 0;
      }  

在这里，您将把 URL 传递给 content.php 页面，该页面将解析请求并返回响应。由于 content.php 同源，所以会解决 cors 问题。

P。 : $queryString = substr($_SERVER["QUERY_STRING"], 4);

php中的这段代码是因为$_SERVER["QUERY_STRING"]会是

url=https://vi.vipr.ebaydesc.com/ws/eBayISAPI.dll?ViewItemDescV4&item=383383822672&t=0&tid=310&category=171228&seller=walrus_0&excSoj=1&excTrk=1&lsite=3&ittenable=false&domain=ebay.co.uk&descgauge=1&cspheader =1&oneClk=2&secureDesc=1

这是一个无效的 URL，因为有 'url=' 前缀。 substr() 函数将删除它。

Answer 2

你可以使用这个库：iframe-resizer

它允许您自动调整跨域 iFrame 的高度和宽度以适应其包含的内容。