Passing data into the Bubble HTML iFrame

I want to pass data to my iFrame to change what is being shown. Currently showing the JWPlayer and want to control the seek from outside the iFrame.

Have used the JS function model to get data out of the iFrame, but want to do this the other way.

The iFrame is inside a Tab and have two of them on the page.

Don’t know how to get the path to the iFrame in the DOM as then can use the Toolbox JS to send a message.

Pass it as a URL parameter?

I’m using the HTML element from Bubble in iFrame mode which doesn’t allow this as the iframe code is part of the element.

And the url model doesn’t work as want to send data to the frame as needed, not as part of the initial load that the url model would use.

Worked out a way to do this.

In the HTML iFrame, formula exposed

<p id="demo"></p>

<script>
window.myFunction = function() {
  document.getElementById("demo").innerHTML = "called";
}
</script>

Then using the JS Action to call this.

window.frames[0].frameElement.contentWindow .myFunction();

This will update the iFrame. Can pass values with this was well.

2 Likes

Hey @peter10, I came across this post while trying to extract data out of an iFrame. Could you maybe explain how you did that?

@peter10 , I have the same question as @user4879, would like to see how you extracted the data out of the iFrame as well

Hi guys. Can someone please explain how this would be used in example?

Thanks