Notifications
Clear all

Issue hiding header and footer

4 Posts
2 Users
0 Reactions
108 Views
Posts: 2
Topic starter
(@john9001)
New Member
Joined: 2 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"]
3 Replies
TinyWebGallery
Posts: 924
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: 2 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: 924
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