Question

我正在尝试将数据从eBay提取到iframe。问题在于它不调整其内容物的高度，并在下面留出很大的空隙。我尝试采用iframe主体的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。 S .： $ 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 = ebayheadga。 = 1＆oneClk = 2＆secureDesc = 1

由于前缀'url ='，这是无效的URL。 substr（）函数将其删除。

Answer 2

您可以使用以下库：iframe-resizer

它使您可以自动调整跨域iFrame的高度和宽度，以适合其包含的内容。

调整跨域网域iframe的高度

2 个答案: