HTML iframe with dynamic height

Hi, i need to add a plugin to my webpage with 2 lines of javascript:

The plugin creates a responsive iframe by using the iframeresizer library .

In WIX I have found the HTML iframe to do this.

However, this HTML iframe has a fixed height. I hoped to be able to fix that by using the iframeresizer library too, however, i am afraid that this is not possible because the iframe that’s being generated by WIX, does not have an ID, CLASS or NAME. So i can not find a way to reference it with the resizer.

Is there a way to solve this? Or is there a better way to add these 2 lines of javascript to my page?

Any help is appreciated :slight_smile:

Kind regards, Jan Willem Vermeer

The HtmlComponent (iFrame) does not support resizing and it is not accessible using HTML properties (ID, CLASS or NAME) of from the DOM.

Check with the service provider if they have a REST interface and you can then use wix-fetch . See the article Accessing 3rd-Party Services .

Good luck,

Yisrael

Thanks for your quick reply !

I already had read the information about wix-fetch, however, it is not clear for me how to implement the the wix-code in my website. Why is it not possible to add 2 simple javascript lines to my page and why would it be possible to add this very complicated javascript to my page?! I simply do not understand this but will study the information more.

It’s like this…

WixCode understands all of Javascript, except for anything that accesses the DOM. This keeps the user from inadvertently “breaking” something. I myself tried to hack things from the code, from an iFrame, and in my dreams, but WixCode wasn’t having any of it. Accessing document elements such as div, span, button, etc is off-limits. The way to access elements on the page is only through $w.

One small exception is the $w.HtmlComponent (which is based on an iFrame). This element was designed to contain vanilla HTML and it works just fine. You just can’t try to trick it by using parent, window, top, etc. Same goes with the Javascript evaluate() function. It is sandboxed and does not allow access to the DOM.

Alll of the above is in the name of security . And this is of paramount importance.

You should be able to do it by setting a percentage height.

We currently do that for both width and height in two of our HTML iFrames using the following code (Google MyMaps iFrame)

<iframe src="https://www.google.com/maps/d/embed?mid=xxxxxxxxx_xxxxxxxxxxxx" border="0" width="100%" height="96%"></iframe>

So what you would need to do is inspect the iframe which is generated by that script, and add the CSS to match it.

1 Like

This type of functionality might be available in the future, but only within the parameters of full security and page validity. You might want to post a Feature Request .

I understand the security concerns.

With iframes on a webpage there are always issues with the width and height and responsiveness (on smaller screens). The iframeresize library solves that completely. But WIX adds a iframe container of its own which can not be controlled and because of that the plugin loses its behaviour.

Most examples of the wix-code i have studied today are simple forms on which the user has to press a button to startup some javascript. That’s not what i want - the information of the plugin must be shown automatically.

By the way, I have more than 50 responsive plugins and can not imagine that such a popular CMS as WIX does not provide an easy way to implement them… I need to rebuild 65 websites (they are now in a CMS using “Portlets” instead of plugins) and just thought/hoped that WIX was an ideal alternative. Why cannot there be an app similar as the WIX html-plugin but then without the iframe?! Such a pity.

Hi Yisrael, it is crucial to get my plugins working on WIX sites. An enhancement request takes too much time. Is it possible to contact the WIX development team directly and discuss this? Would a custom app in WIX be possible?
Kind regards, Jan Willem

First of all, Wix is not a CMS. Wix sites with Wix Code are full blown development environments. Limited only by the developer’s imagination and security concerns.

Wix Code does not have access to the DOM to provide a high level of security and to prevent the site from being “broken”.

If you would like to discuss this further, I would suggest contacting the Wix support team , as they know best.

1 Like

Thanks. I have contacted support.

hmmm can HTML widget in any shape or form dynamically communicate with Wix to change and display a variety of content?

My need is more like https://www.wix.com/code/home/forum/community-feature-request/modify-the-url-of-an-embedded-iframe, but I ran across this thread and figured I may get a response here as well since I do not own the original post up there. I need to display different source code OR different embedded URL dynamically in a single html frame, with 25 versions… its a mess right now

I think the answer is NO, because there is no html-css communication possible between the HTML widget and the contents of the iframe. That’s because WIX creates an iframe without ID, class or name so there is no way to reference it.

1 Like