html.Iframe in dash layout

Dash Python
1

Dear dash creators and users,

Could you please help me with an html.Iframe usage in dash layout. I haven´t found any answer via community yet.

I create
app.layout = html.Iframe(src = “Trial.html”)

I see the borders of the frame but the site is not loaded and the frame is empty. I tried both absolute and relative paths. If path does not exists it loads the copy of the main site recurcively.

From the pure html file the … works well. Ha ha, even here in forum it regonizes html code.
What might be the reason that iframe does not work in dash?

The reason why I do it acutally, is the ability to read html code into the main dash site. I faced the problem with big tables: it is much faster to create html-code rather than pack each cell with html.Table, html.Tr, html.Td methods.

May be you have another ideas how to load big tables in to main site with dash? Big table is kind of 20000 x 300 from pandas dataframe. Pandas create html-code in a second and packing with html. methods takes minutes.

Thank you

2

I believe that setting src="Trial.html" will try to serve a file named Trial.html. By default, Dash does not serve files. You will need to add a new route to the server to serve that file, like this:


@server.route('/static/<path:path>')
def serve_static(path):
    root_dir = os.getcwd()
    return flask.send_from_directory(os.path.join(root_dir, 'static'), path)

and then place Trial.html in that file.

I believe that you can also just put the entire HTML string as src=, but I’m not sure.

I’m working on some prototypes for an interactive and editable Table component in Dash: GitHub - plotly/dash-table-experiments: NO LONGER SUPPORTED - use https://github.com/plotly/dash-table instead. It’ll be a couple more weeks before something is ready.

Just curious, what do you expect to do with a table this large? (Since it’s so big, it’s difficult to scroll through or to manually search for cells)

3

https://dash.plot.ly/dash-deployment-server/static-assets
you need to creat a folder named assets and set the *.html file in it.

1 Like