iFrame height to fit content

Site URL: https://seafoodpeople.squarespace.com/test

I have inserted an iFrame, but I want the height to fit the content on the page, without having to scroll within the iframe window. The content changes from day to day, so the height would have to fit accordingly.

I can manage the no scroll by adding: scrolling="no" to the code. But when changing the height to be height="100%", the height becomes short like 50 px high... so that is not working for me.

Code inserted as an embed block:

<iframe src="https://api.recman.no/i1.php?key=210903092954k6c0ac93e83d3c23cfe2fc33ee3dd6cd01021880892&language_id=1" width="100%" height="750" frameborder="0" allowfullscreen="allowfullscreen"></iframe>

Is there an easy and simple solution to this?

I think the short answer to your final question is: No.

This is going to be very challenging due to web security / cross-domain scripting security issues etc. The issue is that the iFrame is in one document and its content is in another. these documents cannot script against each other which you would need to do in order for the child document to wait until its content had loaded. 

As you don't have control over the child document (recman.no) you won't be able to do this. The only way is to have a cross-frame messaging which you would have to code in both the parent AND the child. It's going to be impossible in this case as you don't have control over the child document. 

Sorry. But if it's any consolation, the fact that you can't do this has probably saved pretty much everyone on the Internet from having their online lives hacked/ruined etc. 🙂

On 9/3/2021 at 2:33 PM, iamdavehart said:

I think the short answer to your final question is: No.

This is going to be very challenging due to web security / cross-domain scripting security issues etc. The issue is that the iFrame is in one document and its content is in another. these documents cannot script against each other which you would need to do in order for the child document to wait until its content had loaded. 

As you don't have control over the child document (recman.no) you won't be able to do this. The only way is to have a cross-frame messaging which you would have to code in both the parent AND the child. It's going to be impossible in this case as you don't have control over the child document. 

Sorry. But if it's any consolation, the fact that you can't do this has probably saved pretty much everyone on the Internet from having their online lives hacked/ruined etc. 🙂

 

Thank you for the help and the explanation!