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

There is no way to know from the parent window anything about the iframe's content, unless you have access to the child's code, in which case you could follow this https://stackoverflow.com/questions/9153445/how-to-communicate-between-iframe-and-the-parent-site — alotropico, Jul 17 '20 at 07:08
Does this answer your question? [How to communicate between iframe and the parent site?](https://stackoverflow.com/questions/9153445/how-to-communicate-between-iframe-and-the-parent-site) — alotropico, Jul 17 '20 at 07:09
I don't have permission to access the child element as it is coming from eBay — Areef Syed, Jul 17 '20 at 07:14
I have tried the above ones, but I do not have access to add anything in the child element — Areef Syed, Jul 17 '20 at 07:15

score 1 · Answer 1 · answered Jul 19 '20 at 16:32

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.

P. S. : $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.

score 0 · Answer 2 · answered Jul 17 '20 at 09:26

0

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.

answered Jul 17 '20 at 09:26

1

I have tried this, but for cross-domain to work, you need to add a script inside iframe src. And I do not have the permission to access it. – Areef Syed Jul 17 '20 at 14:04
@AreefSyed You can append a script tag to iframe's content – Jul 17 '20 at 14:10
Could you please elaborate it. I think that would not be possible as I do not have permission to read/write the contents of the iframe. But if you have way for this to work then please suggest. Thanks – Areef Syed Jul 18 '20 at 11:23

Adjust height of iframes of cross-origin-domains

2 Answers2