This might super simple, or not possible, but it’s driving me nuts. All I’m trying to accomplish is to append dynamic field to the end of this iframe which lays inside the element code of a visual element.
Having a brain fart if anyone can lead me the way.
I don’t think the iframe belongs in the headers section. One approach would be to create the iframe in the element’s initialize() method and append it to instance.canvas. That can be done using jQuery. (instance.canvas is, after all, a jQuery object itself.) So, your initialize() method might look something like the following:
const $ = context.jQuery;
/* Create iframe with desired attributes
* and styling, and store a reference to it.
*/
//instance.data.iframe = $('iframe').attr({ <-- incorrect
instance.data.iframe = $('<iframe>').attr({
name : 'myiFrame',
scrolling : 'no',
frameborder : '0',
marginwidth : '0',
marginheight : '0',
width : '700',
height : '700'
}).css({
border : "0px #ffffff none;"
});
/* Add iframe to the DOM by appending it
* to the Bubble element container.
*/
//instance.canvas.append( iframe ); <-- incorrect
instance.canvas.append( instance.data.iframe );
Then (assuming “something” is a property specified in the Bubble editor), in the element’s update() method, add the src attribute with the dynamic value:
I definitely am getting closer. Your code worked for the most part, as there aren’t any errors in the debugger. But, it doesn’t seem to want to render on page load… Any troubleshooting ideas?
Thanks @exception-rambler, does this go directly underneath the canvas append? No errors in the debugger, but doesn’t render. Maybe my syntax is off. (I clearly need to up my reading on plugin dev lol)
When you do get it to “work”, you should see the iframe element in the DOM, but the external site content might not display, because many sites set the X-Frame-Options response header to deny.