responsive iframe

alexoliveira · Post by **alexoliveira** » Fri Jan 26, 2024 9:39 am

I would like to know if there is a way to make the iframe responsive to height with content?

BaconFries · Post by **BaconFries** » Fri Jan 26, 2024 9:51 am

Haven't you previously asked this? see the following from yourself with Pablos reply to you with a possible solution.

I say the iframe of the page exists how to make it responsive?

viewtopic.php?p=468801#p468801

alexoliveira · Post by **alexoliveira** » Fri Jan 26, 2024 10:11 am

the method taught is not working or something is not right, follow the link to see

https://jbastosimoveis.com.br/im%C3%B3veis/7192.php

alexoliveira · Post by **alexoliveira** » Fri Jan 26, 2024 1:36 pm

Could you send the code on how to turn the iframe into responsive at the height?

zinc · Post by **zinc** » Fri Jan 26, 2024 2:24 pm

Maybe this might be what you are looking for?

https://wwb.art-studio.top/index.php?ro ... duct_id=72

alexoliveira · Post by **alexoliveira** » Fri Jan 26, 2024 3:05 pm

Guys, I really need a solution here, if anyone can help.

BaconFries · Post by **BaconFries** » Fri Jan 26, 2024 3:14 pm

Guys, I really need a solution here, if anyone can help

Understand you need a solution but have you looked at the two suggestions given one by Pablo and zinc either one will work.

Pablo wrote: ↑Sat Dec 18, 2021 7:11 am Maybe this will be helpful?
https://www.tutorialrepublic.com/faq/au ... script.php

Note that this may not work because of browser security restrictions

zinc wrote: ↑Fri Jan 26, 2024 2:24 pm Maybe this might be what you are looking for?

https://wwb.art-studio.top/index.php?ro ... duct_id=72

alexoliveira · Post by **alexoliveira** » Fri Jan 26, 2024 3:18 pm

Code: Select all

<script>
    // Selecting the iframe element
    var iframe = document.getElementById("imovel");
    
    // Adjusting the iframe height onload event
    iframe.onload = function(){
        iframe.style.height = iframe.contentWindow.document.body.scrollHeight + 'px';
    }
    </script>

when adding the iframe in the code, it doesn't work

BaconFries · Post by **BaconFries** » Fri Jan 26, 2024 3:42 pm

The reason it doesn't work is because it is only meant as an "Example" for it to work you will need to reference your own iframe with its id. Please note if you wish to use external code it is for reference only and you need to know how to use it yourself.

alexoliveira · Post by **alexoliveira** » Fri Jan 26, 2024 3:43 pm

yes, I added the id correctly with the iframe that is on the page, id name: imovel

alexoliveira · Post by **alexoliveira** » Fri Jan 26, 2024 5:00 pm

the iframe id: imovel in the code notice that I put imovel too, I added it in the <head></head>

alexoliveira · Post by **alexoliveira** » Sat Jan 27, 2024 12:57 pm

BaconFries · Post by **BaconFries** » Sat Jan 27, 2024 3:44 pm

Can you provide a url with just a iframe with how you have added the code nothing else so it can be viewed.

alexoliveira · Post by **alexoliveira** » Sat Jan 27, 2024 4:38 pm

here it is:
https://jbastosimoveis.com.br/imoveis/4141.php

alexoliveira · Post by **alexoliveira** » Sat Jan 27, 2024 5:50 pm

What to do in this case, the code points to the iframe id, it still doesn't work

BaconFries · Post by **BaconFries** » Sat Jan 27, 2024 7:08 pm

The reason why it doesn't work is because you have not included the required style!!.

Code: Select all

<style>
iframe{
width: 100%;
border: 2px solid #ccc
}
</style>

alexoliveira · Post by **alexoliveira** » Sat Jan 27, 2024 7:48 pm

where should I put the style?

BaconFries · Post by **BaconFries** » Sat Jan 27, 2024 10:11 pm

You insert via Page HTML Between the <head></head> tags*

crispy68 · Post by **crispy68** » Sat Jan 27, 2024 11:26 pm

I think you are going to have issues getting the iframe to be 100% if the page you are showing in the iFrame is from another domain. If you are hosting the page yourself then it should work. If not, there are solutions for cross domain but you have to have access to the other domain to add some code for it to work.

Otherwise, I think you will need to set a specific height to the iframe. You can use CSS.

Code: Select all

<style>
#imove1{width:100%;height:800px;}
</style>

You could also set height to 100vh and that would make it at lease a minimum height of the browser window.

BaconFries · Post by **BaconFries** » Sun Jan 28, 2024 12:01 am

crispy68 (Ron) the css I gave is not by me it was from the original author at the following url below I only gave as alexoliveira hadn't added it to anywhere in his page source only the javascript.
https://www.tutorialrepublic.com/faq/au ... script.php

alexoliveira · Post by **alexoliveira** » Sun Jan 28, 2024 1:18 pm

Yes, the iframe domain is on the same hosting as the website, I'm kind of integrating a real estate system on the website made in wysiwyg, which I'm not able to do and make the iframe 100% responsive in height to show the complete content.

alexoliveira · Post by **alexoliveira** » Sun Jan 28, 2024 1:58 pm

zinc wrote: ↑Fri Jan 26, 2024 2:24 pm Maybe this might be what you are looking for?

https://wwb.art-studio.top/index.php?ro ... duct_id=72

Does your extension work for links outside of wysiwyg?

BaconFries · Post by **BaconFries** » Sun Jan 28, 2024 2:04 pm

Other than what I have written have you tried crispy68 suggestion? Also note if the page you are viewing in the iframe the (real estate) is not responsive itself then it will not adjust with the iframe meaning you will need to make the (real estate) page responsive.

BaconFries · Post by **BaconFries** » Sun Jan 28, 2024 2:06 pm

zinc wrote: ↑Fri Jan 26, 2024 2:24 pm Maybe this might be what you are looking for?

https://wwb.art-studio.top/index.php?ro ... duct_id=72

Does your extension work for links outside of wysiwyg?

Please contact the developer of the extension for all questions on how it works.

alexoliveira · Post by **alexoliveira** » Sun Jan 28, 2024 2:11 pm

Yes, the iframe page is 100% responsive, but I still couldn't make the code work in the iframe, here's the code:

Code: Select all

<script>
    // Selecting the iframe element
    var iframe = document.getElementById("imovel");
    
    // Adjusting the iframe height onload event
    iframe.onload = function(){
        iframe.style.height = iframe.contentWindow.document.body.scrollHeight + 'px';
    }
</script>
<style>
iframe{
width: 100%;
border: 2px solid #ccc
}
</style>

BaconFries · Post by **BaconFries** » Sun Jan 28, 2024 2:14 pm

Did you read my reply about trying the css suggestion by crispy68?.

alexoliveira · Post by **alexoliveira** » Sun Jan 28, 2024 2:16 pm

yes, but in this case of css, can I make the iframe responsive in height?

crispy68 · Post by **crispy68** » Sun Jan 28, 2024 2:57 pm

Does the real estate system offer any sort of embed code to embed it on a website?

Using my suggestion will only make the iframe as long as the browser window. If the content in the iframe is longer than the browser window, you will still have vertical scrollbars.

alexoliveira · Post by **alexoliveira** » Sun Jan 28, 2024 5:31 pm

Yes, it supports it, it is responsive when accessed by mobile device, the problem here is making the iframe responsive, as I already had this happen in previous versions of wysiwyg, after updating to the new one, it no longer worked.

Post by **Pablo** » Sun Jan 28, 2024 5:53 pm

This has nothing to with WWB. An Inline frame is a standard HTML feature. it work the same as in previous versions.

alexoliveira · Post by **alexoliveira** » Sun Jan 28, 2024 5:55 pm

The code is not working. How to make the iframe adjust to the size of the content inside the iframe. i.e. make the iframe responsive in autura.

Post by **Pablo** » Sun Jan 28, 2024 6:31 pm

If the code does not work then this is unrelated to WWB, it an issue with your code.
Please check the error console of the browser to see why it does not work.

BaconFries · Post by **BaconFries** » Sun Jan 28, 2024 6:39 pm

The code is not working. How to make the iframe adjust to the size of the content inside the iframe. i.e. make the iframe responsive in autura.

If it doesn't work then it is the script itself and not related to WWB. You should contact the script developer for help. Note it was provided for you to try and hopefully you could use it on the understanding you know how to use and insert correctly yourself.

alexoliveira · Post by **alexoliveira** » Sun Jan 28, 2024 6:49 pm

I completely understand that it is not related to WWB, I am just here for a solution, I would really like to make the iframe responsive in height.
I tried using the extension iframe resizer but I have no solution.

alexoliveira · Post by **alexoliveira** » Sun Jan 28, 2024 7:31 pm

some extension that automatically adjusts the height of the iFrame according to its content?

Post by **Pablo** » Sun Jan 28, 2024 8:46 pm

Yes, but this only works if you have control over the page inside the frame:
https://www.wysiwygwebbuilder.com/iframeresizer.html

But did you check this?

Please check the error console of the browser to see why it does not work.

This should give you a clue why it does not work.

alexoliveira · Post by **alexoliveira** » Sun Jan 28, 2024 10:19 pm

I don't understand how to use this pablo extension, is there anything easier to use?

Post by **Pablo** » Mon Jan 29, 2024 7:31 am

No, there is nothing easier.
But did you read the documentation?

alexoliveira · Post by **alexoliveira** » Wed Jan 31, 2024 7:54 pm

still unsuccessful, If someone could send a zip file, with wysiwyg already working with a responsive iframe, it would help me a lot.

alexoliveira · Post by **alexoliveira** » Fri Feb 02, 2024 10:42 pm

Can anyone with a responsive iframe already work please send it?

alexoliveira · Post by **alexoliveira** » Thu Feb 08, 2024 12:34 am

Any solution please team?

crispy68 · Post by **crispy68** » Thu Feb 08, 2024 2:12 am

The iframeresizer extension that Pablo mentioned is probably the best way to handle this but you have to have access to page in the iframe. If you are hosting it on your own site, then I would think you should have access to use it. You will need to follow the instructions in adding to both pages. It is really hard to help you when we don't have access to the page in the iframe. If we try, then it is cross domain which causes issues and we don't have access to your page, so there is no way for us to create a working example to test and give you.

What software are you using for whats in the iframe?

BaconFries · Post by **BaconFries** » Thu Feb 08, 2024 3:11 am

It is really hard to help you when we don't have access to the page in the iframe.

crispy68 (Ron) the site in question is the following:
https://adm.jbastosimoveis.com.br/imove ... esidencial

crispy68 · Post by **crispy68** » Thu Feb 08, 2024 3:22 am

So I'm assuming this is on a 3rd party site then? I was under the impression he was hosting it on his own server. If 3rd party then the extension won't work.

BaconFries · Post by **BaconFries** » Thu Feb 08, 2024 3:36 am

I believe so, viewing the source it is a "theme" meaning it could be from the likes of Drupal/Joomla or something similar.

alexoliveira · Post by **alexoliveira** » Thu Feb 08, 2024 6:19 am

Guys, the site is hosted on my server, what should I do next, add some code to the page that goes in the iframe?

Post by **Pablo** » Thu Feb 08, 2024 7:27 am

You still have not included a demo of what you have done. That makes it very difficult to help you...

alexoliveira · Post by **alexoliveira** » Sun Feb 11, 2024 3:19 am

Here's a demo of how I'm using the iframe with the code
https://startagencia.net.br/demo.zip

Post by **Pablo** » Sun Feb 11, 2024 7:52 am

The code does not work because the page displayed inside the inline frame in not in the same domain. So, it cannot be accessed for security reasons.
You can check this in the error console of the browser.

crispy68 · Post by **crispy68** » Sun Feb 11, 2024 4:05 pm

So I put together a demo using the code for iframe resizer. You will need to add the code manually because there will be code needed to be added to the page you want to show in the inline frame.

Here is my demo:
https://wizbangwebdesign.com/demo/frame/

My demo is a header and footer with the inline frame in between.

To make it work, visit https://github.com/davidjbradshaw/iframe-resizer and download the zip file and unzip it.

The steps below assume that you have your .js files in a separate folder on the server.

1. In WB, add a HTML box and add the following code set to the before </body> tag:

Code: Select all

<script type="text/javascript" src="js/iframeResizer.min.js"></script>
<script>
  iFrameResize({}, '#InlineFrame1')
</script>

Between the {} above you can add other options (see the github link above for more info). Make sure to change the ID in the above code to match your inline frame ID.

2. You will need to access the page you want to appear in the inline frame and add the following code at the end of the HTML before the end body tag </body>:

Code: Select all

<script type="text/javascript" src="js/iframeResizer.contentWindow.min.js" defer=""></script>

3. You will need to upload the following .js files to the appropriate spots. Both of these files can be found in the downloaded js folder from github:

iframeResizer.min.js = upload this file to the .js folder for page that contains the iframe
iframeResizer.contentWindow.min.js = upload this file to the .js folder for the page that is appearing in the iframe.

NOTE: I will leave my demo up for a very short time for viewing and then it will be removed.