Getting out of an iframe

Dash Python
1

Hi guys.

I am creating a dashboard using Flask and Dash. The dashboard has all its navigation menus, header and footer in Flask. In the content section I have iframed my Dash application.

In the iframe I have populated a datatable. I want a functionality where when I click on certain cell of the datatable, I want to navigate to another route. Everything up until now is smooth.

The problem is : Upon clicking the cell, the new route populates in the same iframe. is there a way to exit the iframe and go to the route.

Anyone has any idea on how to solve it?

Thanks in advance!

2

This is less of a Dash question and more of a general iframes one. Thie first answer on this Stack Overflow question looks like it could be what you need: https://stackoverflow.com/questions/1037839/how-to-force-link-from-iframe-to-be-opened-in-the-parent-window

3

@nedned Thanks for the quick reply.

I tried that already. It isn’t working. The way I approached is, I check if the cell is active or not in the datatable. And if it is active /selected then I redirect it to another url.

The approach that you mentioned would work if the selected/active cell was an anchor tag or if it was any html element. I am not sure about it though.

Also, since I have added the src of my iframe as the route, I will have to specify some code in the route /dashboard to redirect it to another page

<iframe
     name="dataToFrame"
     style="width: 100%; height: 1024px;"
     src="{{ url_for('/dashboard/') }}" >

Also, could you suggest me any other ideas that I could implement ? Maybe using some parameters in dcc.Location() that could solve it .

4

Oh right, it’s not an anchor tag in the ifrafe you’re clicking. What’s the mechanism by which the navigation happens when you click on the cell?

5

@nedned This is what I have done.

@app.callback(Output(‘firstlink’,‘href’),[Input(‘info_table’,‘active_cell’),Input(‘info_table’,‘data’)])
def navigate(active cell,data):
if selected_cell[‘row’]>-1:
#Checked if the cell is active.
# If it is activ, do something with the data and return the path. Say /newpath
return newpath

`dcc.Location(id=‘firstlink’ ,refresh=True)

This works perfectly. However, the new route is called in the iframe itself.

Hope the information I have provided gives you the insight needed.

6

Ah I see, you’re doing it with a callback on a DataTable’s active_cell property that’s targeting the href of a dcc.Location component.

This idea is on the right track, but I think you might be running into a limitation of Dash. When using an anchor tag, you can set the target attribute to _parent to target the outer window context (as suggested in those Stack Overflow answers). But the dcc.Location component is stuck targeting the current window.location with no way of targeting window.parent.location (as you can see from the source code). Perhaps the dcc.Location component could be extended to have a target prop.

I’ve just created an issue to explore the possibility of making this enhancement: https://github.com/plotly/dash-core-components/issues/717

7

Thanks for all the help @nedned . Hope it gets fixed soon :upside_down_face: