Just like my previous post, this one is also NOT a question but a solution, or at least a workaround until Wix comes up with a solution. I know the post looks long, but bear with me.
So, HTML iframes are used to embed HTML codes or URLs in your page. What if you want to have one such iframe having a code (not URL, but a code) for, say a stock price chart widget, on your dynamic page? One that shows price charts of different stocks on their respective dynamic pages?
You can’t put HTML code in your data collection and connect it to your HTML element. But using Wix Code, you can set the HTML element’s value to a URL. However, widgets (or other embeds) do not have a URL! Well, then we give them one!
Here’s my workaround:
Create a new blank page on your Wix Site, with no header /footer –just plain white background is what my choice is. Keep the page hidden using Site Menu so your website users do not have a direct link to access it.
Now on this page, at the top, you add an HTML iframe element and embed the HTML code in it. Make sure your HTML element’s size is set enough so it contains the entire widget without any scrollbars. [You can also use code to remove scroll bars as shown in step 5.]
Get the URL of this page form Site Menu and add that URL in your data collection in the relevant item’s field. I have named my field, for the sake of this example, “widgetURL”. Needless to add that you have to set the type of this field as “URL” in your data collection.
Go to the dynamic page. Add an HTML iframe element here also, having the same dimensions as the one created in step 2. I assume that this HTML element’s id is “ #html1”.
Assuming that your dynamic dataset’s id is “#dynamicDataset”, add the following code to the dynamic page:
$w.onReady(function () {
//To load the page before running the code
$w("#dynamicDataset").onReady(function () {
//To load the dynamic dataset's data before running the folloing code
$w("#html1").scrolling = "no";
//So that scroll bars, if any, do not appear on our page.
//If you want you can keep them!
let widget = $w('#dynamicDataset').getCurrentItem().widgetURL;
//we create a variable called "widget" and set its value to the URL we have put
//in our data collection.
$w("#html1").src = widget;
//We set the dynamic page's HTML element's URL value to that of "widget",
//which is actually the URL from our data collection.
})
});
Repeat the steps 1-3 for each item of your data collection.
Notes:
i) It only works if your website is published. If your website is unpublished, you won’t be able to see the widget on your dynamic page in preview mode.
ii) It may load a little slow because your page needs to load another page which in turn loads data from another website! Sorry.
Hope this helps.
Thank you for your post! It is such a shame that six has not yet added the option to enable syncing HTML codes with a database, hope this will be an option very soon as my website depends on it.
I will try this out and get back to you on my results. I wish I didn’t have to create pages manually for my codes as that’s the whole point of a dynamic page, but its something.
Thank you so much for this, it works very well and absolutely no complications! Personally for me, I am fortunate to not have to do steps 1-3 so its even easier as I get an iframe link. I enabled scroll because when the user would hover over the iframe they couldn’t move in the website, but it works spectacularly!
I agree that it is possible to connect HTML iframes dynamically. An iframe can store two types of data. In form of a URL or in form of an HTML code. The problem is that the src property of an HTML iframe can set its value only to a URL and not to an HTML code. If you figure out a different way, that connects HTML code dynamically, please let me know. I am no advanced user when it comes to coding or JavaScript. You will help me and others too!
I do not need this code/workaround at the moment, but I am a coder by profession (or I was at one time in my career) and I stumbled on your post and checked it out. Great workaround.
I just wanted to say thank you for taking time to be so generous and helpful to the community.
Nice workaround, but just like David said, this can also be achieved by postMessage/onMessage: you put the html in your collection, send it with postMessage to the html-component and there, once received, you display it. It´s a tad more elegant, but, above all, quicker. How to do it is fully documented in the API and there are lots of examples here on this forum.
Thanks for replying. I will definitely look this up and when I am done, I will post a ‘how-to’ using that method too. It will be far easier for users, including me!
@valueganesh You’re right, using the src limits you to using one particular element and have its value be dynamically set. However, using the innerHTML allows you more flexibility and so you could theoretically have different widgets depending on the dynamic page.
It’s not really a one size fits all kind of deal since widgets can function in many different ways, which is why you’re only really likely to find the basic concept on the forum. Overcoming Wix’s DOM limitations is usually the determining factor.
@valueganesh Would you happen to know how to make it possible to open the embedded iframe into fullscreen? Either by actually opening it up fullscreen as a pop up (when you watch a video), or opening a new page. I would prefer it did not open up a new page as I would like the visitors to stay on the page, especially my website.
One solution (for opening a new page) I can think of is to make a button, and then that buttons url value will be the same as the html box. I think this should be easy but I have no experience in javascript.
I would prefer to have it open in fullscreen though, as that is what fullscreen means. Unfortunately wix does not have that option yet. Do you think you could help me?
Im working on a project that Im passionate about and have a few more details to finish until its ready for publishing, this is one of them!
@skmedia That might be just what I’m looking. Any chance you could help me set this up? I have used the following code mentioned above by @valueganesh . I only do HTML & CSS.
Hey @valueganesh do you know if this trick can this be used to any kind of widget? Cause My doesn’t seems to be working out. I don’t what I’m missing… maybe de URL part? I should use de url from my “html widget” page, right? Should be something like ’ https://www.mysite.com/ widgetpagename ’ ?
Yes I believe this will work for any kind of widget. I have tried a several myself. And that " https://www.mysite.com/ widgetpagename" web-page/website should be published and live otherwise it won’t be seen in your web-page.
I reiterate…it really is not a one solution fits all deal. It depends very heavily on the widget you’re implementing. If you’d like specialized help, you can contact me directly .
