Forums
Advanced iframe For...
Advanced iframe pro
Embedding page from...
 
Notifications
Clear all

Embedding page from Google AppScript HTML for auto resizing

 
Advanced iframe pro
Last Post by TinyWebGallery 5 months ago
2 Posts
2 Users
0 Reactions
347 Views
RSS
Posts: 1
 Luxe Studio
Topic starter
Aug 06, 2024 12:17 pm
(@luxe-studio)
New Member
Joined: 5 months ago

I am trying to get advance iFrame working on this page for auto resizing, but with no luck

https://theluxestudio.co.uk/appointment

It is embedding a page hosted on Google AppScript

I followed the guide for example-53 and added the following to the bottom of the </body>

 

<!-- Javascript to autosize iFramne starts here-->
<html>
<head>
..
</head>
<body>
...
 
<script>
var iframe_id = "appointment_request";
var updateIframeHeight = "true";
var hide_page_until_loaded_external = "true";
var iframe_hide_elements = "#iframe-header,#iframe-footer,#some-images";
var iframe_content_id = "#iframe-content";
var iframe_content_styles = "color:#ff0000";
/* This is the difference to example 6 */
var usePostMessage = true;
/* This is the difference to example 51 */
var domainMultisite = true;
var jquery_path = 'jquery.min.js';
var resize_path = 'jquery.ba-resize.min.js';
</script>
<?!= Include('ai_external.js.html'); ?>
<!-- Javascript to autosize iFramne ends here-->
</body>
</html>

The ai_external.js is copied from
https://www.theluxestudio.co.uk/wp-content/plugins/advanced-iframe/js/ai_external.js
and hosted on AppScript project and included in the project through an Include function that works for all other javascript hosted on the appScript project.

 

One small change on the ai_external.js is this as it wasn't getting loaded correctly by the google AppScript and spliting part of javascript in the html body

 
window.jQuery || document.write('<script src="' + jquery_path + '"></script>');
 
replaced by 
 
var backSlash = '/';
window.jQuery || document.write(`<script src="${jquery_path}"><${backSlash}script>`);

I also tried like this, but with no luck

<script>
var iframe_id = "appointment_request";
....
var resize_path = 'jquery.ba-resize.min.js';

</script><script src="https://www.theluxestudio.co.uk/wp-content/plugins/advanced-iframe/js/ai_external.js"></script>

my iframecode in wordpress looks like this
[advanced_iframe id="appointment_request" securitykey="" use_shortcode_attributes_only="true" src="https://script.google.com/macros/s/AKfycbyUid4iynT96cBWsU1yj7UsKSUpa7vKmocywhR6Z2he6pWAOUmDuVrppshtPxEpQSdXPQ/exec" height="1000" width="98%" scrolling="no" use_post_message="debug" multi_domain_enabled="true"]

 

What I am doing wrong

This topic was modified 5 months ago by Luxe Studio
1 Reply
TinyWebGallery
Posts: 925
 TinyWebGallery
Admin
Aug 06, 2024 10:08 pm
(@admin)
Prominent Member
Joined: 16 years ago

Can you please change on the top of the file
var extendedDebug = false;
to
var extendedDebug = true;

Unfortunately Chrome let me not debug you setup. This debug hopefully gives some more insights.

Some code is executed because I see that a wrapper div is created 

Can you below 
var usePostMessage = true;

also add
var debugPostMessage = true;

 

What you also can try is to add a delay with

var onload_resize_delay=1000

So the resize is delayed.

Best regards, Michael

 

 

Reply
Forum Jump:
  Previous Topic
Next Topic