Running Bricks in an iFrame

How To
1

I tried to run Bricks in an iFrame for an HTML5 presentation. I noticed that it doesn’t work properly. It loads the GUI, but the preview fails to render. Could it be that preview is done through window.top rather than relative by using the iframe reference? Anybody got a workaround?

2

Okay, so I did some digging and the problem seems to be in main.min.js

It contains thing like:

return window.self==window.top?document.getElementById("bricks-builder-iframe").contentWindow:window

or

window.top.document.querySelector('#bricks-structure [data-id="'.concat(t.id,'"]'));

Ideally, it would use relative statements and therefor work at any embed depths.

3

Okay… so the fix is apparently straightforward, and I am proposing to implement something like this in Bricks core!

  1. To test it, I loaded Bricks Builder into an iFrame
  2. I used the local overrides feature from Chrome developer tools (for people that don’t know about it read more here). This allows to save specific files to your hard drive… change them and Chrome uses them like if they had been loaded from the page itself
  3. I added window._top = window; as a first line to the file main.min.js and replaced all occurrences of window.top with window._top
  4. I added window._top = window.parent; as a first line to the file iframe.min.js and replaced all occurrences of window.top with window._top

And now Bricks Builder works inside of iFrames using relative referencing.

This shows that it can be easily done, and I think it should be implemented rather now than later, as it’s best practice not to assume that Bricks will always run as a full window down the line.

Would love to get some feedback on this from @thomas or @timmse

2 Likes