Auto-resize breaks JavScript in the iframe

Why do you use
resize_on_click_elements?

you work on different domains so you have to use the autoresize workaround like described in the documentation.

All the features for autoresize on the same domain have to be turned off.

Best, Michael

Thanks. I’m away for a few days, but will try changing this when I get back later in the week, and report back.

I set resize_on_click_elements=”false” on the quick tag, but that has made no difference. The JavaScript inside the page is still disabled due to the error.

Is there an example quick tag published anywhere that I can try out? I just need a simple tag that resizes to the content, auto-resizes when the content changes size, and works with content on a different domain. Whether it works or not needs to be independent of the default global settings in the module, obviously.

No. I mean you work on different domains so you have to use the autoresize workaround like described in the documentation.

You cannot use any of the features which try to access the iframe directly. This will cause an Javascript error!

“the autoresize workaround like described in the documentation” – what exactly am I looking for here that I have not already done? The auto-resizing is working (for the initial page load at least) but then all JavaScript stops working due to the JS error.

One thing the documentation does not give, and something I have not been able to find anywhere, are some simple examples of the shortcode tag.

So, I have iframe content on another domain, and the iframe needs to autosize with the content. Simple. What would the shortcode tag look like? I have read the documentation and done what I believe it says, so what next?

Simple examples for the short code tag are in the FAQ (https://www.tinywebgallery.com/blog/advanced-iframe/advanced-iframe-faq) and also in the administration. The shortcode can be very simple because you do all the settings in the administration. In the shortcode you only overwrite settings.

So what have you done? You have to use the external workaround which means you have to include Javascript to the remote page.

About the Javascript error I can only repeat again: You cannot use any of the features which try to access the iframe directly. This will cause an Javascript error! You have to turn them off. Which also means you have to disable the auto height in the config becaushe this is the one for iframes on the same domain.

I’m taking the approach that the tag should set all the settings that are necessary for it to work. Assuming the default settings in the admin panel are going to work for ALL the iframes that may work in very different ways across many pages of a site, is just asking for trouble. I’m leaving the defaults as they are, and creating the tag configured to do what that tag specifically needs to do.

The iframe *is* resizing – I’ve mentioned that a couple of times. To resize, the JavaScript in the remote iframe content must be loaded from the WP site. That is done, and that is how it is resizing.

Do I need to turn off the auto-height in the config even if it is turned off in the tag? You say the tag just overrides the defaults in the config, so to me that means the config can be ignored and everything required set up in the tag. Is that the case? If so, then there must be a minimum example tag that should just work. Is there not an example of a tag I just copy and paste? Just one example of a tag that simply works with an external URL? There is no mention of external domains on the documentation link you gave.

Can you see where I am coming from? I have a URL, I have placed the required JS in the iframe source page, so I should simply be able to paste a tag into the WP site to make it work. Is it not that simple? Am I just missing the point?

You can simply use the parameter
use_shortcode_attributes_only=”true”
then the default are not used at all.

than the minimum shortcode looks like
[advanced_iframe securitykey=”<your shortcode>” use_shortcode_attributes_only=”yes” src=”https://www.tinywebgallery.com”%5D
(This is also described in the documentation)

External domains do not need any special shortcode. Otherwise it would be mentioned in the documentation of the workaround.
Your problem is that Javascript is rendered that tries to access the external iframe because of a setting you do.

I only see https://www.consil.co.uk/blog. Where is the iframe located?
then I can take a look which maybe solve the problem in a few seconds.

Your shortcode
[advanced_iframe securitykey=”xxxxxxxxxxxxe4e3789e426bba4dxxxxxxxxxxxx” src=”https://www.mysite.co.uk/myform&#8221; resize_on_ajax=”100″ resize_on_click=”100″ onload_resize_width=”false” onload_resize=”false” onload=””]

should be
[advanced_iframe securitykey=”xxxxxxxxxxxxe4e3789e426bba4dxxxxxxxxxxxx” src=”https://www.mysite.co.uk/myform”%5D

and if you like the configure all the tags
[advanced_iframe securitykey=”xxxxxxxxxxxxe4e3789e426bba4dxxxxxxxxxxxx” src=”https://www.mysite.co.uk/myform&#8221; resize_on_ajax=”” resize_on_click=”” onload_resize_width=”false” onload_resize=”false” onload=””]

resize_on_ajax and resize_on_click does also render Javascript which is only allowed on the same domain. They are in the section for settings which work on the same domain only.

Best, Michael

Okay, so I have done this:

[advanced_iframe securitykey="<your shortcode>" use_shortcode_attributes_only="yes" src="https://mypage.example.com/"]

[advanced_iframe securitykey="<my shortcode>" src="https://mysite.example.co.uk/" resize_on_ajax="" resize_on_click="" onload_resize_width="false" onload_resize="false" onload=""]

I have also set “use_shortcode_attributes_only” in the config page.

Here is the test page:

https://opwall.com/test-eoi/

It resizes, but then the JS within the page dies. There is a select2 item in there, and various blocks get shown or hidden on clicking the checkboxes.

The live page is here and shows how it should work, but has a fixed height set:

https://opwall.com/get-involved/expression-of-interest/

Thank you for your patience.

The form has also onload events which maybe interferes with the onload handling of the advanced iframe.
Your form uses jQuery while I have a method which also works without jQuery.

What you can do is to use the jQuery method also for advanced iframe.

At the end of the ai_external.js you find

addOnloadEvent(aiUpdateIframeHeight);

replace this with

$(document).ready(function() {
aiUpdateIframeHeight();
});

be aware that ai_external.js is generated from ai_external.template.js and the ai_external.js is generated each time you save the config. So when this works also do this modification in ai_external.template.js.

If this works I try to to a jQuery detection first and then use the jQuery way to add the onload event.

Best, Michael

Cool, I’ll give that a go later on today. I assume ai_external.js can be copied to anywhere on the site, once it is set up? So long as it does not have any dependencies requiring it to be located in that directory, then I could put it into a custom plugin or stick it in uploads.

I’ve tried this, and it does not seem to make a difference. The iframe resizes correctly, as always, but the JavaScript inside it no longer operates. Firebug does not give me any JS errors, but I am finding Firebug is not consistent with reporting errors in iframes anyway.

Edit: you have to enable Firebug for the iframe’s domain to see errors in the iframe. Makes sense. The error that stops the JS working is this:

TypeError: y is null
https://opwall.com/wp-includes/js/jquery/jquery.js?ver=1.8.3
Line 2

I guess that’s not much use without a stack trace, but it might give some clues. The iframe content runs fine on its own:

https://www.acadweb.co.uk/opwall/eoi

The error is not really helpful because y is not a variable I use.

What you also can try is to remove the last line which adds the onload and put the onload directly to
1. the body <body onload=”aiUpdateIframeHeight();”>
2. into the ready function of the select2.js

Always make sure to clean the browser cache after such modifications because js is cached by the browser.

I just did some debugging. The select2.js is called but no ajax request is sent afterwards.
I don’t see any Javascript errors. What have you done to enable this?

You can see the JS errors if you right-click in the iframe then enable Firebug from there. If you just enable Firebug from the outer page, then the JS errors inside the iframe don’t show up.