iFrame Local File Issues

Dash Python
1

Hey Everyone!

So I have some .htm files that I want to expose in my website through an iFrame, but I’m running into a lot of issues and a day’s worth of dredging / trial-and-error didn’t quite solve anything. I have all of my apps in a /pages folder (but am using my own routing as opposed to the new multipage routing option, and then within that pages/ folder, I have a web/ folder that contains the .htm files that I would like to expose. In one of my apps (in the pages folder), I’m trying to use something to the effect of this:

html.Iframe(
            src="web/sample_html_page.htm",
            height="100%",
            width="100%",
            frameborder="0",
        )

to try to display it, but I can’t get it to work. Any help on this front would be a lifesaver. Thanks!

2

Hello @dash-beginner,

What’s the dash.register_page for that page, if it is registered, then you’d need that address. If not, then you’ll need to register and pass that address.

Is it rendered through Dash or is it actually html coding? If it is html coding, then you could actually render_template from the flask server instead, using a route from the flask server.

3

Well, so there is no dash.register_page for the page, because my current setup handles all the routing through callbacks instead of the newer multipage setup. (i.e. takes a dcc.Location pathname as input, checks authentication status, and bumps the user to the login screen if they’re not authenticated). I’m also not sure if I’m understanding the register page component - it’s a .htm file that had been exported from Excel, that I would like to load into my application, below the header if that makes sense? (The htm file needs to be embedded within the page, which is why I figured an iFrame would be the direction of choice)

4

Ok.

So, first pages:

pages=True and the pages folder tells Dash where to check to see about different layouts and routings. Each page that Dash finds that has a dash.register_page, the routing will be added as a valid url for the application. These routing layouts will be displayed in the app’s overall layout page container, if available.

Second:

It sounds like you need to render_template from flask, this more than likely will be coded html.

My guess is something like this would work:

from flask import Flask, render_template
from dash import Dash, html

server = Flask(__name__)

@server.route('/my_special_spreadsheet')
def my_special_spreadsheet():
    return render_template('pages/web/sample_html/page.htm')

app = Dash(__name__, server = server)




html.Iframe(
            src="/my_special_spreadsheet",
            height="100%",
            width="100%",
            frameborder="0",
        )
6

Ah I think I get what you’re doing here, but I guess I don’t quite understand how the Flask and Dash servers intermingle with one another when it comes to flask_login? Right now, it is quite convenient to handle auth and routing through Dash with callbacks, because I’m able to use the library dash_mantine_components to keep styling across the entire app uniform, including the login screen. If I shifted to the Flask-based method of authentication, I guess I’m not quite sure how I would maintain that. Right now, I’m creating the flask app, passing that into the server parameter of the dash app, and then initializing flask_login’s LoginManager class on dash_app.server, which presumably is just the original flask application that I passed into the dash app. Does that mean that I would be able to toss on the auth_required decorator to the server.route decorated function that you mentioned and that would solve things? (apologies of this rambling train of thought doesn’t make sense, I think I’m confusing myself more in the process here haha)

1 Like
7

It is possible to send the css of the dash app into the flask app routing. With the headers.