I have been trying to hide certain elements such as the header, footer and h1 titles from the iframe and they have no effect on the pages/content being loaded within the iframes.
Do I need to add some code to the iframes on the actual page?
Or can these settings be applied in the WP dashboard > Settings > Advanced iframe Pro > Modify the iframe settings, so that they are applied to all iframes used throughout the site?
I am using the auto-height feature for the iframes as the content is dynamic so varies in height.
You can preview the page where the content is loaded here: removed link
*Note that the header and footer are hidden on the primary content shown (but h1 heading is there). If you click on any of the links (such as 'choose options'), it then loads another page within the iframe that shows the headers and footers.
Please can you tell me what needs to be done to hide these elements?
I'll be happy to provide login credentials if necessary too.
Thanks,
Steve
Hi,
the main point is are you on the same domain or not. If auto height is working removal of elements should too.
Have you seen the working demo?
same domain: http://www.tinywebgallery.com/blog/advanced-iframe/demo-advanced-iframe-2-0
different domain: http://www.tinywebgallery.com/blog/advanced-iframe/advanced-iframe-pro-demo/external-workaround-with-post-message
and about the settings. Depends on the you setup. same domain or different domain.
Links are removed for your first posts. So please add spaces into the link so I can take a look.
Best regards,
Michael
It is a page created on the same domain being used in the iframes.
The content being used had to be inserted using Gutenberg page builder, and I want to insert it into an existing page.
The link to check is here: https:// staging8.pagodasecurity .co.uk /training/
Hi,
was the resize working without the timeout of 1 sec? Because modifications are done right away.
I checked the code. it seems the needed method is not rendered somehow.
Do you have a plugin which optimized inline Javascript?
Maybe your content is loaded asynchronous while you need a delay. And at this point of time the code to modify does not exist yet.
If this is the case you can use the external workaround. There I modified a while ago that modifications are also done delayed.
Best regards, Michael
I have done some further testing on this based on your suggestions.
Please see my comments below:
I had initially set this up using the free version of the plugin and the auto-height resize did not work very well without the delay/timeout of 1 second. I have just disabled this and all other inline code for both advanced iframes used on this page and the auto-height function seems to work fine now.
I was using a caching and optimisation plugin that may have combined and served javascript files differently. I have however disabled ALL caching and optimisation on the site (both in WordPress and on the hosting server) and I still cannot hide certain elements from loading.
The data included in these iframes is generated by WooCommerce and the date is pulled in from a booking system and propagated by the current available slots, so there may be a delay in the data being pulled in to propagate the calendar and date listings.
I am attempting to setup the workaround even though the domain is the same, but I have noticed the following message: "You are still using iframe communication from the free version. Please switch to postMessage communication to get all possible features." I don't know what to do about that??
It would be very helpful to just have a button to switch the settings.
After trying to use the workaround it has made everything worse and not even the auto height feature works anymore. I cannot add the necessary script code to the header or above the body of the page as it is a page within the same website I am trying to insert as an iframe.
This is incredibly frustrating and I'm afraid your plugin is not user friendly at all.
As a compromise is it possible to instead leave all elements of the page displaying in the iframe, but instead make it so any links directing to another page on the site open as new pages (not within the iframe). At least then the iframe auto-height will work and I won't have to worry as much about the header and footer being shown.
You can see what I mean by hovering over a calendar entry and then clicking the blue button that says 'Select Options', which then loads a new page of the same website within the iframe.
Thanks for your help so far.
