7

Hi Lantz,

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:

instance.data.iframe.attr({
   src : 'https://some.url' + properties.something
});

Then, whenever the element’s property changes, the URL will be updated. (The code’s untested but hopefully close.)

Also FWIW, I don’t think frameborder, marginwidth, and marginheight are valid HTML5. You could use CSS border and padding instead.

1 Like