Can't find a way to automatically resize my iframe to fit its content

Question

I am refactoring my personal website, it's a portfolio in which I want to load different pages depending on the project the user wants to see, and I have an issue while loading a subpage in an iframe. I have tested a bunch of different javascripts and css methods to automatically detect the height of the subpage but everything that I am testing either seems not to be able to read the height of the subpage or as the same effect that setting height="100%" in the iframe, which only fills the parent div instead of extending it.

Here is what I got at the moment:

In the head:

<script>
    function resizeIframe(obj) { 
        obj.style.height = obj.contentWindow.document.documentElement.scrollHeight + 'px';          
    }
</script>

My iframe:

<iframe sandbox="allow-same-origin allow-scripts" lang="en" src="subpage.html" allowTransparency="true" scrolling="no" frameborder="0" width="100%" onload="resizeIframe(this)"></iframe>

Can someone help me there? Am I missing something?

P.S: I'm self taught in both webdesign and programing so it is possible that my question is stupid or that I am missing something obvious... sorry if that's the case :/

P.S bis: I know the use of iframe is not always the best, but in my case it allows me to integrate and maintain webpages really easily as I only need to export my pages from a Notion I set up with all the content from my website subpages and voila... No need to create all by myself all the subpages of the website and it would be so easy to maintain

Alucard777 · Accepted Answer · 2020-06-18T14:44:32.820

0

Creating the ifame element dynamically solved this problem.

See: Creating an IFRAME using JavaScript

And: Make iframe automatically adjust height according to the contents without using scrollbar?

Also the lang attribute seemed to be the culprit in the first place.

It’s also not very clear as to why the iframe does not respond as intended with the HTML lang attribute. Perhaps that’s only the case on this project?

Here you can find info on the iframe https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe and its attributes.

And here you have info on Global HTML attributes...https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes.

edited Jun 18 '20 at 14:44

answered Jun 17 '20 at 14:14

Alucard777

50
7

I updated the answer to show what i get...full with and full height of the content inside the iframe, you can see by the scroll bar on the side. – Alucard777 Jun 17 '20 at 15:23
Yes... I have the whole page loaded in the iframe. Full width and full height. – Alucard777 Jun 17 '20 at 16:01
Add that width 100vw in the main css not inline. If you stil have issues and If you want i can grab the repo from github there and make the changes – Alucard777 Jun 17 '20 at 16:12
No problem ill keep you posted – Alucard777 Jun 17 '20 at 16:23
can you give me write access to the repository i want to push the changes. Thanks. – Alucard777 Jun 17 '20 at 18:27
what do you mean? is it working now? do you still need help? i still cant commit and this is not the place to do this. – Alucard777 Jun 17 '20 at 18:58
okay cool i made the commit, it should be working now let me know if its okay on your side. – Alucard777 Jun 17 '20 at 19:28
You solved it all and you even provide explanations, thanks a lot dude! – Dylan Jun 18 '20 at 15:16

Can't find a way to automatically resize my iframe to fit its content

1 Answers1