Notifications
Clear all

Issue hiding header and footer

5 Posts
3 Users
0 Reactions
283 Views
Posts: 2
Topic starter
(@john9001)
New Member
Joined: 5 months ago

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"]
4 Replies
TinyWebGallery
Posts: 935
Admin
(@admin)
Prominent Member
Joined: 16 years ago

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:

https://www.tinywebgallery.com/blog/advanced-iframe/advanced-iframe-pro-demo/external-workaround-with-post-message

Best regards, Michael 

 

Reply
Posts: 2
Topic starter
(@john9001)
New Member
Joined: 5 months ago

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?

 

 

 

 

 

 

Reply
TinyWebGallery
Posts: 935
Admin
(@admin)
Prominent Member
Joined: 16 years ago

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

 

Reply
1 Reply
(@healerpillow)
Joined: 3 months ago

New Member
Posts: 1

Posted by: @admin

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! OneBloodRewards

#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

 

 

Thank you for pointing this out, Michael! I appreciate your detailed feedback and explanation.

It seems there was some misunderstanding on my part regarding the correct way to configure the settings. I'll revisit the example you shared and make the necessary adjustments to ensure the settings are configured properly in the administration panel and not directly in ai_external.js.

I'll also ensure that ai_external.js is included only once on the external page, as per your recommendation. Simplifying the setup will definitely help maintain clarity and consistency.

Thanks again for your guidance, and I'll make sure to follow the best practices you outlined.

 

Reply