# Passing data to an IFrame

**URL:** <https://forum.inductiveautomation.com/t/passing-data-to-an-iframe/88923>\
**Category:** Ignition\
**Tags:** ignition81, perspective, scripting\
**Created:** [April 16, 2024, 5:55pm UTC](https://forum.inductiveautomation.com/t/passing-data-to-an-iframe/88923 "2024-04-16T17:55:03Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![csilk](https://avatars.discourse-cdn.com/v4/letter/c/9e8a1a/32.png) [@csilk](https://forum.inductiveautomation.com/u/csilk)\
**Post date:** [April 16, 2024, 5:55pm UTC](https://forum.inductiveautomation.com/t/passing-data-to-an-iframe/88923/1 "2024-04-16T17:55:03Z")

</div>

I am working with the Inline Frame component for the first time and I am wondering if it is possible to pass data to it?

Right now, I have a dropdown on my view along with the Inline Frame. When a user selects an option from the dropdown, the value is written to a tag. The tag is then read into the WebDev I have created for the Inline Frame. The problem is, in order for the Inline Frame to update after a selection from the dropdown, I have to refresh the browser. So I was wondering if it was possible to bind the dropdown value to a custom parameter that the Inline Frame component uses. That way, the user does not have to refresh the browser in order for the Inline Frame to update after a new dropdown selection.

My initial thought was to write a script that would refresh the browser every time a new selection is made from the dropdown, but from what I am reading that may not be possible either?

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [April 16, 2024, 6:02pm UTC](https://forum.inductiveautomation.com/t/passing-data-to-an-iframe/88923/2 "2024-04-16T18:02:45Z")

</div>

> [@csilk](#):
>
> When a user selects an option from the dropdown, the value is written to a tag.

That seems bad for starters. That means that anyone else using the application will be sharing that selection and users will interfere with each other. Writing to a session custom property would be better - or even to a custom property on that view. Let's call it `view.custom.ddOption`.

> So I was wondering if it was possible to bind the dropdown value to a custom parameter that the Inline Frame component uses.

Sure. Construct the URL in an expression binding on the IFrame's `props.src'. Something like,

```auto
"https://forum.inductiveautomation.com/t/passing-data-to-an-iframe/88923"
+ {view.custom.ddOption}

```

Now the component should refresh anytime a value in the binding updates.

---

<div class="post-metadata">

**Author:** ![csilk](https://avatars.discourse-cdn.com/v4/letter/c/9e8a1a/32.png) [@csilk](https://forum.inductiveautomation.com/u/csilk)\
**Post date:** [April 16, 2024, 6:29pm UTC](https://forum.inductiveautomation.com/t/passing-data-to-an-iframe/88923/4 "2024-04-16T18:29:33Z")

</div>

So then in the WebDev script, how do I read in the value from the dropdown? Before, I was using the tag, that was written to from the dropdown, as a parameter in my WebDev script.

---

<div class="post-metadata">

**Author:** ![pturmel](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pturmel/32/3295_2.png) [@pturmel](https://forum.inductiveautomation.com/u/pturmel)\
**Post date:** [April 16, 2024, 6:31pm UTC](https://forum.inductiveautomation.com/t/passing-data-to-an-iframe/88923/5 "2024-04-16T18:31:48Z")

</div>

You have to extract it from the URL. Using a GET parameters makes that easier.

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [April 16, 2024, 6:57pm UTC](https://forum.inductiveautomation.com/t/passing-data-to-an-iframe/88923/6 "2024-04-16T18:57:42Z")

</div>

I've never used WebDev so I may be missing something.  
My intention is:

- Create `view.custom.ddOption`.
- On the dropdown create a property binding on `props.value`. Bind it to `view.custom.ddOption` and make it bidirectional.
- Use the expression binding on the Inline Frame's `props.src` to construct the URL by combining the base path with the parameter from the dropdown. If you're using GET parameters then the finished src will be something like `example.com/folder1/page.php?music=jazz` or whatever.