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:
1) 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.
2) 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.]
3) 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.
4) 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”.
5) 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.
})
});
6) 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.
Figured it out thanks to you! I appreciate it my dude.
Thanks for your post. Is it possible to do this in a more secure way so that the site user cannot 'inspect' the page and see the iframe source html?
Richard.
I'm curious to why my "dataset" which I believe is called "openRegistration" is not recognized as a dataset?
It's listed under database -> collections.
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 ' ?
@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!
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.
Hey valueganesh.... 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. All the best to you!
This looks interesting, I'll give it a try. For the record, it is possible to connect iframes dynamically using postMessage() and .innerHTML/src :)
I could honestly kiss your right now! 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!
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.