Adjust height of iframes of cross-origin-domains

Question

I am trying to pull data from eBay to an iframe. The problem is it does not adjust the height of its contents and leaves a large gap below. I tried taking the offsetHeight of iframe Body, but as it is CROSS-DOMAIN, I can not pull any properties out of it. Please let me know if there are any ways to achieve this by JS or even CSS. I have already tried all I could find from StackOverflow, but it just doesn't seem to apply here.

<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

There is a way to achieve this, but you will need to use a proxy for cross-domain-request. You can do this with PHP. Create a php file - content.php with the following code:

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

The code above is a simple proxy server in PHP to remove the cors issue.

Your HTML will look something like this:

<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> 

And css will be something like:

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

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

Here, you will pass the URL to content.php page, where it will parse the request, and return the response. Since content.php is in the same origin, it will resolve the cors issue.

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

This code in php is because $_SERVER["QUERY_STRING"] will be

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

This is an invalid URL because of 'url=' prefix. substr() function will remove it.

Answer 2

You can use this library: iframe-resizer

It allows you the to automatically resize of the height and width of cross domain iFrames to fit their contained content.