I'm displaying an iframe from a different domain, which I have control over, and have inserted the ai_external.js script in the head section. Despite specifying the correct Divs, both the header and footer continue to appear in the iFrame. I've attached a screenshot of the code.
Any pointers as to where I'm going wrong would be appreciated.
This is my shortcode:
[advanced_iframe use_shortcode_attributes_only="true" src="https://twistedlime.co.uk/john/sales/" width="100%" height="600" hide_part_of_iframe="" iframe_hide_elements="#masthead, #site-header, #colophon" enable_external_height_workaround="true" use_post_message="false"]
Hi,
you mix the solution of the same domain and the external workaround.
iframe_hide_elements="#masthead, #site-header, #colophon"
is for the same domain if you define it in the shortcode!
You need to set this in the administration - then it is saved to the ai_external.js
Also do not use
use_post_message="false"
this should be set in the administration and set to true - false is for the free version.
Also see this examples:
Best regards, Michael
Thank you for the response Michael.
I've made changes as per your comments, and using the example provided, solely for the header just now.
This is the shortcode:
[advanced_iframe use_shortcode_attributes_only="true" src="https://MYSITE.co.uk/john/sales/" width="100%" height="600" enable_external_height_workaround="true" use_post_message="true" multi_domain_enabled="true"]
Interestingly, when using the shortcode generator it didn't insert the last two settings, I copied them from your example.
I created the config file for ai_external.js, and checked it's being included.
/** * Advanced iframe pro external workaround file v2024.5 * Created: 2024-10-06 09:05:21 */ /* jslint devel: true, evil: false */ // I added this for IOS debugging as there it is hard to find out where the problem is var extendedDebug = false; var aiParent = window.parent; <script> var iframe_id = "advanced_iframe"; var updateIframeHeight = "true"; var hide_page_until_loaded_external = "true"; var iframe_hide_elements = "#masthead, site-header"; var iframe_content_id = "#content, site-content"; var usePostMessage = true; var domainMultisite = true; var jquery_path = 'jquery.min.js'; var resize_path = 'jquery.ba-resize.min.js'; </script> <script src="ai_external.js"></script>
Checked the parent site, ai_external.js reference is correctly loading:
<script src="https://MYSITE.co.uk/john/wp-content/plugins/advanced-iframe/js/ai.min.js?ver=1" id="ai-js-js"></script> <link rel="https://api.w.org/" href="https://MYSITE.co.uk/john/wp-json/" /><link rel="alternate" title="JSON" type="application/json" href="https://MYSITE.co.uk/john/wp-json/wp/v2/pages/9" /><link rel="EditURI" type="application/rsd+xml" title="RSD" href="https://MYSITE.co.uk/john/xmlrpc.php?rsd" /> <meta name="generator" content="WordPress 6.6.2" />
Cleared browser caches, but the header is still there.
Thoughts?
Looks you have modified the ai_external.js
https://twistedlime.co.uk/wls/wp-content/plugins/advanced-iframe/js/ai_external.js
And made it invalid Javascript.
You should not modify ai_external.js by hand!
#masthead, site-header
should be simply set in the administration at
iframe_hide_elements
if you press save in the administration it is saved to the ai_external.js where is should be.
In my example I showed you, make the settings in one script tag and then include ai_external.js afterwards.
You added the settings INTO ai_external.js what is not shown in the example.
Also you have included ai_external.js 2 times to the external page. one time is more than enough!
Keep it simple and make the settings in the administration. In my examples I have the config before because I have over 50 examples which all work differently with one single ai_external.js
Best regards, Michael