How to show only one div inside iframe?

Hi please see

https://www.tinywebgallery.com/blog/advanced-iframe/advanced-iframe-pro-demo/sub-domain-auto-height-and-css-modifications

have you added the document domain also to the page in the iframe?

Press F12 and check the console! onload_show_element_only is normally not the best ideo as is removed the rest of the dom! try to hide the elements around.

Best regards,
Michael

Hi, the situation is other way around. The parent domain, example.com is where the iframe is, and the subdomain has the actual content. the subdomain content needs to be included in the main domain iframe.

This does not matter. both need to have the same document domain.
https://www.example.com and subdomain.example.com are different.
Press f12. the console will tell you if there are problem.

Best regards,
Michael

the document domain is added in the header of the theme file as such,
<script>document.domain='example.com';</script>
Ok, I get it that It cannot be made to show only a particular div, whatever we do, right?.
So We can just hide the surrounding elements., only that will work?.
BTW, why should I press f12 to open console?, what should I be looking for there?

Ok, Hiding the elements too didn’t work. Any idea what I might be doing wrong?

Can you show me the page? The url and the shortcode?

Anything in the console? (F12) – There the browser will tell you errors there! This is the most important tool you have to find your problem.

Best regards,
Michael

Ok, I figured it out. I didn’t add the external js code the the parent page. I have one more doubt, I can ask here, or I should create a new topic?

How to resize the iframe to the content,. Like I don’t want scrollbars.

So which “mode” do you run now?

https://www.tinywebgallery.com/blog/advanced-iframe/advanced-iframe-pro-demo/sub-domain-auto-height-and-css-modifications
?

onload_resize=”true” should do this. Again: the browser console tells you if there a problems.

See https://www.tinywebgallery.com/blog/advanced-iframe-resize-to-content-summary

Depending on your pages you might need the real external workaround and maybe also the pro version. As it seems you don’t want to share any url I cannot say more.

Best, Michael

Sorry, my client doesn’t allow me to. It is an outsourcing project. I cannot disclose the details without my client’s permission,.And they don’t know am asking am in forums to do the stuff. That’s how strict they are.

[advanced_iframe use_shortcode_attributes_only="true" src="https://api.example.com/post-1/" width="100%" height="800" enable_responsive_iframe="true" onload_show_element_only="#easytab" onload_resize="true" onload_resize_width="true" add_document_domain="true"]

This is the code am right now using, but no the scrollbars do not go,. as well as the iframe isn’t being resized.

Hi,

onload_resize_width=”true”

does normally not make sense if you use width 100%.

What is the output of your browser console (F12). Any errors there?
You can also check the source of both page. They need to have both document.domain set properly.

https://www.tinywebgallery.com/blog/advanced-iframe-resize-to-content-summary
shows you the most commons things you need to do. It depends on the page in the iframe if a resize delay or morre advanced settings like described in the link above is needed.

Best regards,
Michael

Hi, Yes corrected that, But I just now was able to diagnose the problem. Actually the iframe works as expected in desktop, but in mobile devices. it still shows the whole source website.

You can add ?aiEnableDebugConsole=true to the url. (Or enable it in the config)
then you get the debug console also on a mobile device.
There you can maybe see the error on the mobile device. If there is something please report the error here.
So if you are on a desktop then the auto height works and also showing one element also works?

Best regards, Michael