I have a visualization that consists of a set of html, css, and js files. I know that I can use an iframe to show this by hosting my the content on another web server/location, but I am wondering if there is a way to upload all of these files onto wix somewhere and make use of them on our wix site.
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.
With that in mind, I would higly recommend building your site using native Wix components with Wix Code for added functionality. This will result in a much more robust site that will be easier to enhance and maintain.
thanks
ok - looks like $w is roughly similar to jquery’s “$”
not being able to mess with the dom via javascript that is on the page itself is nice to know, as I would not have ever expected such a restriction.
In my case, I’m using d3 and assuming I can access/add to/remove from the dom all I want in general.
I just wanted to plop the thing into the site, as it is likely we’ll eventually put it somewhere else, so completely marrying it to the wix-isms is not really desirable. But it’s good to find out now that that is the price if you aren’t going to use an iframe.
and as for not being able to modify the DOM, I assume this restriction would be in place for any external scripts you might load via a cdn as well…
An external script certainly cannot access the DOM. That would be security nightmare.
As I mentioned, the HtmlComponent is a little more flexible, but it is sandboxed. That is, any DOM access in an HtmlComponent is restricted to only the code in the HtmlComponent. There is no way to access the parent’s DOM.
thanks - and thanks for bearing with me @Yisrael.